/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Description: Child theme for the Kadence theme.
Author: Mats Buis
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* Custom styles start here */

/* =========================================================
   Ciralgo Design System Layer (v1)
   Mirrors the Ciralgo webapp tokens, typography and hero.
   All classes are prefixed with .ci- to avoid collisions
   with Kadence core, blocks and third-party plugins.
   ========================================================= */

/* --- Poppins font (loaded once) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- Tokens --- */
:root {
    --ci-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --ci-color-brand: #49865b;
    --ci-color-brand-dark: #3d7450;
    --ci-color-brand-deep: #2e5a3e;
    --ci-color-brand-light: #ecfdf5;

    --ci-color-bg: #f8fafc;
    --ci-color-text: #0f172a;
    --ci-color-text-subtle: #64748b;
    --ci-color-on-dark: #ffffff;

    --ci-radius-sm: 6px;
    --ci-radius-md: 8px;
    --ci-radius-lg: 12px;
    --ci-radius-xl: 16px;

    --ci-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --ci-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06);
    --ci-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    --ci-transition: 150ms ease;
}

/* --- Base typography (scoped to body to avoid Kadence header overrides) --- */
body {
    font-family: var(--ci-font-sans);
    color: var(--ci-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Button utilities --- */
.ci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--ci-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ci-transition),
                color var(--ci-transition),
                border-color var(--ci-transition),
                box-shadow var(--ci-transition),
                transform var(--ci-transition);
}

.ci-btn:focus-visible {
    outline: 2px solid var(--ci-color-brand);
    outline-offset: 2px;
}

.ci-btn--primary {
    background-color: var(--ci-color-brand);
    color: var(--ci-color-on-dark);
    box-shadow: var(--ci-shadow-sm);
}

.ci-btn--primary:hover {
    background-color: var(--ci-color-brand-dark);
    color: var(--ci-color-on-dark);
    box-shadow: var(--ci-shadow-md);
}

.ci-btn--secondary {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

.ci-btn--secondary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
}

.ci-btn--pill {
    border-radius: 999px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.ci-btn--on-dark {
    background-color: var(--ci-color-on-dark);
    color: var(--ci-color-brand-deep);
}

.ci-btn--on-dark:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
}

.ci-btn--ghost-on-dark {
    background-color: transparent;
    color: var(--ci-color-on-dark);
    border-color: rgba(255, 255, 255, 0.6);
}

.ci-btn--ghost-on-dark:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--ci-color-on-dark);
    color: var(--ci-color-on-dark);
}

/* --- Homepage hero --- */
.ci-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 6rem) 1.25rem;
    color: var(--ci-color-on-dark);
    background-color: var(--ci-color-brand-deep);
    background-image:
        radial-gradient(ellipse at top left,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.35) 100%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 10px);
}

.ci-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.ci-hero__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.ci-hero__title {
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.15;
    color: var(--ci-color-on-dark);
}

.ci-hero__sub {
    max-width: 640px;
    margin: 0 auto 2rem;
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.ci-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* =========================================================
   Ciralgo Header Polish Layer (v1)
   Restyles the Kadence Header Builder output to match the
   Ciralgo design system. Targets Kadence native classes.
   Safe to remove if the Header Builder structure changes.
   ========================================================= */

/* --- Sticky header: shadow appears once the header is stuck --- */
.site-header-sticky-section.item-is-stuck,
.kadence-sticky-header.item-is-stuck,
.site-header-sticky-wrap.item-is-stuck {
    background-color: #ffffff;
    box-shadow: var(--ci-shadow-sm);
    transition: box-shadow var(--ci-transition), background-color var(--ci-transition);
}

/* --- Primary navigation hover state --- */
.site-header .primary-navigation .menu > .menu-item > a {
    font-family: var(--ci-font-sans);
    font-weight: 500;
    color: var(--ci-color-text);
    transition: color var(--ci-transition);
}

.site-header .primary-navigation .menu > .menu-item > a:hover,
.site-header .primary-navigation .menu > .menu-item > a:focus,
.site-header .primary-navigation .menu > .menu-item.current-menu-item > a,
.site-header .header-navigation .menu-item > a:hover,
.site-header .header-navigation .menu-item > a:focus,
.site-header .header-navigation .menu-item.current-menu-item > a {
    color: var(--ci-color-brand-dark) !important;
}

/* Subtle underline on hover for primary nav */
.site-header .primary-navigation .menu > .menu-item > a {
    position: relative;
}

.site-header .primary-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.5rem;
    height: 2px;
    background-color: var(--ci-color-brand);
    border-radius: 2px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--ci-transition), transform var(--ci-transition);
}

.site-header .primary-navigation .menu > .menu-item > a:hover::after,
.site-header .primary-navigation .menu > .menu-item.current-menu-item > a::after {
    opacity: 1;
    transform: translateY(0);
}

/* --- Secondary navigation ("Log in" menu) styled as an outlined pill:
   same shape as "Get started", but a subtle ring so it reads as secondary. --- */
.site-header .secondary-navigation .menu > .menu-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--ci-color-brand);
    border-radius: 999px;
    background-color: transparent;
    color: var(--ci-color-brand-dark);
    text-decoration: none;
    transition: background-color var(--ci-transition),
                border-color var(--ci-transition),
                color var(--ci-transition),
                box-shadow var(--ci-transition);
}

.site-header .secondary-navigation .menu > .menu-item > a:hover,
.site-header .secondary-navigation .menu > .menu-item > a:focus {
    border-color: var(--ci-color-brand);
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
    box-shadow: var(--ci-shadow-sm);
}

/* Secondary nav should not get the primary-nav hover underline */
.site-header .secondary-navigation .menu > .menu-item > a::after {
    content: none;
}

/* --- Header Button ("Get started") styled as brand-green pill --- */
.site-header .header-button,
.site-header-item .header-button,
.site-header .header-button-inner-wrap .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.65rem 1.4rem;
    border: 1px solid var(--ci-color-brand);
    border-radius: 999px;
    background-color: var(--ci-color-brand);
    color: var(--ci-color-on-dark);
    box-shadow: var(--ci-shadow-sm);
    text-decoration: none;
    transition: background-color var(--ci-transition),
                border-color var(--ci-transition),
                box-shadow var(--ci-transition),
                color var(--ci-transition);
}

.site-header .header-button:hover,
.site-header-item .header-button:hover,
.site-header .header-button-inner-wrap .button:hover {
    background-color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand-dark);
    color: var(--ci-color-on-dark);
    box-shadow: var(--ci-shadow-md);
}

.site-header .header-button:focus-visible {
    outline: 2px solid var(--ci-color-brand);
    outline-offset: 2px;
}

/* --- Header height: trim a bit (tune values to taste) --- */
.site-header-row-container.site-header-main-section .site-header-row-container-inner,
.site-header-main-section-container {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Tighten the buttons' vertical padding so the row can shrink with them */
.site-header .header-button,
.site-header-item .header-button,
.site-header .header-button-inner-wrap .button,
.site-header .secondary-navigation .menu > .menu-item > a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* --- Mobile / Off-canvas drawer polish --- */
#mobile-drawer .drawer-inner,
.popup-drawer-layout-sidepanel .drawer-inner {
    padding: 1.5rem 1.25rem 1.25rem;
    background-color: #ffffff;
    color: var(--ci-color-text);
}

/* Larger, friendlier tap targets in the drawer nav */
#mobile-drawer .mobile-navigation .menu-item > a,
.popup-drawer-layout-sidepanel .mobile-navigation .menu-item > a {
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 1.125rem;
    padding: 0.95rem 0.5rem;
    color: var(--ci-color-text);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition: color var(--ci-transition), background-color var(--ci-transition);
}

#mobile-drawer .mobile-navigation .menu-item > a:hover,
#mobile-drawer .mobile-navigation .menu-item.current-menu-item > a {
    color: var(--ci-color-brand-dark);
}

/* Header button inside the drawer becomes a full-width pinned CTA */
#mobile-drawer .header-button,
.popup-drawer-layout-sidepanel .header-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1.25rem;
    padding: 0.95rem 1.25rem;
    font-size: 1rem;
}

/* Mobile hamburger trigger color matches brand */
.mobile-toggle-open-container .menu-toggle-open {
    color: var(--ci-color-text);
    transition: color var(--ci-transition);
}

.mobile-toggle-open-container .menu-toggle-open:hover {
    color: var(--ci-color-brand-dark);
}

/* --- Small screen tweaks for the main header row --- */
@media (max-width: 960px) {
    .site-header-main-section-right {
        gap: 0.5rem;
    }
}

/* =========================================================
   Header Button color override (v2)
   The Customizer sometimes injects a default blue color
   on the button with high specificity. These rules use
   broader selectors + !important to force the brand green
   without depending on Customizer state.
   ========================================================= */
.site-header a.header-button,
.site-header .header-button-inner-wrap a,
.site-header .header-button-inner-wrap .kb-button,
.site-header .header-button-inner-wrap .wp-block-button__link,
.site-header .header-button-inner-wrap .button,
#mobile-drawer a.header-button,
#mobile-drawer .header-button-inner-wrap a {
    background-color: var(--ci-color-brand) !important;
    border-color: var(--ci-color-brand) !important;
    color: var(--ci-color-on-dark) !important;
}

.site-header a.header-button:hover,
.site-header .header-button-inner-wrap a:hover,
.site-header .header-button-inner-wrap .kb-button:hover,
.site-header .header-button-inner-wrap .wp-block-button__link:hover,
.site-header .header-button-inner-wrap .button:hover,
#mobile-drawer a.header-button:hover,
#mobile-drawer .header-button-inner-wrap a:hover {
    background-color: var(--ci-color-brand-dark) !important;
    border-color: var(--ci-color-brand-dark) !important;
    color: var(--ci-color-on-dark) !important;
}

/* =========================================================
   Ciralgo Engagement Hero (v1)
   Conversion-optimized section that sits directly under
   the header. Pure HTML+CSS, no JS dependency.

   Patterns used:
     - F-pattern reading: headline + visual right
     - Live status pill with subtle pulse (movement attracts eye)
     - Primary + ghost CTAs (clear hierarchy)
     - Trust strip below CTAs (social proof in proximity)
     - Stats row below hero (concrete numbers)
     - Glass-morphism product card on the right
     - Respects prefers-reduced-motion
   ========================================================= */

.ci-eh {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem)
             clamp(5rem, 10vw, 8rem);
    color: var(--ci-color-on-dark);
    background-color: var(--ci-color-brand-deep);
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.45) 0%,
            rgba(73, 134, 91, 0) 60%),
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.35) 100%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 10px);
}

/* White asymmetric curve at the bottom — visually flows into
   the next (white) section, matching the existing site treatment. */
.ci-eh__curve {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(60px, 9vw, 120px);
    z-index: 0;
    pointer-events: none;
    display: block;
}

.ci-eh__curve path {
    fill: #ffffff;
}

.ci-eh__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (min-width: 960px) {
    .ci-eh__inner {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

/* --- Left side: copy --- */
.ci-eh__copy {
    text-align: left;
}

.ci-eh__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.ci-eh__pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: ci-eh-pulse 2s ease-out infinite;
}

@keyframes ci-eh-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.ci-eh h1.ci-eh__title,
.ci-eh .ci-eh__title,
.ci-eh__title {
    margin: 0.5rem 0 1rem !important;
    padding-top: 0 !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2.25rem, 5.2vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ci-color-on-dark);
}
.ci-eh .ci-eh__pill,
.ci-eh__pill { margin-bottom: 0 !important; }
.ci-eh .ci-eh__copy > .ci-eh__pill + .ci-eh__title {
    margin-top: 0.5rem !important;
}

.ci-eh__title em {
    font-style: normal;
    color: #a7f3d0;
    background: linear-gradient(110deg, #a7f3d0 0%, #ecfdf5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-eh__sub {
    max-width: 560px;
    margin: 0 0 2rem;
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.ci-eh__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.ci-eh__cta-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.ci-eh__cta-note::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(74, 222, 128, 0.25);
    color: #4ade80;
    font-size: 0.6875rem;
    font-weight: 700;
}

.ci-eh__trust {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
}

.ci-eh__trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 0.75rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
}

.ci-eh__trust-stat strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ci-color-on-dark);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.ci-eh__trust-stat span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
}

/* --- Right side: product card --- */
.ci-eh__visual {
    position: relative;
    perspective: 1200px;
}

.ci-eh__card {
    position: relative;
    padding: 1.25rem;
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ci-radius-xl);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: rotate(-1.5deg);
    animation: ci-eh-float 6s ease-in-out infinite;
}

@keyframes ci-eh-float {
    0%, 100% { transform: rotate(-1.5deg) translateY(0); }
    50%      { transform: rotate(-1.5deg) translateY(-6px); }
}

.ci-eh__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ci-eh__card-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.ci-eh__card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #4ade80;
    font-weight: 500;
}

.ci-eh__card-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4ade80;
}

.ci-eh__card-kpi {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ci-eh__card-kpi-value {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    color: var(--ci-color-on-dark);
    line-height: 1;
    letter-spacing: -0.01em;
}

.ci-eh__card-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.15);
    border-radius: 999px;
}

.ci-eh__card-chart {
    width: 100%;
    height: 130px;
    margin: 0.5rem 0 1rem;
    display: block;
}

.ci-eh__card-chart path.ci-line {
    fill: none;
    stroke: #4ade80;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: ci-eh-draw 2.5s ease-out 0.4s forwards;
}

.ci-eh__card-chart path.ci-area {
    fill: url(#ci-eh-grad);
    opacity: 0;
    animation: ci-eh-fade 1.5s ease-out 1.5s forwards;
}

@keyframes ci-eh-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes ci-eh-fade {
    to { opacity: 1; }
}

.ci-eh__card-rows {
    display: grid;
    gap: 0.5rem;
}

.ci-eh__card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--ci-radius-md);
    font-size: 0.875rem;
}

.ci-eh__card-row-label {
    color: rgba(255, 255, 255, 0.75);
}

.ci-eh__card-row-value {
    font-weight: 500;
    color: var(--ci-color-on-dark);
    font-variant-numeric: tabular-nums;
}

.ci-eh__card-row-value.is-up    { color: #4ade80; }
.ci-eh__card-row-value.is-down  { color: #f87171; }

/* Mobile: card centered, no tilt */
@media (max-width: 959px) {
    .ci-eh__card {
        transform: none;
        animation: none;
        max-width: 460px;
        margin: 0 auto;
    }
}

/* Respect reduced motion for everyone */
@media (prefers-reduced-motion: reduce) {
    .ci-eh__pill-dot,
    .ci-eh__card,
    .ci-eh__card-chart path {
        animation: none !important;
    }
    .ci-eh__card-chart path.ci-line   { stroke-dashoffset: 0; }
    .ci-eh__card-chart path.ci-area   { opacity: 1; }
}

/* Engagement Hero — primary & ghost CTAs (white-on-dark variants) */
.ci-eh .ci-btn--primary {
    background-color: var(--ci-color-on-dark);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-on-dark);
}

.ci-eh .ci-btn--primary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-brand-light);
}

.ci-eh .ci-btn--ghost-on-dark {
    background-color: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   Ciralgo Problem Section (v1)
   White-background section that validates the reader's pain
   with three cards, ending in a bridge line to the next
   section. Pure CSS. Follows a mobile-first grid.
   ========================================================= */

.ci-ps {
    background-color: #ffffff;
    color: var(--ci-color-text);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.ci-ps__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.ci-ps__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-ps h2.ci-ps__title,
.ci-ps .ci-ps__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-ps .ci-ps__eyebrow,
.ci-ps .ci-ps__sub,
.ci-ps .ci-ps__bridge {
    text-align: center !important;
}

.ci-ps__sub {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
}

.ci-ps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
    margin-bottom: 2.25rem;
}

@media (min-width: 720px) {
    .ci-ps__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.ci-ps__card {
    position: relative;
    padding: 1.5rem 1.5rem 1.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-ps__card:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}

.ci-ps__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}

.ci-ps__card-icon svg {
    width: 24px;
    height: 24px;
}

.ci-ps__card-title {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ci-color-text);
}

.ci-ps__card-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

.ci-ps__bridge {
    margin: 0 auto;
    max-width: 640px;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 500;
    color: var(--ci-color-brand-dark);
}

.ci-ps__bridge::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: 0 auto 1rem;
    background-color: var(--ci-color-brand);
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ci-ps__card {
        transition: none;
    }
    .ci-ps__card:hover {
        transform: none;
    }
}

/* =========================================================
   Ciralgo How-It-Works (v1)
   3-step arc that pays off the problem section:
   Connect -> Track -> Prove. Pale background so the page
   reads as: dark hero -> white problem -> pale how -> white...
   ========================================================= */

.ci-hw {
    background-color: var(--ci-color-bg);
    color: var(--ci-color-text);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
}

.ci-hw__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.ci-hw__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-hw h2.ci-hw__title,
.ci-hw .ci-hw__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-hw .ci-hw__sub {
    max-width: 640px;
    margin: 0 auto 2.75rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
    text-align: center !important;
}

.ci-hw__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
    counter-reset: ci-hw;
}

@media (min-width: 780px) {
    .ci-hw__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
        position: relative;
    }
    /* Straight dotted connector, vertically centered on the cards.
       Uses a radial-gradient repeating pattern for crisp, evenly
       spaced dots — no SVG stretching issues at any width. */
    .ci-hw__steps::before {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        top: 50%;
        transform: translateY(-50%);
        height: 4px;
        background-image: radial-gradient(circle,
            rgba(73, 134, 91, 0.6) 1.25px,
            transparent 1.5px);
        background-size: 12px 4px;
        background-repeat: repeat-x;
        background-position: 0 center;
        z-index: 0;
        pointer-events: none;
    }
}

/* Number + icon sit on the same horizontal row */
.ci-hw__step-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ci-hw__step {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.5rem 1.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-hw__step:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}

.ci-hw__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border: 3px solid var(--ci-color-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(73, 134, 91, 0.25);
}

.ci-hw__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}

.ci-hw__step-icon svg {
    width: 22px;
    height: 22px;
}

.ci-hw__step-title {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ci-color-text);
}

.ci-hw__step-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

.ci-hw__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ci-hw .ci-btn--secondary {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

.ci-hw .ci-btn--secondary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

@media (prefers-reduced-motion: reduce) {
    .ci-hw__step {
        transition: none;
    }
    .ci-hw__step:hover {
        transform: none;
    }
}

/* =========================================================
   Ciralgo Dimensions (v1)
   The four things Ciralgo measures: Usage, Cost, Impact, Risk.
   4-column grid on desktop (4 equal cards), 2x2 on tablet,
   1-column on mobile. Ends with a compact stats strip.
   ========================================================= */

.ci-dm {
    background-color: var(--ci-color-bg);
    color: var(--ci-color-text);
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.ci-dm__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.ci-dm__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-dm h2.ci-dm__title,
.ci-dm .ci-dm__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-dm .ci-dm__sub {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
    text-align: center !important;
}

.ci-dm__grid {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}

@media (min-width: 640px) {
    .ci-dm__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .ci-dm__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ci-dm__card {
    padding: 1.5rem 1.35rem 1.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-dm__card:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}

.ci-dm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.9rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}

.ci-dm__icon svg {
    width: 22px;
    height: 22px;
}

.ci-dm__card-title {
    margin: 0 0 0.35rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ci-color-text);
}

.ci-dm__card-body {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

/* Stats strip — mirrors the hero trust stats language */
.ci-dm__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    padding-top: 2rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.ci-dm__stat {
    text-align: center;
    max-width: 280px;
}

.ci-dm__stat strong {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ci-color-text);
    margin-bottom: 0.4rem;
}

.ci-dm__stat span {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ci-color-text-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .ci-dm__card {
        transition: none;
    }
    .ci-dm__card:hover {
        transform: none;
    }
}

/* =========================================================
   Ciralgo Trust & Compliance (v1)
   Six compliance capabilities + "Backed by" partner strip.
   Turns EU AI Act / GDPR / EU hosting into the wedge story
   instead of a bullet point.
   ========================================================= */

.ci-tc {
    background-color: #ffffff;
    color: var(--ci-color-text);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
}

.ci-tc__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.ci-tc__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-tc h2.ci-tc__title,
.ci-tc .ci-tc__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-tc .ci-tc__sub {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
    text-align: center !important;
}

.ci-tc__grid {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.5rem;
    text-align: left;
}

@media (min-width: 720px) {
    .ci-tc__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 2rem;
    }
}

@media (min-width: 1024px) {
    .ci-tc__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ci-tc__item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1rem 1rem 0.75rem;
    background-color: var(--ci-color-bg);
    border-radius: var(--ci-radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.05);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-tc__item:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-sm);
}

.ci-tc__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-tc__check svg {
    width: 18px;
    height: 18px;
}

.ci-tc__item-title {
    margin: 0 0 0.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ci-color-text);
}

.ci-tc__item-body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

.ci-tc__backed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.ci-tc__backed-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-color-text-subtle);
}

.ci-tc__backed-logos {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 8vw, 5.5rem);
    flex-wrap: wrap;
    justify-content: center;
}

.ci-tc__logo {
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    opacity: 0.85;
    transition: opacity var(--ci-transition);
}

.ci-tc__logo:hover {
    opacity: 1;
}

.ci-tc__logo-link {
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
    transition: opacity var(--ci-transition), transform var(--ci-transition);
}

.ci-tc__logo-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.ci-tc__logo-img {
    display: block;
    height: clamp(32px, 4vw, 44px);
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .ci-tc__item {
        transition: none;
    }
    .ci-tc__item:hover {
        transform: none;
    }
}

/* =========================================================
   Ciralgo Pricing Teaser (v1)
   Consumer <-> Business toggle. Three tier cards per group.
   Middle tier highlighted. Pure CSS + tiny inline JS.
   ========================================================= */

.ci-pr {
    background-color: var(--ci-color-bg);
    color: var(--ci-color-text);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.ci-pr__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.ci-pr__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-pr h2.ci-pr__title,
.ci-pr .ci-pr__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-pr .ci-pr__sub {
    max-width: 620px;
    margin: 0 auto 2rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
    text-align: center !important;
}

/* --- Toggle --- */
.ci-pr__toggle {
    --ci-pr-tog-w: 140px;
    position: relative;
    display: inline-flex;
    padding: 4px;
    margin: 0 auto 2.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    box-shadow: var(--ci-shadow-sm);
}

/* Force-neutralize Kadence's default <button> styling
   so only our own state classes control the visual.
   Very high specificity + !important + pseudo kill covers
   every path Kadence uses to paint buttons blue. */
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn,
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn:hover,
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn:focus,
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn:focus-visible,
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn:active,
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn.is-active {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-clip: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn::before,
section.ci-pr .ci-pr__toggle .ci-pr__toggle-btn::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.ci-pr__toggle-btn {
    position: relative;
    z-index: 1;
    width: var(--ci-pr-tog-w);
    padding: 0.55rem 0;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 0.925rem;
    line-height: 1.2;
    text-align: center;
    color: var(--ci-color-text-subtle);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--ci-transition);
}

.ci-pr__toggle-btn:hover {
    color: var(--ci-color-text);
}

.ci-pr__toggle-btn.is-active {
    color: #ffffff !important;
}

.ci-pr__toggle-btn:focus-visible {
    outline: 2px solid var(--ci-color-brand);
    outline-offset: 3px;
}

.ci-pr__toggle-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    left: 4px;
    width: var(--ci-pr-tog-w);
    height: calc(100% - 8px);
    background-color: var(--ci-color-brand);
    border-radius: 999px;
    transition: transform var(--ci-transition);
}

.ci-pr__toggle[data-active-plan="business"] .ci-pr__toggle-indicator {
    transform: translateX(var(--ci-pr-tog-w));
}

/* --- Card grid --- */
.ci-pr__group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: left;
    margin-bottom: 2rem;
}

@media (min-width: 860px) {
    .ci-pr__group {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        align-items: stretch;
    }
}

.ci-pr__group.is-hidden {
    display: none;
}

.ci-pr__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    box-shadow: var(--ci-shadow-sm);
    text-align: left;
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-pr__card:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}

.ci-pr__card.is-featured {
    border-color: var(--ci-color-brand);
    border-width: 2px;
    box-shadow: 0 10px 30px rgba(73, 134, 91, 0.22);
}

/* No translateY on featured card — all three cards share the same
   top baseline so the tier names align horizontally. Featured status
   is still communicated by the badge, thicker green border, and
   deeper shadow. */

.ci-pr__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 999px;
    white-space: nowrap;
}

.ci-pr__name {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ci-color-text);
}

.ci-pr__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.ci-pr__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.ci-pr__stat {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* Prominent seats callout for Business tiers. Big enough that
   nobody can miss how many seats the price actually covers. */
.ci-pr__seats-callout {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.6rem;
    background-color: var(--ci-color-brand-light);
    border-left: 4px solid var(--ci-color-brand);
    border-radius: var(--ci-radius-md);
}

.ci-pr__seats-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--ci-color-brand-dark);
}

.ci-pr__seats-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ci-pr__seats-text strong {
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ci-color-brand-dark);
    letter-spacing: -0.01em;
}

.ci-pr__seats-text span {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    opacity: 0.7;
}

.ci-pr__amount {
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    line-height: 1;
    color: var(--ci-color-text);
    letter-spacing: -0.02em;
}

.ci-pr__period {
    font-size: 0.95rem;
    color: var(--ci-color-text-subtle);
}

.ci-pr__tagline {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ci-color-text-subtle);
}

.ci-pr__features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem !important;
    display: grid;
    gap: 0.55rem;
    text-align: left !important;
}

.ci-pr__features li {
    display: flex !important;
    gap: 0.6rem;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.925rem;
    line-height: 1.4;
    color: var(--ci-color-text);
    text-align: left !important;
}

.ci-pr__features li::before,
.ci-pr__features li::marker { content: none !important; display: none !important; }

.ci-pr__features li span {
    flex: 1 1 auto;
    text-align: left !important;
    min-width: 0;
}

.ci-pr__feature-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--ci-color-brand-dark);
}

.ci-pr__tagline {
    text-align: left !important;
}

.ci-pr__cta {
    margin-top: auto;
    text-align: center;
    justify-content: center;
}

.ci-pr .ci-btn--secondary {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

.ci-pr .ci-btn--secondary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

.ci-pr__full-link {
    display: inline-block;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ci-color-brand-dark);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ci-radius-md);
    transition: background-color var(--ci-transition),
                color var(--ci-transition);
}

.ci-pr__full-link:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
}

.ci-pr__group-note {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ci-color-text-subtle);
}

.ci-pr__group-note a {
    color: var(--ci-color-brand-dark);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--ci-transition);
}

.ci-pr__group-note a:hover {
    color: var(--ci-color-brand);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .ci-pr__card,
    .ci-pr__toggle-indicator {
        transition: none;
    }
    .ci-pr__card:hover,
    .ci-pr__card.is-featured:hover {
        transform: none;
    }
}

/* =========================================================
   Ciralgo Pricing Compare (v1)
   Full feature-by-feature comparison table with tier headers,
   category rows, featured column highlight, and horizontal
   scroll on narrow viewports.
   ========================================================= */

.ci-pc {
    background-color: #ffffff;
    color: var(--ci-color-text);
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6.5rem);
}

.ci-pc__inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.ci-pc__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-pc h2.ci-pc__title,
.ci-pc .ci-pc__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-pc .ci-pc__sub {
    max-width: 640px;
    margin: 0 auto 2rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
    text-align: center !important;
}

/* --- Toggle (same visual as pricing toggle, isolated scope) --- */
.ci-pc__toggle {
    --ci-pc-tog-w: 140px;
    position: relative;
    display: inline-flex;
    padding: 4px;
    margin: 0 auto 2.5rem;
    background-color: var(--ci-color-bg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    box-shadow: var(--ci-shadow-sm);
}

section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn,
section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn:hover,
section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn:focus,
section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn:focus-visible,
section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn:active,
section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn.is-active {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn::before,
section.ci-pc .ci-pc__toggle .ci-pc__toggle-btn::after {
    content: none !important;
}

.ci-pc__toggle-btn {
    position: relative;
    z-index: 1;
    width: var(--ci-pc-tog-w);
    padding: 0.55rem 0;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 0.925rem;
    text-align: center;
    color: var(--ci-color-text-subtle);
    border-radius: 999px;
    cursor: pointer;
    transition: color var(--ci-transition);
}

.ci-pc__toggle-btn:hover { color: var(--ci-color-text); }
.ci-pc__toggle-btn.is-active { color: #ffffff !important; }
.ci-pc__toggle-btn:focus-visible {
    outline: 2px solid var(--ci-color-brand) !important;
    outline-offset: 3px;
}

.ci-pc__toggle-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    left: 4px;
    width: var(--ci-pc-tog-w);
    height: calc(100% - 8px);
    background-color: var(--ci-color-brand);
    border-radius: 999px;
    transition: transform var(--ci-transition);
}

.ci-pc__toggle[data-active-plan="business"] .ci-pc__toggle-indicator {
    transform: translateX(var(--ci-pc-tog-w));
}

/* --- Table wrapper handles horizontal scroll on small screens --- */
.ci-pc__group {
    text-align: left;
}

.ci-pc__group.is-hidden { display: none; }

.ci-pc__table-wrap {
    overflow-x: auto;
    border-radius: var(--ci-radius-xl);
    background-color: #ffffff;
    box-shadow: var(--ci-shadow-md);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.ci-pc__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-family: var(--ci-font-sans);
    font-size: 0.925rem;
    color: var(--ci-color-text);
}

/* Header row (tier names + prices) */
.ci-pc__table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
    background-color: var(--ci-color-bg);
    text-align: left;
    font-weight: 500;
    color: var(--ci-color-text-subtle);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    vertical-align: bottom;
}

.ci-pc__th-feature {
    width: 34%;
    background-color: #ffffff !important;
}

.ci-pc__th-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-color-text-subtle);
}

.ci-pc__table thead th.ci-pc__th-tier,
.ci-pc__th-tier {
    position: relative;
    text-align: center !important;
    padding-top: 1.25rem !important;
}

.ci-pc__th-tier.is-featured {
    background: linear-gradient(180deg,
        rgba(236, 253, 245, 0.9),
        rgba(236, 253, 245, 0.4)) !important;
    color: var(--ci-color-brand-dark);
    border-bottom-color: var(--ci-color-brand);
}

.ci-pc__tier-name {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ci-color-text);
    margin-bottom: 0.35rem;
}

.ci-pc__tier-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
}

.ci-pc__tier-amount {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ci-color-text);
    letter-spacing: -0.02em;
}

.ci-pc__tier-period {
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
}

.ci-pc__badge {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 999px;
    white-space: nowrap;
}

/* Non-featured tier headers get an empty spacer the same height as
   the badge, so all three tier headers align at the same baseline. */
.ci-pc__th-tier:not(.is-featured)::before {
    content: "";
    display: block;
    height: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Category divider rows */
.ci-pc__row-group td {
    padding: 1.4rem 1rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: transparent;
    border-bottom: 1px solid rgba(73, 134, 91, 0.15);
}

/* Feature rows */
.ci-pc__row th,
.ci-pc__row td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    text-align: left;
    font-weight: 400;
    color: var(--ci-color-text);
    vertical-align: middle;
}

.ci-pc__row td {
    text-align: center;
    color: var(--ci-color-text);
    font-variant-numeric: tabular-nums;
}

.ci-pc__row .ci-pc__cell-feature {
    font-weight: 500;
    color: var(--ci-color-text);
    text-align: left;
}

.ci-pc__row .ci-pc__cell.is-featured {
    background-color: rgba(236, 253, 245, 0.35);
    color: var(--ci-color-brand-dark);
    font-weight: 500;
}

.ci-pc__row:last-child th,
.ci-pc__row:last-child td {
    border-bottom: 0;
}

.ci-pc__row:hover td,
.ci-pc__row:hover th {
    background-color: rgba(248, 250, 252, 0.7);
}

/* Yes / no icons — round pill with SVG inside */
.ci-pc__yes,
.ci-pc__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.ci-pc__yes {
    color: #ffffff;
    background-color: var(--ci-color-brand);
    box-shadow: 0 1px 3px rgba(73, 134, 91, 0.35);
}

.ci-pc__no {
    color: rgba(15, 23, 42, 0.4);
    background-color: rgba(15, 23, 42, 0.06);
}

.ci-pc__yes svg,
.ci-pc__no svg {
    width: 15px;
    height: 15px;
}

/* =========================================================
   Ciralgo FAQ (v1)
   Native <details>/<summary> accordion with rotating chevron
   and soft borders. Zero JS.
   ========================================================= */

.ci-fq {
    background-color: var(--ci-color-bg);
    color: var(--ci-color-text);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.ci-fq__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.ci-fq__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-fq h2.ci-fq__title,
.ci-fq .ci-fq__title {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    text-align: center !important;
    display: block;
    float: none !important;
}

.ci-fq .ci-fq__sub {
    max-width: 620px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
    text-align: center !important;
}

.ci-fq__list {
    text-align: left;
    display: grid;
    gap: 0.75rem;
}

.ci-fq__item {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-fq__item[open] {
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}

/* Remove default marker (arrow triangle) across browsers */
.ci-fq__summary::-webkit-details-marker { display: none; }
.ci-fq__summary { list-style: none; }

.ci-fq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.0125rem;
    color: var(--ci-color-text);
    transition: background-color var(--ci-transition);
    outline: none;
}

.ci-fq__summary:hover {
    background-color: rgba(236, 253, 245, 0.5);
}

.ci-fq__summary:focus-visible {
    outline: 2px solid var(--ci-color-brand);
    outline-offset: -2px;
}

.ci-fq__q {
    flex: 1 1 auto;
    line-height: 1.4;
}

.ci-fq__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 50%;
    transition: transform var(--ci-transition), background-color var(--ci-transition);
}

.ci-fq__chevron svg {
    width: 16px;
    height: 16px;
}

.ci-fq__item[open] .ci-fq__chevron {
    transform: rotate(180deg);
    background-color: var(--ci-color-brand);
    color: #ffffff;
}

.ci-fq__body {
    padding: 0 1.25rem 1.25rem;
    color: var(--ci-color-text-subtle);
    font-size: 0.9625rem;
    line-height: 1.65;
}

.ci-fq__body p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ci-fq__item,
    .ci-fq__chevron,
    .ci-fq__summary {
        transition: none;
    }
}

/* =========================================================
   Ciralgo Final CTA (v1)
   Full-width dark green banner, echoes hero background.
   Centered headline + two buttons + friction-killer note.
   ========================================================= */

.ci-cta {
    position: relative;
    background-color: var(--ci-color-brand-deep);
    color: var(--ci-color-on-dark);
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
    background-image:
        radial-gradient(ellipse at top left,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.35) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 10px);
}

.ci-cta__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.ci-cta__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.ci-cta h2.ci-cta__title,
.ci-cta .ci-cta__title {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ci-color-on-dark) !important;
    text-align: center !important;
}

.ci-cta__sub {
    max-width: 620px;
    margin: 0 auto 1.75rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.ci-cta__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.ci-cta .ci-btn--primary {
    background-color: var(--ci-color-on-dark);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-on-dark);
}

.ci-cta .ci-btn--primary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-brand-light);
}

.ci-cta .ci-btn--ghost-on-dark {
    background-color: rgba(255, 255, 255, 0.06);
}

.ci-cta__note {
    display: inline-block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   Ciralgo One-Line Code (v1)
   Developer-focused section: value prop + code editor card
   with tab switcher (JS/Python/.env) and copy button.
   Premium aesthetic on white background.
   ========================================================= */

.ci-code {
    background-color: #ffffff;
    color: var(--ci-color-text);
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}

.ci-code__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (min-width: 960px) {
    .ci-code__inner {
        grid-template-columns: 1fr 1.2fr;
    }
}

/* --- Left: copy --- */
.ci-code__copy {
    text-align: left;
}

.ci-code__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-code h2.ci-code__title,
.ci-code .ci-code__title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    max-width: 520px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: left !important;
}

.ci-code__sub {
    max-width: 520px;
    margin: 0 0 1.5rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
}

.ci-code__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: 0.6rem;
    max-width: 520px;
}

.ci-code__benefits li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ci-color-text);
}

.ci-code__benefit-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--ci-color-brand-dark);
}

.ci-code__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ci-code .ci-btn--secondary {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

.ci-code .ci-btn--secondary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

/* --- Right: editor --- */
.ci-code__visual {
    position: relative;
}

.ci-code__editor {
    position: relative;
    background-color: #0f172a;
    color: #d1d5db;
    border-radius: var(--ci-radius-xl);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.25),
        0 2px 6px rgba(15, 23, 42, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* Head bar */
.ci-code__editor-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ci-code__dots {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.ci-code__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.ci-code__dot--red    { background: #ef4444; }
.ci-code__dot--yellow { background: #f59e0b; }
.ci-code__dot--green  { background: #22c55e; }

.ci-code__tabs {
    display: flex;
    gap: 0.25rem;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
}

/* Aggressive reset so Kadence's <button> styling can't paint
   the tabs blue. Same nuke pattern as the pricing toggle. */
.ci-code .ci-code__tab,
.ci-code .ci-code__tab:hover,
.ci-code .ci-code__tab:focus,
.ci-code .ci-code__tab:active {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

.ci-code__tab {
    padding: 0.3rem 0.8rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: var(--ci-radius-sm);
    cursor: pointer;
    transition: color var(--ci-transition), background-color var(--ci-transition);
}

.ci-code__tab:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.ci-code__tab.is-active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.ci-code__tab:focus-visible {
    outline: 2px solid var(--ci-color-brand) !important;
    outline-offset: 2px;
}

.ci-code .ci-code__copy-btn,
.ci-code .ci-code__copy-btn:hover,
.ci-code .ci-code__copy-btn:focus,
.ci-code .ci-code__copy-btn:active {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none !important;
}

.ci-code__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: var(--ci-radius-sm);
    cursor: pointer;
    transition: color var(--ci-transition), background-color var(--ci-transition);
}

.ci-code__copy-btn:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.ci-code__copy-btn.is-copied {
    color: #4ade80 !important;
}

.ci-code__copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Code body */
.ci-code__body {
    position: relative;
    padding: 1.5rem 1.25rem;
    overflow-x: auto;
}

.ci-code__pane {
    display: none;
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    line-height: 1.8;
    white-space: pre;
    overflow: visible;
}

.ci-code__pane.is-active {
    display: block;
}

.ci-code__gutter {
    display: inline-block;
    width: 2ch;
    margin-right: 1.25rem;
    color: rgba(255, 255, 255, 0.25);
    user-select: none;
    text-align: right;
}

.ci-code__line {
    font-family: inherit;
}

/* Syntax colours (VSCode Dark+ inspired) */
.ci-code__k   { color: #c586c0; }              /* keyword: const, new */
.ci-code__t   { color: #4ec9b0; }              /* type/class: OpenAI */
.ci-code__var { color: #9cdcfe; }              /* variable identifier */
.ci-code__pr  { color: #9cdcfe; }              /* property name */
.ci-code__s   { color: #ce9178; }              /* string */
.ci-code__pn  { color: #d4d4d4; }              /* punctuation */

/* Blinking caret at end of line */
.ci-code__caret {
    display: inline-block;
    width: 8px;
    height: 1.2em;
    margin-left: 4px;
    vertical-align: middle;
    background-color: #4ade80;
    border-radius: 1px;
    animation: ci-code-blink 1.1s steps(2, start) infinite;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

@keyframes ci-code-blink {
    to { visibility: hidden; }
}

/* Footer strip */
.ci-code__footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    background-color: #0b1220;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.7625rem;
    color: rgba(255, 255, 255, 0.5);
}

.ci-code__footer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
    animation: ci-code-pulse 2s ease-out infinite;
}

@keyframes ci-code-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.ci-code__footer-text {
    font-family: var(--ci-font-sans);
    font-weight: 500;
}

/* Soft green glow behind the editor for premium feel */
.ci-code__visual::before {
    content: "";
    position: absolute;
    inset: -10% -5%;
    background: radial-gradient(ellipse at center,
        rgba(73, 134, 91, 0.18) 0%,
        rgba(73, 134, 91, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.ci-code__editor {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ci-code__caret,
    .ci-code__footer-dot {
        animation: none !important;
    }
}

/* =========================================================
   Ciralgo Docs (v1)
   Shared visual language for the /docs page shortcodes:
   .ci-doc-hero (page header)
   .ci-doc      (individual section wrapper, with modifiers)
   All section-specific classes are namespaced under .ci-doc.
   ========================================================= */

/* --- Page header + anchor nav --- */
.ci-doc-hero {
    background-color: var(--ci-color-brand-deep);
    color: var(--ci-color-on-dark);
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
    text-align: center;
}

.ci-doc-hero__inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center !important;
}

/* Force the eyebrow pill to center regardless of parent text-align. */
.ci-doc-hero__eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 0.4rem !important;
    padding: 0.3rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.ci-doc-hero .ci-doc-hero__title,
.ci-doc-hero h1.ci-doc-hero__title {
    display: block;
    margin: 0 auto 1rem !important;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #ffffff !important;
    text-align: center !important;
}

.ci-doc-hero__sub {
    max-width: 640px;
    margin: 0 auto 2rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.ci-doc-hero__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    max-width: 720px;
    margin: 0 auto;
}

.ci-doc-hero__nav a {
    padding: 0.4rem 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ci-transition),
                border-color var(--ci-transition),
                color var(--ci-transition);
}

.ci-doc-hero__nav a:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* --- Section wrapper --- */
.ci-doc {
    background-color: #ffffff;
    color: var(--ci-color-text);
    padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    scroll-margin-top: 90px; /* anchor offset for sticky headers */
}

.ci-doc.ci-doc--pale { background-color: var(--ci-color-bg); }
.ci-doc.ci-doc--dark {
    background-color: var(--ci-color-brand-deep);
    color: var(--ci-color-on-dark);
    background-image:
        radial-gradient(ellipse at top left,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 55%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}

.ci-doc__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.ci-doc__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}

.ci-doc__eyebrow--on-dark {
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.ci-doc h2.ci-doc__title,
.ci-doc .ci-doc__title {
    margin: 0 0 0.75rem;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.6vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ci-color-text) !important;
    text-align: left !important;
    display: block;
}

.ci-doc__title--on-dark { color: #ffffff !important; }

.ci-doc__sub {
    max-width: 720px;
    margin: 0 0 2rem;
    font-size: clamp(1rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
}

.ci-doc__sub--on-dark { color: rgba(255, 255, 255, 0.85); }

.ci-doc .ci-doc__note,
.ci-doc__note {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: 0.85rem 1.05rem;
    background-color: var(--ci-color-bg);
    border-left: 3px solid var(--ci-color-brand);
    border-radius: var(--ci-radius-md);
    font-size: 0.925rem;
    color: var(--ci-color-text);
}
.ci-doc__note a { color: var(--ci-color-brand-dark); font-weight: 500; }

/* Quote-style pull-out */
.ci-doc__quote {
    margin: 0 0 1.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--ci-color-brand-light);
    border-left: 4px solid var(--ci-color-brand);
    border-radius: var(--ci-radius-md);
    font-family: var(--ci-font-sans);
    font-style: italic;
    font-size: 1.0125rem;
    color: var(--ci-color-brand-dark);
    line-height: 1.55;
}
.ci-doc__quote code {
    font-style: normal;
    padding: 0.05rem 0.35rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    font-size: 0.9em;
}

/* Highlight callout */
.ci-doc__callout {
    margin-top: 1.5rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg,
        rgba(236, 253, 245, 0.8),
        rgba(236, 253, 245, 0.4));
    border: 1px solid rgba(73, 134, 91, 0.25);
    border-radius: var(--ci-radius-lg);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ci-color-text);
}
.ci-doc__callout code {
    padding: 0.05rem 0.35rem;
    background: #ffffff;
    border-radius: 4px;
    font-size: 0.9em;
}
.ci-doc__callout--strong {
    background: linear-gradient(135deg,
        rgba(73, 134, 91, 0.14),
        rgba(73, 134, 91, 0.06));
    border-color: rgba(73, 134, 91, 0.45);
}

/* Inline code style */
.ci-doc code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.05rem 0.4rem;
    background-color: rgba(15, 23, 42, 0.05);
    border-radius: 4px;
    color: var(--ci-color-brand-dark);
}
.ci-doc--dark code {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--ci-color-brand-light);
}

/* Code block */
.ci-doc__code-block {
    margin: 0 0 1.5rem;
    padding: 1.15rem 1.25rem;
    background-color: #0f172a;
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    overflow-x: auto;
}
.ci-doc__code-block pre {
    margin: 0;
    color: #d1d5db;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre;
    background: transparent;
}
.ci-doc__code-block code { background: none; padding: 0; color: inherit; }

/* Premium variant with terminal-style chrome + refined palette */
.ci-doc__code-block--premium {
    margin: 0.5rem 0 1.75rem;
    padding: 0;
    background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    overflow: hidden;
}
.ci-doc__code-block--premium .ci-doc__code-block__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.ci-doc__code-block--premium .ci-doc__code-block__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(148, 163, 184, 0.25);
    flex: 0 0 auto;
}
.ci-doc__code-block--premium .ci-doc__code-block__dot:nth-child(1) { background-color: rgba(248, 113, 113, 0.55); }
.ci-doc__code-block--premium .ci-doc__code-block__dot:nth-child(2) { background-color: rgba(251, 191, 36, 0.55); }
.ci-doc__code-block--premium .ci-doc__code-block__dot:nth-child(3) { background-color: rgba(134, 239, 172, 0.55); }
.ci-doc__code-block--premium .ci-doc__code-block__label {
    margin-left: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}
.ci-doc__code-block--premium pre {
    margin: 0;
    padding: 1.1rem 1.25rem;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.925rem;
    line-height: 1.65;
}
/* Refined syntax palette (scoped so we do not touch the animated hero code) */
.ci-doc__code-block--premium .ci-code__pr {
    color: #86efac;
    font-weight: 600;
    letter-spacing: 0.005em;
}
.ci-doc__code-block--premium .ci-code__pn { color: rgba(148, 163, 184, 0.75); }
.ci-doc__code-block--premium .ci-code__s  { color: #e2e8f0; }

/* Extra breathing room on the quickstart's re-used code editor */
.ci-doc__editor { margin-bottom: 1.5rem; }

/* --- Grid + cards --- */
.ci-doc__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
@media (min-width: 720px) {
    .ci-doc__grid--2 { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .ci-doc__grid--3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.ci-doc__card {
    padding: 1.35rem 1.35rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-doc__card:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}
.ci-doc--pale .ci-doc__card { background-color: #ffffff; }
.ci-doc__card h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ci-color-text);
}
.ci-doc__card p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

.ci-doc__card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 50%;
}

.ci-doc__card--check {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.ci-doc__card-check {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 5px;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(73, 134, 91, 0.35);
}

/* --- Feature lists --- */
.ci-doc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}
.ci-doc__list li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--ci-color-text);
}
.ci-doc__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background-color: var(--ci-color-brand);
    border-radius: 50%;
}

/* --- Tables (shared for AI Act + Compare) --- */
.ci-doc__table-wrap {
    overflow-x: auto;
    border-radius: var(--ci-radius-xl);
    background-color: #ffffff;
    box-shadow: var(--ci-shadow-md);
    border: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: 0.5rem;
}
.ci-doc__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-family: var(--ci-font-sans);
    font-size: 0.925rem;
    color: var(--ci-color-text);
}
.ci-doc__table thead th {
    padding: 0.95rem 1rem;
    background-color: var(--ci-color-bg);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-color-text-subtle);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.ci-doc__table tbody td,
.ci-doc__table tbody th {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    text-align: left;
    font-weight: 400;
    vertical-align: top;
}
.ci-doc__table tbody tr:last-child td,
.ci-doc__table tbody tr:last-child th { border-bottom: 0; }
.ci-doc__table tbody tr:hover td,
.ci-doc__table tbody tr:hover th { background-color: rgba(248, 250, 252, 0.7); }

.ci-doc__table-article {
    font-weight: 600;
    color: var(--ci-color-brand-dark);
    white-space: nowrap;
    width: 110px;
}
.ci-doc__table-title { font-weight: 500; color: var(--ci-color-text); }
.ci-doc__table-answer { color: var(--ci-color-text-subtle); line-height: 1.6; }

/* Compare table variants */
.ci-doc__table--cmp thead th { text-align: center; }
.ci-doc__table--cmp .ci-doc__cmp-feature { text-align: left; width: 40%; }
.ci-doc__table--cmp thead .ci-doc__cmp-tool.is-us {
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light) !important;
}
.ci-doc__table--cmp tbody td { text-align: center; }
.ci-doc__table--cmp tbody td.is-us { background-color: rgba(236, 253, 245, 0.4); }

.ci-doc__cmp-yes,
.ci-doc__cmp-no,
.ci-doc__cmp-partial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
}
.ci-doc__cmp-yes {
    color: #ffffff;
    background-color: var(--ci-color-brand);
    box-shadow: 0 1px 3px rgba(73, 134, 91, 0.35);
}
.ci-doc__cmp-yes svg { width: 15px; height: 15px; }
.ci-doc__cmp-no {
    color: rgba(15, 23, 42, 0.4);
    background-color: rgba(15, 23, 42, 0.06);
}
.ci-doc__cmp-no svg { width: 14px; height: 14px; }
.ci-doc__cmp-partial {
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* CTA row */
.ci-doc__cta-row {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ci-doc .ci-btn--secondary {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}
.ci-doc .ci-btn--secondary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
}

/* --- "Go deeper" dark grid --- */
.ci-doc__grid--dark .ci-doc__deeper-card {
    display: block;
    padding: 1.5rem 1.35rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ci-radius-lg);
    color: #ffffff;
    text-decoration: none;
    transition: transform var(--ci-transition),
                background-color var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-doc__grid--dark .ci-doc__deeper-card:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}
.ci-doc__deeper-card h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff;
}
.ci-doc__deeper-card p {
    margin: 0 0 1rem;
    font-size: 0.925rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}
.ci-doc__deeper-cta {
    display: inline-block;
    font-family: var(--ci-font-sans);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ci-color-brand-light);
}

@media (prefers-reduced-motion: reduce) {
    .ci-doc__card,
    .ci-doc__deeper-card {
        transition: none;
    }
}

/* Subtitle used between roadmap and article table */
.ci-doc__subtitle {
    margin: 3rem 0 1rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
}

/* =========================================================
   Ciralgo Horizontal Roadmap (v1)
   Used inside the AI Act docs section. 5 milestones on a
   horizontal dotted track, "TODAY" marker, cards below.
   Collapses to a vertical stack on narrow screens.
   ========================================================= */

.ci-hroad {
    margin: 1rem 0 2rem;
}

.ci-hroad__legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
}

.ci-hroad__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ci-hroad__legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.ci-hroad__legend-dot.is-past     { background-color: var(--ci-color-brand); }
.ci-hroad__legend-dot.is-imminent { background-color: var(--ci-color-brand); box-shadow: 0 0 0 3px rgba(73, 134, 91, 0.25); }
.ci-hroad__legend-dot.is-future   { background-color: #ffffff; border: 2px dashed rgba(73, 134, 91, 0.6); }

/* --- Track (line + dots + Today marker) --- */
.ci-hroad__track-wrap {
    position: relative;
    padding: 2.5rem 1rem 1rem;
}

.ci-hroad__track {
    position: absolute;
    left: calc(10% + 1rem);
    right: calc(10% + 1rem);
    top: calc(2.5rem + 10px); /* half of dot (20px) */
    height: 3px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(73, 134, 91, 0.55) 0 4px,
        transparent 4px 12px
    );
    z-index: 0;
}

.ci-hroad__stops {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* minmax(0, 1fr) forces truly equal columns; plain 1fr would
       let columns widen to fit the longest date/word inside. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
}

.ci-hroad__stop {
    text-align: center;
}

.ci-hroad__dot {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 0.75rem;
    background-color: #ffffff;
    border: 3px solid rgba(73, 134, 91, 0.55);
    border-radius: 50%;
    box-sizing: border-box;
}

.ci-hroad__stop.is-past .ci-hroad__dot {
    background-color: var(--ci-color-brand);
    border-color: var(--ci-color-brand);
}

.ci-hroad__stop.is-imminent .ci-hroad__dot {
    width: 26px;
    height: 26px;
    margin-top: -3px;
    background-color: var(--ci-color-brand);
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 6px rgba(73, 134, 91, 0.2);
    animation: ci-hroad-pulse 2s ease-out infinite;
}

.ci-hroad__stop.is-future .ci-hroad__dot {
    background-color: #ffffff;
    border: 3px dashed rgba(73, 134, 91, 0.6);
}

@keyframes ci-hroad-pulse {
    0%   { box-shadow: 0 0 0 6px rgba(73, 134, 91, 0.25); }
    70%  { box-shadow: 0 0 0 16px rgba(73, 134, 91, 0); }
    100% { box-shadow: 0 0 0 6px rgba(73, 134, 91, 0); }
}

.ci-hroad__date {
    display: inline-block;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ci-color-text-subtle);
    text-transform: uppercase;
}

.ci-hroad__stop.is-imminent .ci-hroad__date {
    color: var(--ci-color-brand-dark);
    font-weight: 700;
}

/* --- Today marker (absolute, positioned by inline style="left: X%") --- */
.ci-hroad__here {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.ci-hroad__here-label {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background-color: #0f172a;
    color: #ffffff;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
    white-space: nowrap;
}

.ci-hroad__here-arrow {
    display: block;
    width: 2px;
    height: 32px;
    margin-top: 4px;
    background-color: #0f172a;
    border-radius: 2px;
}

/* --- Cards row --- */
.ci-hroad__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 900px) {
    .ci-hroad__cards {
        /* minmax(0, 1fr) forces equal-width columns even when a card's
           content (e.g. a longer title) would otherwise widen its track. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.9rem;
        align-items: stretch;
    }
}

/* Belt-and-braces: prevent long unbreakable content from ever forcing
   a card's intrinsic width above its grid track share. */
.ci-hroad__card {
    min-width: 0;
}
.ci-hroad__card-title,
.ci-hroad__card-body {
    overflow-wrap: anywhere;
}

.ci-hroad__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%; /* stretch to tallest sibling in the grid row */
    padding: 1.1rem 1rem 1.25rem;
    background-color: #ffffff;
    /* All cards use the same 2px border so height + width match exactly. */
    border: 2px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}

.ci-hroad__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ci-shadow-md);
    border-color: rgba(73, 134, 91, 0.35);
}

.ci-hroad__card.is-past {
    background-color: rgba(236, 253, 245, 0.4);
    border-color: rgba(73, 134, 91, 0.22);
}

.ci-hroad__card.is-imminent {
    border-color: var(--ci-color-brand);
    background: linear-gradient(135deg,
        rgba(236, 253, 245, 0.9),
        rgba(255, 255, 255, 1));
    box-shadow:
        0 12px 32px rgba(73, 134, 91, 0.22),
        0 0 0 3px rgba(73, 134, 91, 0.08);
}

.ci-hroad__card.is-future {
    background-color: #ffffff;
    border-style: dashed;
    border-color: rgba(73, 134, 91, 0.4);
}

.ci-hroad__card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    /* Ensure the head can shrink to card width so children respect it. */
    min-width: 0;
    width: 100%;
}

.ci-hroad__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.18rem 0.5rem;
    font-family: var(--ci-font-sans);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-hroad__badge.is-past {
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
}

.ci-hroad__badge.is-past svg {
    width: 12px;
    height: 12px;
}

.ci-hroad__badge.is-imminent {
    color: #ffffff;
    background-color: var(--ci-color-brand);
}

.ci-hroad__badge-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: ci-hroad-badge-pulse 1.6s ease-out infinite;
}

@keyframes ci-hroad-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.ci-hroad__badge.is-future {
    color: var(--ci-color-text-subtle);
    background-color: transparent;
    border: 1px dashed rgba(15, 23, 42, 0.25);
}

.ci-hroad__card-date {
    font-size: 0.7rem;
    color: var(--ci-color-text-subtle);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

.ci-hroad__card-title {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--ci-color-text);
}

.ci-hroad__card.is-imminent .ci-hroad__card-title {
    color: var(--ci-color-brand-dark);
}

.ci-hroad__card-body {
    margin: 0;
    font-size: 0.825rem;
    line-height: 1.5;
    color: var(--ci-color-text-subtle);
}

/* --- Mobile collapse --- */
@media (max-width: 899px) {
    /* Hide the horizontal track visualisation; cards stack. */
    .ci-hroad__track-wrap {
        display: none;
    }
    .ci-hroad__card-title { font-size: 1rem; }
    .ci-hroad__card-body  { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-hroad__stop.is-imminent .ci-hroad__dot,
    .ci-hroad__badge-pulse {
        animation: none !important;
    }
    .ci-hroad__card { transition: none; }
    .ci-hroad__card:hover { transform: none; }
}

/* =========================================================
   Ciralgo Insights (v1)
   /insights landing page + single article template.
   Prefix .ci-in for landing shortcodes, .ci-article for
   individual article pages.
   ========================================================= */

/* --- Reading progress bar (used on single.php) --- */
.ci-reading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--ci-color-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(73, 134, 91, 0.4);
    will-change: transform;
}

/* --- Insights hero --- */
.ci-in-hero {
    background-color: var(--ci-color-brand-deep);
    color: var(--ci-color-on-dark);
    padding: clamp(2rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-in-hero__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center !important;
}
.ci-in-hero__eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 0.5rem !important;
    padding: 0.3rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-in-hero .ci-in-hero__title,
.ci-in-hero h1.ci-in-hero__title {
    margin: 0 auto 0.85rem !important;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-in-hero__sub {
    max-width: 620px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Paths ("Where would you like to start?") --- */
.ci-in-paths {
    background-color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-in-paths__inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.ci-in-paths__eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-in-paths h2.ci-in-paths__title,
.ci-in-paths .ci-in-paths__title {
    margin: 0 auto 0.6rem !important;
    max-width: 720px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-in-paths__sub {
    max-width: 560px;
    margin: 0 auto 2.5rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

.ci-in-paths__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 720px)  { .ci-in-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1080px) { .ci-in-paths__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.ci-in-paths__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.4rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    color: var(--ci-color-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-in-paths__card::after {
    /* Corner brand-green accent that grows on hover — signals "you'll be
       taken somewhere". Subtle in idle state. */
    content: "";
    position: absolute;
    inset: auto -30% -30% auto;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle at center,
        rgba(73, 134, 91, 0.15) 0%,
        rgba(73, 134, 91, 0) 70%);
    transition: transform 400ms ease, opacity var(--ci-transition);
    opacity: 0.7;
    pointer-events: none;
}
.ci-in-paths__card:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}
.ci-in-paths__card:hover::after {
    transform: scale(1.35);
    opacity: 1;
}

.ci-in-paths__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
    position: relative;
    z-index: 1;
}
.ci-in-paths__icon svg { width: 24px; height: 24px; }

/* Subtle accent variants per path */
.ci-in-paths__card--a .ci-in-paths__icon { color: #237548; }
.ci-in-paths__card--b .ci-in-paths__icon { color: #4a875c; }
.ci-in-paths__card--c .ci-in-paths__icon { color: #2c6a44; }
.ci-in-paths__card--d .ci-in-paths__icon { color: #3d7450; }

.ci-in-paths__label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    position: relative;
    z-index: 1;
}
.ci-in-paths__card-title {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    position: relative;
    z-index: 1;
}
.ci-in-paths__card-body {
    margin: 0 0 1rem;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}
.ci-in-paths__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    position: relative;
    z-index: 1;
}
.ci-in-paths__count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ci-color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ci-in-paths__cta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ci-color-brand-dark);
    letter-spacing: 0.01em;
    transition: gap var(--ci-transition);
}
.ci-in-paths__card:hover .ci-in-paths__cta { color: var(--ci-color-brand); }

/* --- Editor's pick (magazine-cover style) --- */
.ci-in-editor {
    background-color: var(--ci-color-bg);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-in-editor__inner {
    max-width: 1180px;
    margin: 0 auto;
}
.ci-in-editor__header {
    text-align: center;
    margin-bottom: 2rem;
}
.ci-in-editor__eyebrow {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.65rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #0f172a;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}
.ci-in-editor h2.ci-in-editor__kicker,
.ci-in-editor .ci-in-editor__kicker {
    margin: 0 !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}

.ci-in-editor__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background-color: #ffffff;
    border-radius: var(--ci-radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    text-decoration: none;
    color: var(--ci-color-text);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition);
}
.ci-in-editor__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.18);
}
@media (min-width: 900px) {
    .ci-in-editor__card {
        grid-template-columns: 1.15fr 1fr;
    }
}

.ci-in-editor__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--ci-color-brand-deep);
    overflow: hidden;
}
@media (min-width: 900px) {
    .ci-in-editor__media { aspect-ratio: auto; min-height: 100%; }
}
.ci-in-editor__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.ci-in-editor__card:hover .ci-in-editor__media img {
    transform: scale(1.04);
}
.ci-in-editor__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0) 40%,
        rgba(15, 23, 42, 0.35) 100%);
    pointer-events: none;
}
.ci-in-editor__stamp {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 40px;
    height: 40px;
    padding: 8px;
    color: #0f172a;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border-radius: var(--ci-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ci-in-editor__stamp svg { width: 100%; height: 100%; }

.ci-in-editor__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.ci-in-editor__cat {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-in-editor h3.ci-in-editor__title,
.ci-in-editor .ci-in-editor__title {
    margin: 0 !important;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text) !important;
    text-align: left !important;
}
.ci-in-editor__card:hover .ci-in-editor__title { color: var(--ci-color-brand-dark); }
.ci-in-editor__excerpt {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
}
.ci-in-editor__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.ci-in-editor__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.ci-in-editor__author {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ci-color-text);
    line-height: 1.3;
}
.ci-in-editor__meta-sub {
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
}
.ci-in-editor__cta {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    color: var(--ci-color-brand-dark);
}

/* --- Grid section --- */
.ci-in-grid {
    background-color: #ffffff;
    padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.ci-in-grid__inner {
    max-width: 1180px;
    margin: 0 auto;
}
.ci-in-grid__header {
    text-align: center;
    margin-bottom: 2rem;
}
.ci-in-grid__kicker {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.5rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-in-grid h2.ci-in-grid__title,
.ci-in-grid .ci-in-grid__title {
    margin: 0 !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-in-grid--empty { text-align: center; color: var(--ci-color-text-subtle); }

/* --- Featured card (horizontal) --- */
.ci-in-feat {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.15rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    box-shadow: var(--ci-shadow-md);
    text-decoration: none;
    color: var(--ci-color-text);
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-in-feat:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
    border-color: rgba(73, 134, 91, 0.4);
}
@media (min-width: 820px) {
    .ci-in-feat {
        grid-template-columns: 1.15fr 1fr;
        gap: 2rem;
        padding: 1.5rem;
        align-items: center;
    }
}

.ci-in-feat__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
    background-color: var(--ci-color-bg);
}
.ci-in-feat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.ci-in-feat:hover .ci-in-feat__media img {
    transform: scale(1.04);
}

.ci-in-feat__pin {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.ci-in-feat__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem 0.75rem;
}
.ci-in-feat__title {
    margin: 0;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text);
}
.ci-in-feat:hover .ci-in-feat__title { color: var(--ci-color-brand-dark); }

.ci-in-feat__excerpt {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
}

.ci-in-feat__cta {
    display: inline-block;
    margin-top: 0.25rem;
    font-weight: 600;
    color: var(--ci-color-brand-dark);
    letter-spacing: 0.01em;
}

/* --- Card grid --- */
.ci-in-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 640px)  { .ci-in-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ci-in-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ci-in-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ci-color-text);
    transition: transform var(--ci-transition);
}
.ci-in-card:hover { transform: translateY(-3px); }

.ci-in-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
    background-color: var(--ci-color-bg);
    margin-bottom: 1rem;
    box-shadow: var(--ci-shadow-sm);
}
.ci-in-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.ci-in-card:hover .ci-in-card__media img { transform: scale(1.04); }

.ci-in-card__media-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(73, 134, 91, 0.35);
    background: linear-gradient(135deg,
        var(--ci-color-brand-light) 0%,
        rgba(236, 253, 245, 0.5) 100%);
}
.ci-in-card__media-fallback svg { width: 44px; height: 44px; }

.ci-in-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ci-in-card__cat {
    display: inline-block;
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
    margin-bottom: 0.15rem;
}

.ci-in-card__title {
    margin: 0;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    transition: color var(--ci-transition);
}
.ci-in-card:hover .ci-in-card__title { color: var(--ci-color-brand-dark); }

.ci-in-card__excerpt {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

.ci-in-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
}
.ci-in-card__dot { opacity: 0.6; }
.ci-in-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 0.15rem;
}

/* Featured card has a slightly larger avatar */
.ci-in-feat .ci-in-card__meta { font-size: 0.875rem; }
.ci-in-feat .ci-in-card__avatar { width: 32px; height: 32px; }

/* --- Newsletter --- */
.ci-in-nl {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    /* Decorative overlays sit on top of the solid brand-deep base. */
    background-image:
        radial-gradient(ellipse at top left,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.5) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-in-nl__inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.ci-in-nl__eyebrow {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-in-nl h2.ci-in-nl__title,
.ci-in-nl .ci-in-nl__title {
    margin: 0 0 0.75rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-in-nl__sub {
    margin: 0 auto 1.5rem;
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}
.ci-in-nl__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
}
.ci-in-nl__input {
    flex: 1 1 220px;
    padding: 0.75rem 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    outline: none;
    transition: border-color var(--ci-transition), background-color var(--ci-transition);
}
.ci-in-nl__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.ci-in-nl__input:focus {
    border-color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.12);
}

.ci-in-nl .ci-in-nl__btn,
.ci-in-nl button.ci-in-nl__btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0.75rem 1.5rem !important;
    font-family: var(--ci-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: var(--ci-color-brand-deep) !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
    cursor: pointer;
    transition: background-color var(--ci-transition), transform var(--ci-transition) !important;
}
.ci-in-nl .ci-in-nl__btn:hover {
    background-color: var(--ci-color-brand-light) !important;
    transform: translateY(-1px);
}

.ci-in-nl__foot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}
.ci-in-nl__foot svg { width: 14px; height: 14px; }

/* =========================================================
   Individual article template (single.php)
   ========================================================= */

.ci-article {
    background-color: #ffffff;
    color: var(--ci-color-text);
}

/* --- Article hero band --- */
.ci-article__hero {
    background-color: var(--ci-color-brand-deep);
    color: var(--ci-color-on-dark);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-article__hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.ci-article__crumbs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.ci-article__back,
.ci-article__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 30px;
    padding: 0 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color var(--ci-transition), color var(--ci-transition);
}
.ci-article__back { color: rgba(255, 255, 255, 0.85); }
.ci-article__back:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.16); }
.ci-article__back svg { width: 14px; height: 14px; }

.ci-article__cat {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
}
.ci-article__cat:hover { background-color: rgba(255, 255, 255, 0.16); }

.ci-article h1.ci-article__title,
.ci-article .ci-article__title {
    margin: 0 auto 1.5rem !important;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.8vw, 3.15rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: center !important;
}

.ci-article__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
}
.ci-article__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.ci-article__meta-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}
.ci-article__author {
    font-family: var(--ci-font-sans);
    font-weight: 600;
    color: #ffffff;
    font-size: 0.95rem;
}
.ci-article__meta-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Full-bleed cover image --- */
.ci-article__cover-wrap {
    background-color: #ffffff;
    padding: 0 clamp(1rem, 4vw, 3rem);
    margin-top: -2rem;
    position: relative;
    z-index: 2;
}
.ci-article__cover {
    max-width: 1080px;
    margin: 0 auto;
    aspect-ratio: 21 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--ci-radius-xl);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

/* --- Article body layout --- */
.ci-article__body-wrap {
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-article__body-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1080px) {
    .ci-article__body-inner {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 4rem;
    }
}

/* --- TOC --- */
.ci-article__toc {
    display: none;
}
@media (min-width: 1080px) {
    .ci-article__toc {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: start;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}
.ci-article__toc-title {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-text-subtle);
}
.ci-article__toc-list {
    list-style: none;
    padding: 0 0 0 0.75rem;
    margin: 0;
    border-left: 2px solid rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ci-article__toc-list a {
    display: block;
    padding: 0.15rem 0;
    font-family: var(--ci-font-sans);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ci-color-text-subtle);
    text-decoration: none;
    transition: color var(--ci-transition);
}
.ci-article__toc-list a:hover,
.ci-article__toc-list a.is-active {
    color: var(--ci-color-brand-dark);
    font-weight: 500;
}

/* --- Article body typography --- */
.ci-article__body {
    max-width: 720px;
    font-family: var(--ci-font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ci-color-text);
}
.ci-article__body > * + * { margin-top: 1.15rem; }
.ci-article__body h2 {
    margin-top: 2.5rem !important;
    margin-bottom: 0.75rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    scroll-margin-top: 6rem;
}
.ci-article__body h3 {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--ci-color-text) !important;
    scroll-margin-top: 6rem;
}
.ci-article__body p { margin: 0 0 1.15rem; }
.ci-article__body a {
    color: var(--ci-color-brand-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.ci-article__body a:hover { color: var(--ci-color-brand); }
.ci-article__body strong { font-weight: 700; color: var(--ci-color-text); }
.ci-article__body em { font-style: italic; }
.ci-article__body ul,
.ci-article__body ol {
    margin: 0 0 1.15rem;
    padding-left: 1.4rem;
}
.ci-article__body li { margin: 0 0 0.4rem; }
.ci-article__body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--ci-color-brand);
    background-color: var(--ci-color-brand-light);
    border-radius: 0 var(--ci-radius-lg) var(--ci-radius-lg) 0;
    font-style: italic;
    color: var(--ci-color-brand-dark);
}
.ci-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-md);
    margin: 1.5rem 0;
}
.ci-article__body pre {
    background-color: #0f172a;
    color: #d1d5db;
    padding: 1.15rem 1.25rem;
    border-radius: var(--ci-radius-lg);
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.925rem;
    line-height: 1.6;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    margin: 1.5rem 0;
}
.ci-article__body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1rem 0.4rem;
    background-color: rgba(15, 23, 42, 0.05);
    border-radius: 4px;
    color: var(--ci-color-brand-dark);
}
.ci-article__body pre code { background: none; padding: 0; color: inherit; }
.ci-article__body hr {
    margin: 2rem 0;
    border: 0;
    height: 1px;
    background-color: rgba(15, 23, 42, 0.08);
}

/* --- Author bio card at the end of the article --- */
.ci-article__author-card {
    max-width: 520px;
    margin: 3rem auto 0;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.ci-article__author-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 1.5rem 1.25rem;
    background: linear-gradient(135deg,
        var(--ci-color-brand-light) 0%,
        rgba(236, 253, 245, 0.4) 100%);
    border: 1px solid rgba(73, 134, 91, 0.2);
    border-radius: var(--ci-radius-xl);
    box-shadow: var(--ci-shadow-sm);
}
.ci-article__author-avatar {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}
.ci-article__author-body {
    flex: 1 1 auto;
    min-width: 0;
}
.ci-article__author-kicker {
    display: block;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    margin-bottom: 0.15rem;
}
.ci-article__author-name {
    display: inline-block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ci-color-text);
    text-decoration: none;
    margin-bottom: 0.4rem;
    transition: color var(--ci-transition);
}
.ci-article__author-name:hover { color: var(--ci-color-brand-dark); }
.ci-article__author-bio {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ci-color-text);
}
.ci-article__author-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ci-article__author-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ci-color-brand-dark);
    background-color: #ffffff;
    border: 1px solid rgba(73, 134, 91, 0.3);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ci-transition),
                color var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-article__author-links a:hover {
    background-color: var(--ci-color-brand);
    color: #ffffff;
    border-color: var(--ci-color-brand);
}
.ci-article__author-links svg {
    width: 14px;
    height: 14px;
}

/* On very narrow screens the avatar stacks above the text. */
@media (max-width: 480px) {
    .ci-article__author-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ci-article__author-links { justify-content: center; }
}

/* --- Newsletter placement within article --- */
.ci-article__nl { margin-top: 2rem; }

/* --- Related insights --- */
.ci-article__related {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-article__related-inner {
    max-width: 1180px;
    margin: 0 auto;
}
.ci-article__related h2.ci-article__related-title,
.ci-article__related .ci-article__related-title {
    margin: 0 0 2rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-in-cards--related { align-items: start; }

@media (prefers-reduced-motion: reduce) {
    .ci-in-feat,
    .ci-in-card,
    .ci-in-feat__media img,
    .ci-in-card__media img { transition: none !important; }
    .ci-in-feat:hover,
    .ci-in-card:hover { transform: none !important; }
    .ci-in-feat:hover .ci-in-feat__media img,
    .ci-in-card:hover .ci-in-card__media img { transform: none !important; }
    .ci-reading-bar { transition: none; }
}

/* =========================================================
   Category archive page (category.php)
   Premium editorial layout with hero + featured + related
   ========================================================= */

.ci-cat-hero {
    position: relative;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
    background-color: var(--ci-color-brand-deep);
    color: var(--ci-color-on-dark);
    text-align: center;
    background-image:
        radial-gradient(ellipse at top left,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.45) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
    overflow: hidden;
}

/* Subtle accent glow per category (all same brand-green base,
   just differently placed so each category has a distinct feel). */
.ci-cat-hero--accent-a::after,
.ci-cat-hero--accent-b::after,
.ci-cat-hero--accent-c::after,
.ci-cat-hero--accent-d::after {
    content: "";
    position: absolute;
    inset: -20% -30% auto auto;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center,
        rgba(73, 134, 91, 0.35) 0%,
        rgba(73, 134, 91, 0) 60%);
    pointer-events: none;
    z-index: 0;
}
.ci-cat-hero--accent-a::after { inset: -20% auto auto -30%; }
.ci-cat-hero--accent-b::after { inset: auto auto -30% -30%; }
.ci-cat-hero--accent-c::after { inset: -20% -30% auto auto; }
.ci-cat-hero--accent-d::after { inset: auto -30% -30% auto; }

.ci-cat-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    /* Flex column stacks children vertically and centres them,
       regardless of their intrinsic inline-block / inline-flex display. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ci-cat-hero .ci-article__back {
    margin-bottom: 1.5rem;
    /* Force self-alignment in the flex column so it doesn't stretch. */
    align-self: center;
}

.ci-cat-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    margin: 0 0 1.25rem;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ci-radius-xl);
    backdrop-filter: blur(6px);
}
.ci-cat-hero__icon svg { width: 36px; height: 36px; }

.ci-cat-hero__eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.ci-cat-hero h1.ci-cat-hero__title,
.ci-cat-hero .ci-cat-hero__title {
    margin: 0 auto 1rem !important;
    max-width: 720px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.15rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: center !important;
}

.ci-cat-hero__intro {
    max-width: 620px;
    margin: 0 auto 1.5rem;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.ci-cat-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}
.ci-cat-hero__meta strong {
    font-weight: 700;
    color: #ffffff;
}
.ci-cat-hero__meta-dot {
    opacity: 0.6;
}

/* --- Featured post ("Start here" section) --- */
.ci-cat-featured {
    background-color: #ffffff;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-cat-featured__inner {
    max-width: 1180px;
    margin: 0 auto;
}
.ci-cat-featured__header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.ci-cat-featured__pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg,
        var(--ci-color-brand) 0%,
        var(--ci-color-brand-dark) 100%);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(73, 134, 91, 0.3);
}
.ci-cat-featured h2.ci-cat-featured__kicker,
.ci-cat-featured .ci-cat-featured__kicker {
    margin: 0 !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}

/* Reuse .ci-in-editor__card styles for consistency. */

/* --- "Also exploring" related paths --- */
.ci-cat-related {
    background-color: var(--ci-color-bg);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-cat-related__inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.ci-cat-related__eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cat-related h2.ci-cat-related__title,
.ci-cat-related .ci-cat-related__title {
    margin: 0 auto 2rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-cat-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 720px) {
    .ci-cat-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.ci-cat-related__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.35rem 1.35rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    color: var(--ci-color-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--ci-transition),
                box-shadow var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-cat-related__card::after {
    content: "";
    position: absolute;
    inset: auto -30% -30% auto;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at center,
        rgba(73, 134, 91, 0.14) 0%,
        rgba(73, 134, 91, 0) 70%);
    opacity: 0.7;
    transition: transform 400ms ease, opacity var(--ci-transition);
    pointer-events: none;
}
.ci-cat-related__card:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}
.ci-cat-related__card:hover::after {
    transform: scale(1.4);
    opacity: 1;
}
.ci-cat-related__label {
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    position: relative;
    z-index: 1;
}
.ci-cat-related__card-title {
    margin: 0.15rem 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
    position: relative;
    z-index: 1;
}
.ci-cat-related__cta {
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ci-color-brand-dark);
    position: relative;
    z-index: 1;
    transition: color var(--ci-transition);
}
.ci-cat-related__card:hover .ci-cat-related__cta { color: var(--ci-color-brand); }

/* =========================================================
   Ciralgo Footer (v1)
   3 horizontal bands: brand + newsletter, link columns,
   legal strip. Dark-green base with pinstripe overlay.
   ========================================================= */

.ci-foot {
    position: relative;
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
    background-image:
        radial-gradient(ellipse at top right,
            rgba(73, 134, 91, 0.35) 0%,
            rgba(73, 134, 91, 0) 55%),
        radial-gradient(ellipse at bottom left,
            rgba(73, 134, 91, 0.25) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
    /* Break out of any parent container that constrains our width. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    box-sizing: border-box;
}

.ci-foot__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Band 1: brand + newsletter --- */
.ci-foot__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2.5rem;
}
@media (min-width: 820px) {
    .ci-foot__top {
        grid-template-columns: 1.15fr 1fr;
        gap: 3.5rem;
        align-items: start;
    }
}

.ci-foot__brand {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.ci-foot__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 0.85rem;
}
.ci-foot__logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-foot__logo-mark svg { width: 20px; height: 20px; }
.ci-foot__logo-word {
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.ci-foot__tagline {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.ci-foot__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--ci-radius-lg);
    max-width: 360px;
    text-align: center;
}
.ci-foot__trust-eyebrow {
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.ci-foot__trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    color: #ffffff;
    flex-wrap: wrap;
}
.ci-foot__trust-logo-link {
    display: inline-flex;
    align-items: center;
    opacity: 0.9;
    transition: opacity var(--ci-transition), transform var(--ci-transition);
}
.ci-foot__trust-logo-link:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.ci-foot__trust-logo-img {
    display: block;
    height: clamp(22px, 3vw, 30px);
    width: auto;
    max-width: 130px;
    object-fit: contain;
    /* Invert dark logos so they read on the dark footer background.
       If your logos are already light/white, remove this filter. */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.ci-foot__trust-logo {
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: #ffffff;
    opacity: 0.9;
}
.ci-foot__trust-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
}

/* Newsletter */
.ci-foot__subscribe {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ci-radius-xl);
    padding: 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ci-foot__nl-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-foot h3.ci-foot__nl-title,
.ci-foot .ci-foot__nl-title {
    margin: 0 0 1rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #ffffff !important;
    text-align: left !important;
}

.ci-foot__nl-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.ci-foot__nl-input {
    flex: 1 1 200px;
    padding: 0.75rem 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.925rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    outline: none;
    transition: border-color var(--ci-transition), background-color var(--ci-transition);
}
.ci-foot__nl-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.ci-foot__nl-input:focus {
    border-color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.12);
}

.ci-foot button.ci-foot__nl-btn,
.ci-foot .ci-foot__nl-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0.75rem 1.4rem !important;
    font-family: var(--ci-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.925rem !important;
    color: var(--ci-color-brand-deep) !important;
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer;
    transition: background-color var(--ci-transition), transform var(--ci-transition) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.ci-foot__nl-btn:hover {
    background-color: var(--ci-color-brand-light) !important;
    transform: translateY(-1px);
}

.ci-foot__nl-foot {
    display: inline-block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

/* --- Band 2: link columns --- */
.ci-foot__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}
@media (min-width: 720px) {
    .ci-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

.ci-foot__col-title {
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.ci-foot__col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ci-foot__col-list a {
    font-family: var(--ci-font-sans);
    font-size: 0.925rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--ci-transition);
}
.ci-foot__col-list a:hover {
    color: var(--ci-color-brand-light);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* --- Band 3: legal strip --- */
.ci-foot__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.25rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}
.ci-foot__bar-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}
.ci-foot__bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.ci-foot__legal-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    font-variant-numeric: tabular-nums;
}
.ci-foot__legal-item {
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.005em;
}
.ci-foot__legal-item--muted { color: rgba(255, 255, 255, 0.5); }
.ci-foot__legal-tag {
    display: inline-block;
    margin-right: 0.15rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.ci-foot__legal-rule {
    display: inline-block;
    width: 1px;
    height: 0.85em;
    background-color: rgba(255, 255, 255, 0.18);
    flex: 0 0 auto;
}
.ci-foot__legal-line--secondary {
    color: rgba(255, 255, 255, 0.5);
}
.ci-foot__legal-line--secondary .ci-foot__legal-item { color: rgba(255, 255, 255, 0.55); }
.ci-foot__legal-line--secondary .ci-foot__legal-rule { height: 0.75em; }
.ci-foot__legal-link {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color var(--ci-transition);
}
.ci-foot__legal-link:hover {
    color: var(--ci-color-brand-light);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* "Made in the Netherlands" pill --- */
.ci-foot__made {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}
.ci-foot__made svg {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
}
.ci-foot__made-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
}
.ci-foot__made-eu {
    font-weight: 600;
    color: var(--ci-color-brand-light);
    letter-spacing: 0.04em;
}

/* Socials --- */
.ci-foot__socials {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ci-foot__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    text-decoration: none;
    transition: background-color var(--ci-transition),
                color var(--ci-transition),
                border-color var(--ci-transition),
                transform var(--ci-transition);
}
.ci-foot__socials a:hover {
    background-color: rgba(134, 239, 172, 0.1);
    border-color: rgba(134, 239, 172, 0.35);
    color: var(--ci-color-brand-light);
    transform: translateY(-1px);
}
.ci-foot__socials svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .ci-foot__bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .ci-foot__bar-right { width: 100%; justify-content: space-between; }
}

/* =========================================================
   Careers page ([ciralgo_careers])
   Seven sections: hero, why, values, benefits, open roles,
   process, final CTA.
   ========================================================= */

.ci-cr { background-color: #ffffff; color: var(--ci-color-text); }

/* Shared eyebrow / title / sub */
.ci-cr-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cr-eyebrow--on-dark {
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.ci-cr h2.ci-cr-title,
.ci-cr .ci-cr-title {
    margin: 0 auto 0.85rem !important;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.6vw, 2.65rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-cr-title--on-dark { color: #ffffff !important; }
.ci-cr-sub {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
    text-align: center;
}
.ci-cr-sub--on-dark { color: rgba(255, 255, 255, 0.82); }
.ci-cr-sub a {
    color: var(--ci-color-brand-dark);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ci-cr-sub--on-dark a { color: var(--ci-color-brand-light); }

/* --- HERO --- */
.ci-cr-hero {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.45) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-cr-hero__inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ci-cr-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1.25rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-cr-hero__eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: ci-cr-pulse 2s ease-out infinite;
}
@keyframes ci-cr-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
    50% { box-shadow: 0 0 16px rgba(74, 222, 128, 0.9); }
}
.ci-cr-hero h1.ci-cr-hero__title,
.ci-cr-hero .ci-cr-hero__title {
    margin: 0 auto 1rem !important;
    max-width: 720px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.65rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-cr-hero__title em {
    font-style: normal;
    color: var(--ci-color-brand-light);
    background: linear-gradient(135deg, var(--ci-color-brand-light) 0%, #4ade80 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ci-cr-hero__sub {
    max-width: 620px;
    margin: 0 auto 1.75rem;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.ci-cr-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.ci-cr-hero .ci-btn--primary {
    background-color: #ffffff;
    color: var(--ci-color-brand-deep);
    border-color: #ffffff;
}
.ci-cr-hero .ci-btn--primary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-brand-light);
}
.ci-cr-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}
.ci-cr-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ci-cr-hero__meta-item svg {
    width: 14px;
    height: 14px;
    color: var(--ci-color-brand-light);
}

/* --- WHY --- */
.ci-cr-why {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-cr-why__inner { max-width: 1180px; margin: 0 auto; }
.ci-cr-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 640px) { .ci-cr-why__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .ci-cr-why__grid { grid-template-columns: repeat(4, 1fr); } }
.ci-cr-why__card {
    padding: 1.75rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition), border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-cr-why__card:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.4);
    box-shadow: var(--ci-shadow-md);
}
.ci-cr-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}
.ci-cr-why__icon svg { width: 26px; height: 26px; }
.ci-cr-why__card h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ci-color-text);
}
.ci-cr-why__card p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

/* --- VALUES --- */
.ci-cr-values {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-cr-values__inner { max-width: 1080px; margin: 0 auto; }
.ci-cr-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 640px) { .ci-cr-values__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 900px) { .ci-cr-values__grid { grid-template-columns: repeat(3, 1fr); } }
.ci-cr-value {
    padding: 1.5rem 1.35rem;
    background-color: var(--ci-color-bg);
    border-radius: var(--ci-radius-lg);
    transition: transform var(--ci-transition), background-color var(--ci-transition);
}
.ci-cr-value:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
    box-shadow: var(--ci-shadow-md);
    border: 1px solid rgba(73, 134, 91, 0.25);
}
.ci-cr-value__num {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cr-value h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ci-color-text);
}
.ci-cr-value p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

/* --- BENEFITS --- */
.ci-cr-benefits {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-cr-benefits__inner { max-width: 1180px; margin: 0 auto; }
.ci-cr-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 640px) { .ci-cr-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .ci-cr-benefits__grid { grid-template-columns: repeat(4, 1fr); } }
.ci-cr-benefit {
    padding: 1.5rem 1.4rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    transition: transform var(--ci-transition), border-color var(--ci-transition);
}
.ci-cr-benefit:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.35);
}
.ci-cr-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}
.ci-cr-benefit__icon svg { width: 22px; height: 22px; }
.ci-cr-benefit h3 {
    margin: 0 0 0.35rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ci-color-text);
}
.ci-cr-benefit p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ci-color-text-subtle);
}

/* --- OPEN ROLES --- */
.ci-cr-roles {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    scroll-margin-top: 6rem;
}
.ci-cr-roles__inner { max-width: 900px; margin: 0 auto; }
.ci-cr-roles__list {
    display: grid;
    gap: 1rem;
    text-align: left;
}
.ci-cr-role {
    display: block;
    padding: 1.5rem 1.75rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    text-decoration: none;
    color: var(--ci-color-text);
    transition: transform var(--ci-transition), border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-cr-role:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.4);
    box-shadow: var(--ci-shadow-md);
}
.ci-cr-role__head {
    margin-bottom: 0.85rem;
}
.ci-cr-role__team {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cr-role__title {
    margin: 0 0 0.65rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--ci-color-text);
    letter-spacing: -0.015em;
    transition: color var(--ci-transition);
}
.ci-cr-role:hover .ci-cr-role__title { color: var(--ci-color-brand-dark); }
.ci-cr-role__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    font-size: 0.85rem;
    color: var(--ci-color-text-subtle);
}
.ci-cr-role__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ci-cr-role__meta svg {
    width: 14px;
    height: 14px;
    color: var(--ci-color-brand-dark);
}
.ci-cr-role__summary {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}
.ci-cr-role__cta {
    display: inline-block;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--ci-color-brand-dark);
    transition: transform var(--ci-transition);
}
.ci-cr-role:hover .ci-cr-role__cta { transform: translateX(3px); }

/* --- HIRING PROCESS --- */
.ci-cr-process {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at top left, rgba(73, 134, 91, 0.35) 0%, rgba(73, 134, 91, 0) 55%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px, transparent 10px);
}
.ci-cr-process__inner { max-width: 1180px; margin: 0 auto; }
.ci-cr-process__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 640px) { .ci-cr-process__steps { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .ci-cr-process__steps { grid-template-columns: repeat(5, 1fr); } }
.ci-cr-process__step {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--ci-radius-lg);
    transition: transform var(--ci-transition), background-color var(--ci-transition);
}
.ci-cr-process__step:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.1);
}
.ci-cr-process__num {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cr-process__step h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.25;
}
.ci-cr-process__step p {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}
.ci-cr-process__time {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

/* --- FINAL CTA --- */
.ci-cr-final {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-cr-final__inner {
    max-width: 640px;
    margin: 0 auto;
}
.ci-cr-final__eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cr-final h2.ci-cr-final__title,
.ci-cr-final .ci-cr-final__title {
    margin: 0 auto 0.85rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-cr-final__sub {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
}
.ci-cr-final__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.ci-cr-final .ci-btn--ghost-on-dark {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}
.ci-cr-final .ci-btn--ghost-on-dark:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
}

@media (prefers-reduced-motion: reduce) {
    .ci-cr-why__card, .ci-cr-value, .ci-cr-benefit, .ci-cr-role, .ci-cr-process__step,
    .ci-cr-hero__eyebrow-dot {
        transition: none !important;
        animation: none !important;
    }
    .ci-cr-why__card:hover, .ci-cr-value:hover, .ci-cr-benefit:hover, .ci-cr-role:hover,
    .ci-cr-process__step:hover {
        transform: none !important;
    }
}

/* =========================================================
   Product page ([ciralgo_product])
   9 sections: hero, pillars, product tour, personas,
   integrations, trust, stats, final CTA.
   ========================================================= */

.ci-pp { background-color: #ffffff; color: var(--ci-color-text); }

/* Shared eyebrow / title / sub across product-page sections */
.ci-pp-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-pp-eyebrow--on-dark {
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.ci-pp .ci-pp-title,
.ci-pp h2.ci-pp-title {
    margin: 0 auto 0.85rem !important;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.6vw, 2.65rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-pp-title--on-dark { color: #ffffff !important; }
.ci-pp-sub {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
    text-align: center;
}
.ci-pp-sub--on-dark { color: rgba(255, 255, 255, 0.82); }

/* --- HERO --- */
.ci-pp-hero {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.45) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-pp-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 900px) {
    .ci-pp-hero__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: 3rem;
    }
}
.ci-pp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.25rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-pp-hero__eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.ci-pp-hero h1.ci-pp-hero__title,
.ci-pp-hero .ci-pp-hero__title {
    margin: 0 0 1rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 5.2vw, 3.65rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: left !important;
}
.ci-pp-hero__title em {
    font-style: normal;
    color: var(--ci-color-brand-light);
    background: linear-gradient(135deg, var(--ci-color-brand-light) 0%, #4ade80 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ci-pp-hero__sub {
    margin: 0 0 1.75rem;
    max-width: 560px;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.ci-pp-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.ci-pp-hero .ci-btn--primary {
    background-color: #ffffff;
    color: var(--ci-color-brand-deep);
    border-color: #ffffff;
}
.ci-pp-hero .ci-btn--primary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-brand-light);
}
.ci-pp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72);
}
.ci-pp-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ci-pp-hero__trust-item svg {
    width: 14px;
    height: 14px;
    color: #4ade80;
}

/* Hero dashboard mockup */
.ci-pp-hero__visual { position: relative; }
.ci-pp-hero__dash {
    padding: 1.25rem;
    background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ci-radius-xl);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: rotate(-1deg);
}
.ci-pp-hero__dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ci-pp-hero__dash-title {
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}
.ci-pp-hero__dash-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #4ade80;
    font-weight: 500;
}
.ci-pp-hero__dash-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4ade80;
}
.ci-pp-hero__dash-kpi {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}
.ci-pp-hero__dash-kpi-value {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 2.25rem;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ci-pp-hero__dash-kpi-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.2rem;
}
.ci-pp-hero__dash-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.15);
    border-radius: 999px;
}
.ci-pp-hero__dash-kpi-delta svg { width: 12px; height: 12px; }
.ci-pp-hero__dash-chart {
    width: 100%;
    height: 100px;
    display: block;
    margin-bottom: 0.75rem;
}
.ci-pp-hero__dash-rows {
    display: grid;
    gap: 0.4rem;
}
.ci-pp-hero__dash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--ci-radius-md);
    font-size: 0.8125rem;
}
.ci-pp-hero__dash-row span { color: rgba(255, 255, 255, 0.75); }
.ci-pp-hero__dash-row-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.ci-pp-hero__dash-row-value.is-up { color: #4ade80; }
.ci-pp-hero__dash-row-value.is-down { color: #f87171; }

/* --- PILLARS --- */
.ci-pp-pillars {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-pp-pillars__inner { max-width: 1180px; margin: 0 auto; }
.ci-pp-pillars__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 640px) { .ci-pp-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .ci-pp-pillars__grid { grid-template-columns: repeat(4, 1fr); } }
.ci-pp-pillar {
    padding: 1.75rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition), box-shadow var(--ci-transition), border-color var(--ci-transition);
}
.ci-pp-pillar:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.4);
    box-shadow: var(--ci-shadow-md);
}
.ci-pp-pillar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}
.ci-pp-pillar__icon svg { width: 26px; height: 26px; }
.ci-pp-pillar h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ci-color-text);
}
.ci-pp-pillar p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

/* --- PRODUCT TOUR --- */
.ci-pp-tour {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background-image: repeating-linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px, transparent 10px);
}
.ci-pp-tour__inner { max-width: 1180px; margin: 0 auto; }
.ci-pp-tour__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.ci-pp-tour .ci-pp-tour__tab,
.ci-pp-tour button.ci-pp-tour__tab {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.15rem !important;
    font-family: var(--ci-font-sans) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color var(--ci-transition), color var(--ci-transition), border-color var(--ci-transition) !important;
}
.ci-pp-tour__tab:hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.12) !important; }
.ci-pp-tour__tab.is-active {
    color: var(--ci-color-brand-deep) !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
.ci-pp-tour__tab-num {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.7;
}
.ci-pp-tour__tab-label { font-size: 0.9rem; font-weight: 600; }

.ci-pp-tour__panes { position: relative; }
.ci-pp-tour__pane {
    display: none;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
    align-items: center;
}
.ci-pp-tour__pane.is-active { display: grid; }
@media (min-width: 900px) {
    .ci-pp-tour__pane { grid-template-columns: 1.15fr 1fr; gap: 3rem; }
}

/* Tour mockup */
.ci-pp-tour__mock {
    background-color: #0f172a;
    border-radius: var(--ci-radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.ci-pp-tour__mock-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #111827;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ci-pp-tour__mock-dots { display: inline-flex; gap: 6px; }
.ci-pp-tour__mock-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
}
.ci-pp-tour__mock-dots span:nth-child(1) { background-color: #ef4444; }
.ci-pp-tour__mock-dots span:nth-child(2) { background-color: #f59e0b; }
.ci-pp-tour__mock-dots span:nth-child(3) { background-color: #22c55e; }
.ci-pp-tour__mock-title {
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}
.ci-pp-tour__mock-body { padding: 1.25rem; }
.ci-pp-tour__mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ci-pp-tour__mock-kpi {
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--ci-radius-md);
    text-align: left;
}
.ci-pp-tour__mock-kpi span { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; letter-spacing: 0.05em; }
.ci-pp-tour__mock-kpi strong { display: block; font-size: 1.35rem; font-weight: 700; color: #ffffff; margin-top: 0.15rem; }
.ci-pp-tour__mock-chart svg { width: 100%; height: 120px; display: block; }

/* Cost mock */
.ci-pp-tour__mock-cost { display: grid; gap: 1rem; }
.ci-pp-tour__mock-cost-big { padding: 1rem; background-color: rgba(74, 222, 128, 0.1); border-radius: var(--ci-radius-md); text-align: left; }
.ci-pp-tour__mock-cost-big span { display: block; font-family: var(--ci-font-sans); font-weight: 700; font-size: 1.85rem; color: #ffffff; }
.ci-pp-tour__mock-cost-big em { font-style: normal; font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }
.ci-pp-tour__mock-cost-list { display: grid; gap: 0.4rem; }
.ci-pp-tour__mock-cost-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--ci-radius-md);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}
.ci-pp-tour__mock-cost-row strong {
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    position: relative;
    z-index: 1;
}
.ci-pp-tour__mock-cost-row i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(73, 134, 91, 0.25);
    z-index: 0;
}

/* Governance log mock */
.ci-pp-tour__mock-log { display: grid; gap: 0.5rem; }
.ci-pp-tour__mock-log-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--ci-radius-md);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
}
.ci-pp-tour__mock-log-tag {
    padding: 0.15rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
}
.ci-pp-tour__mock-log-tag.is-ok { color: #4ade80; background-color: rgba(74, 222, 128, 0.15); }
.ci-pp-tour__mock-log-tag.is-warn { color: #fbbf24; background-color: rgba(251, 191, 36, 0.15); }
.ci-pp-tour__mock-log-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }

.ci-pp-tour__caption h3 {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.25;
    color: #ffffff;
    letter-spacing: -0.015em;
}
.ci-pp-tour__caption p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* --- PERSONAS --- */
.ci-pp-personas {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-pp-personas__inner { max-width: 1180px; margin: 0 auto; }
.ci-pp-personas__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 640px) { .ci-pp-personas__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .ci-pp-personas__grid { grid-template-columns: repeat(4, 1fr); } }
.ci-pp-persona {
    padding: 1.75rem 1.5rem;
    background-color: var(--ci-color-bg);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--ci-radius-xl);
    transition: transform var(--ci-transition), background-color var(--ci-transition), border-color var(--ci-transition);
}
.ci-pp-persona:hover {
    transform: translateY(-3px);
    background-color: #ffffff;
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}
.ci-pp-persona__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.75rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}
.ci-pp-persona__icon svg { width: 22px; height: 22px; }
.ci-pp-persona__label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
}
.ci-pp-persona h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--ci-color-text);
}
.ci-pp-persona p {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

/* --- INTEGRATIONS --- */
.ci-pp-integrations {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-pp-integrations__inner { max-width: 1180px; margin: 0 auto; }
.ci-pp-integrations__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) { .ci-pp-integrations__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ci-pp-integrations__grid { grid-template-columns: repeat(3, 1fr); } }
.ci-pp-integration {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.25rem 1.35rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    text-align: left;
    text-decoration: none;
    color: var(--ci-color-text);
    overflow: hidden;
    transition: transform var(--ci-transition),
                border-color var(--ci-transition),
                box-shadow var(--ci-transition);
}
.ci-pp-integration:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.4);
    box-shadow: var(--ci-shadow-md);
}

/* Vertical accent bar — brand-coloured per integration */
.ci-pp-integration__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: rgba(73, 134, 91, 0.4);
    transition: width var(--ci-transition);
}
.ci-pp-integration:hover .ci-pp-integration__accent { width: 6px; }

/* Per-brand accent colours (matches each brand's signature). */
.ci-pp-integration--openai     .ci-pp-integration__accent { background-color: #10a37f; }
.ci-pp-integration--anthropic  .ci-pp-integration__accent { background-color: #d97757; }
.ci-pp-integration--python     .ci-pp-integration__accent { background-color: #3776ab; }
.ci-pp-integration--langchain  .ci-pp-integration__accent { background-color: #1c3d5a; }
.ci-pp-integration--llamaindex .ci-pp-integration__accent { background-color: #7c67d9; }
.ci-pp-integration--rest       .ci-pp-integration__accent { background-color: #49865b; }

/* Logo container — shows uploaded logo OR a brand-tinted wordmark.
   Background colour differs per brand where needed to give white
   monochrome logos (like OpenAI) the dark surface they need. */
.ci-pp-integration__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-md);
    overflow: hidden;
    transition: background-color var(--ci-transition), border-color var(--ci-transition);
}
.ci-pp-integration__logo img {
    max-width: 44px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Dark tile for OpenAI (their white monoblossom needs a dark surface) */
.ci-pp-integration--openai .ci-pp-integration__logo {
    background-color: #0f172a;
    border-color: #0f172a;
}
/* Warm cream tile for Anthropic - matches their brand */
.ci-pp-integration--anthropic .ci-pp-integration__logo {
    background-color: #f5f0e8;
    border-color: rgba(217, 119, 87, 0.2);
}
/* Subtle blue-tinted tile for Python */
.ci-pp-integration--python .ci-pp-integration__logo {
    background-color: #f0f6fa;
    border-color: rgba(55, 118, 171, 0.15);
}
/* LangChain neutral */
.ci-pp-integration--langchain .ci-pp-integration__logo {
    background-color: #ffffff;
}
/* LlamaIndex neutral */
.ci-pp-integration--llamaindex .ci-pp-integration__logo {
    background-color: #f7f5fd;
    border-color: rgba(124, 103, 217, 0.15);
}
/* cURL neutral */
.ci-pp-integration--rest .ci-pp-integration__logo {
    background-color: #ffffff;
}

/* Fallback text mark when no logo URL is set. Uses per-brand colour. */
.ci-pp-integration__mark {
    font-family: var(--ci-font-sans);
    font-weight: 800;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    padding: 0 0.3rem;
}
.ci-pp-integration--openai     .ci-pp-integration__mark { color: #10a37f; }
.ci-pp-integration--anthropic  .ci-pp-integration__mark { color: #d97757; }
.ci-pp-integration--python     .ci-pp-integration__mark { color: #3776ab; }
.ci-pp-integration--langchain  .ci-pp-integration__mark { color: #1c3d5a; }
.ci-pp-integration--llamaindex .ci-pp-integration__mark { color: #7c67d9; }
.ci-pp-integration--rest       .ci-pp-integration__mark { color: var(--ci-color-brand-dark); }

/* Body typography */
.ci-pp-integration__body { min-width: 0; }
.ci-pp-integration__name {
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ci-color-text);
    margin-bottom: 0.15rem;
    transition: color var(--ci-transition);
}
.ci-pp-integration:hover .ci-pp-integration__name { color: var(--ci-color-brand-dark); }
.ci-pp-integration__desc {
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ci-pp-integration__arrow {
    font-family: var(--ci-font-sans);
    font-size: 1.25rem;
    color: var(--ci-color-brand-dark);
    transition: transform var(--ci-transition);
}
.ci-pp-integration:hover .ci-pp-integration__arrow { transform: translateX(4px); }

/* Trademark attribution */
.ci-pp-integrations__legal {
    max-width: 720px;
    margin: clamp(4rem, 8vw, 6.5rem) auto 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
    text-align: center;
}

/* --- TRUST --- */
.ci-pp-trust {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at top left, rgba(73, 134, 91, 0.35) 0%, rgba(73, 134, 91, 0) 55%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.04) 0px,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px, transparent 10px);
}
.ci-pp-trust__inner { max-width: 1080px; margin: 0 auto; }
.ci-pp-trust__badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 640px) { .ci-pp-trust__badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ci-pp-trust__badges { grid-template-columns: repeat(3, 1fr); } }
.ci-pp-trust__badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ci-radius-md);
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
    text-align: left;
}
.ci-pp-trust__badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    flex: 0 0 auto;
}

/* --- STATS --- */
.ci-pp-stats {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-pp-stats__inner { max-width: 1180px; margin: 0 auto; }
.ci-pp-stats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 640px) { .ci-pp-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ci-pp-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.ci-pp-stat {
    padding: 1.75rem 1rem;
    text-align: center;
    background-color: var(--ci-color-bg);
    border-radius: var(--ci-radius-xl);
    transition: transform var(--ci-transition), background-color var(--ci-transition);
}
.ci-pp-stat:hover {
    transform: translateY(-3px);
    background-color: var(--ci-color-brand-light);
}
.ci-pp-stat strong {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ci-color-brand-dark);
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.ci-pp-stat span {
    display: block;
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    color: var(--ci-color-text-subtle);
    line-height: 1.4;
}

/* --- FINAL CTA --- */
.ci-pp-final {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at bottom right, rgba(73, 134, 91, 0.45) 0%, rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-pp-final__inner { max-width: 720px; margin: 0 auto; }
.ci-pp-final__eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-pp-final h2.ci-pp-final__title,
.ci-pp-final .ci-pp-final__title {
    margin: 0 auto 0.85rem !important;
    max-width: 620px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-pp-final__sub {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.ci-pp-final__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.ci-pp-final .ci-btn--primary {
    background-color: #ffffff;
    color: var(--ci-color-brand-deep);
    border-color: #ffffff;
}
.ci-pp-final .ci-btn--primary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-brand-light);
}
.ci-pp-final__foot {
    display: inline-block;
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .ci-pp-pillar, .ci-pp-persona, .ci-pp-integration, .ci-pp-stat, .ci-pp-tour__tab {
        transition: none !important;
    }
    .ci-pp-pillar:hover, .ci-pp-persona:hover, .ci-pp-integration:hover, .ci-pp-stat:hover {
        transform: none !important;
    }
}

/* =========================================================
   Contact page ([ciralgo_contact])
   Two-column premium layout: form + contact routes.
   ========================================================= */

.ci-cnt-hero {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-cnt-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ci-cnt-hero__eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-cnt-hero h1.ci-cnt-hero__title,
.ci-cnt-hero .ci-cnt-hero__title {
    margin: 0 auto 0.85rem !important;
    max-width: 620px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-cnt-hero__sub {
    max-width: 560px;
    margin: 0 auto 1.25rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.ci-cnt-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}
.ci-cnt-hero__badge svg { width: 14px; height: 14px; }

/* --- Split section --- */
.ci-cnt {
    background-color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-cnt__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 900px) {
    .ci-cnt__inner {
        grid-template-columns: 1.15fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}

/* Form column */
.ci-cnt__form-wrap {
    background-color: #ffffff;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    box-shadow: var(--ci-shadow-md);
}
.ci-cnt__form-head {
    margin-bottom: 1.5rem;
}
.ci-cnt__form-head h2 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.015em;
    color: var(--ci-color-text);
}
.ci-cnt__form-head p {
    margin: 0;
    color: var(--ci-color-text-subtle);
    font-size: 0.95rem;
    line-height: 1.55;
}

.ci-cnt__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .ci-cnt__form { grid-template-columns: 1fr 1fr; }
    .ci-cnt__field:not(.ci-cnt__field--half) { grid-column: 1 / -1; }
}

.ci-cnt__field label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ci-color-text);
    letter-spacing: 0.01em;
}
.ci-cnt__field input,
.ci-cnt__field select,
.ci-cnt__field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    color: var(--ci-color-text);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: var(--ci-radius-md);
    outline: none;
    transition: border-color var(--ci-transition), box-shadow var(--ci-transition);
    box-sizing: border-box;
}
.ci-cnt__field textarea { resize: vertical; min-height: 130px; }
.ci-cnt__field select { cursor: pointer; }
.ci-cnt__field input:focus,
.ci-cnt__field select:focus,
.ci-cnt__field textarea:focus {
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px rgba(73, 134, 91, 0.15);
}
.ci-cnt__field input::placeholder,
.ci-cnt__field textarea::placeholder {
    color: rgba(15, 23, 42, 0.35);
}

.ci-cnt .ci-cnt__submit,
.ci-cnt button.ci-cnt__submit {
    -webkit-appearance: none !important;
    appearance: none !important;
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.85rem 1.6rem !important;
    font-family: var(--ci-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    background-color: var(--ci-color-brand) !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer;
    transition: background-color var(--ci-transition), transform var(--ci-transition) !important;
    box-shadow: 0 4px 14px rgba(73, 134, 91, 0.3) !important;
}
.ci-cnt__submit:hover:not(:disabled) {
    background-color: var(--ci-color-brand-dark) !important;
    transform: translateY(-1px);
}
.ci-cnt__submit:disabled { opacity: 0.7; cursor: not-allowed; }

.ci-cnt__privacy {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
    line-height: 1.5;
}
.ci-cnt__privacy a {
    color: var(--ci-color-brand-dark);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ci-cnt__result {
    grid-column: 1 / -1;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: var(--ci-radius-md);
    transition: padding var(--ci-transition), background-color var(--ci-transition);
}
.ci-cnt__result.is-success {
    padding: 0.9rem 1.05rem;
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
    border: 1px solid rgba(73, 134, 91, 0.3);
}
.ci-cnt__result.is-error {
    padding: 0.9rem 1.05rem;
    background-color: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* --- Routes column --- */
.ci-cnt__routes-head { margin-bottom: 1.25rem; }
.ci-cnt__routes-head h2 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.015em;
    color: var(--ci-color-text);
}
.ci-cnt__routes-head p {
    margin: 0;
    color: var(--ci-color-text-subtle);
    font-size: 0.95rem;
    line-height: 1.55;
}

.ci-cnt__routes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.ci-cnt__route {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    text-decoration: none;
    color: var(--ci-color-text);
    transition: transform var(--ci-transition),
                border-color var(--ci-transition),
                box-shadow var(--ci-transition);
}
.ci-cnt__route:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.4);
    box-shadow: var(--ci-shadow-md);
}
.ci-cnt__route-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}
.ci-cnt__route-icon svg { width: 22px; height: 22px; }
.ci-cnt__route-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ci-cnt__route-title {
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ci-color-text);
}
.ci-cnt__route-desc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ci-color-text-subtle);
}
.ci-cnt__route-email {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--ci-color-brand-dark);
    margin-top: 0.15rem;
}
.ci-cnt__route-arrow {
    font-family: var(--ci-font-sans);
    font-size: 1.25rem;
    color: var(--ci-color-brand-dark);
    transition: transform var(--ci-transition);
}
.ci-cnt__route:hover .ci-cnt__route-arrow { transform: translateX(3px); }

.ci-cnt__office {
    padding: 1.15rem 1.15rem 1.25rem;
    background-color: var(--ci-color-bg);
    border-radius: var(--ci-radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.05);
}
.ci-cnt__office-eyebrow {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cnt__office-address {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ci-color-text);
}
.ci-cnt__office-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    color: var(--ci-color-text-subtle);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
}
.ci-cnt__office-badge svg {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* ==========================================================================
   CONTACT PAGE - premium accessible v2
   ========================================================================== */

/* Skip link (visible on keyboard focus) */
.ci-cnt-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 1rem;
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    z-index: 10000;
}
.ci-cnt-skip:focus { left: 0; top: 0; }

/* Hero eyebrow dot */
.ci-cnt-hero__eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ci-color-brand-light);
    box-shadow: 0 0 8px rgba(134, 239, 172, 0.6);
}

/* --- Trust strip band below hero --- */
.ci-cnt-trust {
    background-color: #ffffff;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 4vw, 3rem);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ci-cnt-trust__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}
@media (min-width: 900px) {
    .ci-cnt-trust__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ci-cnt-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    text-align: left;
}
.ci-cnt-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 8px;
    flex: 0 0 auto;
}
.ci-cnt-trust__icon svg { width: 16px; height: 16px; }
.ci-cnt-trust__label {
    font-family: var(--ci-font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.85);
    line-height: 1.35;
}

/* --- Grid override (right rail wider so content breathes) --- */
@media (min-width: 900px) {
    .ci-cnt__inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* --- Form layout overrides --- */
.ci-cnt__form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.ci-cnt__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 560px) {
    .ci-cnt__row { grid-template-columns: 1fr 1fr; }
}
.ci-cnt__form-eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.65rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cnt__req {
    display: inline-block;
    margin-left: 0.15rem;
    color: #dc2626;
    font-weight: 700;
}

.ci-cnt__field label {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.86rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.9);
}
.ci-cnt__field-hint {
    margin-left: auto;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.5);
    letter-spacing: 0.02em;
}
.ci-cnt__field.is-invalid input,
.ci-cnt__field.is-invalid select,
.ci-cnt__field.is-invalid textarea {
    border-color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.03) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
.ci-cnt__field-error {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.78rem;
    color: #b91c1c;
    min-height: 0;
    line-height: 1.35;
}
.ci-cnt__field-error:empty { display: none; }

.ci-cnt__select-wrap {
    position: relative;
}
.ci-cnt__select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem !important;
}
.ci-cnt__select-caret {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(15, 23, 42, 0.5);
    pointer-events: none;
}

.ci-cnt__field-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.4rem;
}
.ci-cnt__field-meta .ci-cnt__field-error { margin-top: 0; }
.ci-cnt__field-count {
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    color: rgba(15, 23, 42, 0.5);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ci-cnt__field-count.is-near { color: #dc2626; font-weight: 600; }

.ci-cnt__submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 0.25rem;
}
.ci-cnt__submit-row .ci-cnt__submit {
    grid-column: unset !important;
    justify-self: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex: 0 0 auto;
}
.ci-cnt__submit-row .ci-cnt__submit span[aria-hidden] {
    display: inline-block;
    transition: transform var(--ci-transition);
}
.ci-cnt__submit-row .ci-cnt__submit:hover span[aria-hidden] { transform: translateX(3px); }

.ci-cnt__privacy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0.5rem 0.85rem !important;
    background-color: rgba(15, 23, 42, 0.03);
    border-radius: 999px;
    font-size: 0.78rem !important;
    color: rgba(15, 23, 42, 0.65) !important;
    line-height: 1.4 !important;
    flex: 1 1 auto;
    min-width: 0;
}
.ci-cnt__privacy svg {
    width: 14px;
    height: 14px;
    color: var(--ci-color-brand);
    flex: 0 0 auto;
}
.ci-cnt__privacy a {
    color: var(--ci-color-brand-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.ci-cnt__result {
    margin-top: 0.5rem;
}

/* Honeypot - hidden from users, visible to bots */
.ci-cnt__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Right rail --- */
.ci-cnt__side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Human reply card */
.ci-cnt__human {
    padding: 1.5rem 1.35rem;
    background: linear-gradient(180deg, var(--ci-color-brand-light) 0%, #ffffff 100%);
    border: 1px solid rgba(73, 134, 91, 0.25);
    border-radius: var(--ci-radius-lg);
}
.ci-cnt__human-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-deep);
}
.ci-cnt__human-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px rgba(73, 134, 91, 0.2);
    animation: ci-cnt-pulse 2s ease-in-out infinite;
}
@keyframes ci-cnt-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(73, 134, 91, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(73, 134, 91, 0.08); }
}
.ci-cnt__human h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cnt__human p {
    margin: 0;
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.68);
}

/* Routes list wrapper (new) */
.ci-cnt__routes {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ci-cnt__routes-eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.5);
}
.ci-cnt__routes .ci-cnt__route {
    padding: 0.85rem 1rem;
    grid-template-columns: 36px 1fr auto;
    gap: 0.85rem;
}
.ci-cnt__routes .ci-cnt__route-icon {
    width: 36px;
    height: 36px;
}
.ci-cnt__routes .ci-cnt__route-icon svg { width: 18px; height: 18px; }
.ci-cnt__routes .ci-cnt__route-title { font-size: 0.94rem; }
.ci-cnt__routes .ci-cnt__route-desc { font-size: 0.82rem; }

/* --- "What happens next" section --- */
.ci-cnt-next {
    background-color: var(--ci-color-bg);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-cnt-next__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}
.ci-cnt-next__eyebrow {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand);
}
.ci-cnt-next h2.ci-cnt-next__title,
.ci-cnt-next__title {
    margin: 0 0 2rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.2;
    color: rgba(15, 23, 42, 0.95);
    letter-spacing: -0.015em;
}
.ci-cnt-next__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
}
@media (min-width: 768px) {
    .ci-cnt-next__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.ci-cnt-next__step {
    padding: 1.5rem 1.35rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.ci-cnt-next__num {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-cnt-next__step h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cnt-next__step p {
    margin: 0;
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.65);
}

/* ==========================================================================
   CONTACT MAP - Amsterdam office
   ========================================================================== */
.ci-cnt-map {
    background-color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.ci-cnt-map__inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 900px) {
    .ci-cnt-map__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
        gap: 2.5rem;
        align-items: start;
    }
}
.ci-cnt-map__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.5rem;
}
.ci-cnt-map__eyebrow {
    display: inline-block;
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand);
}
.ci-cnt-map__title {
    margin: 0 0 0.65rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cnt-map__address {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.7);
}
.ci-cnt-map__address strong {
    font-weight: 700;
    color: rgba(15, 23, 42, 0.9);
}
.ci-cnt-map__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border: 1px solid rgba(73, 134, 91, 0.25);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ci-transition), transform var(--ci-transition);
}
.ci-cnt-map__cta:hover {
    background-color: rgba(73, 134, 91, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
}
.ci-cnt-map__cta span[aria-hidden] {
    display: inline-block;
    transition: transform var(--ci-transition);
}
.ci-cnt-map__cta:hover span[aria-hidden] { transform: translateX(3px); }

.ci-cnt-map__canvas-wrap {
    position: relative;
    border-radius: var(--ci-radius-xl);
    overflow: hidden;
    background-color: #f7f8fa;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.12);
}
.ci-cnt-map__canvas {
    height: clamp(340px, 45vw, 480px);
    width: 100%;
    background-color: #f7f8fa;
}

/* Leaflet chrome refinements to match site tokens */
.ci-cnt-map .leaflet-control-zoom {
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
    border-radius: var(--ci-radius-md) !important;
    overflow: hidden;
    margin: 0 1rem 1rem 0 !important;
}
.ci-cnt-map .leaflet-control-zoom a {
    background-color: #ffffff !important;
    color: rgba(15, 23, 42, 0.8) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    font-family: var(--ci-font-sans) !important;
    font-size: 1.1rem !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    transition: background-color var(--ci-transition), color var(--ci-transition);
}
.ci-cnt-map .leaflet-control-zoom a:last-child { border-bottom: 0 !important; }
.ci-cnt-map .leaflet-control-zoom a:hover {
    background-color: var(--ci-color-brand-light) !important;
    color: var(--ci-color-brand-deep) !important;
}
.ci-cnt-map .leaflet-control-attribution {
    background-color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.15rem 0.55rem !important;
    font-size: 0.68rem !important;
    color: rgba(15, 23, 42, 0.55) !important;
    border-radius: 6px 0 0 0 !important;
}
.ci-cnt-map .leaflet-control-attribution a {
    color: var(--ci-color-brand-deep) !important;
    text-decoration: none;
}
.ci-cnt-map .leaflet-container { font-family: var(--ci-font-sans) !important; }

/* Popup */
.ci-cnt-map .leaflet-popup-content-wrapper {
    background-color: #ffffff !important;
    color: rgba(15, 23, 42, 0.9) !important;
    border-radius: var(--ci-radius-md) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15) !important;
    padding: 0 !important;
}
.ci-cnt-map .leaflet-popup-content {
    margin: 0.75rem 1rem !important;
    font-family: var(--ci-font-sans) !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}
.ci-cnt-map .ci-cnt-popup strong { color: var(--ci-color-brand-deep); }
.ci-cnt-map .leaflet-popup-tip { background-color: #ffffff !important; }

/* Custom marker */
.ci-cnt-marker-wrap { background: transparent !important; border: 0 !important; }
.ci-cnt-marker {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ci-cnt-marker__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--ci-color-brand);
    opacity: 0.35;
    animation: ci-cnt-marker-pulse 2.2s ease-out infinite;
}
.ci-cnt-marker__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
    border: 2px solid var(--ci-color-brand);
}
.ci-cnt-marker__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--ci-color-brand);
    box-shadow: 0 0 0 2px rgba(73, 134, 91, 0.15);
}
@keyframes ci-cnt-marker-pulse {
    0%   { transform: scale(0.7); opacity: 0.45; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ci-cnt-marker__pulse { animation: none; }
    .ci-cnt__human-dot { animation: none; }
}

/* =========================================================
   Ciralgo Privacy Policy ([ciralgo_privacy])
   Fully self-contained premium layout — hero + 8 sections
   with visual treatments (cards, flow, retention bars, etc).
   ========================================================= */

.ci-lp { background-color: #ffffff; color: var(--ci-color-text); }

/* --- Hero band --- */
.ci-lp__hero {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-lp__hero-inner {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ci-lp__hero .ci-article__back { margin-bottom: 1.25rem; }
.ci-lp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-lp__eyebrow svg { width: 14px; height: 14px; }
.ci-lp h1.ci-lp__title,
.ci-lp .ci-lp__title {
    margin: 0 auto 0.9rem !important;
    max-width: 640px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3.15rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-lp__sub {
    max-width: 620px;
    margin: 0 auto 1.25rem;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}
.ci-lp__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1.25rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.ci-lp__meta svg { width: 14px; height: 14px; }
.ci-lp__siblings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: 720px;
}
.ci-lp__sibling {
    padding: 0.4rem 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ci-transition),
                border-color var(--ci-transition),
                color var(--ci-transition);
}
.ci-lp__sibling:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.ci-lp__sibling.is-current {
    background-color: var(--ci-color-brand);
    border-color: var(--ci-color-brand);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(73, 134, 91, 0.35);
}

/* --- Section wrapper --- */
.ci-lp__section {
    background-color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-lp__section--pale { background-color: var(--ci-color-bg); }
.ci-lp__section--dark {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    background-image:
        radial-gradient(ellipse at top left,
            rgba(73, 134, 91, 0.35) 0%,
            rgba(73, 134, 91, 0) 55%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-lp__section-inner {
    max-width: 960px;
    margin: 0 auto;
}
.ci-lp__section-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-lp__section-eyebrow--on-dark {
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.ci-lp h2.ci-lp__section-title,
.ci-lp .ci-lp__section-title {
    margin: 0 0 0.75rem !important;
    max-width: 720px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.4vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ci-color-text) !important;
    text-align: left !important;
}
.ci-lp__section-title--on-dark { color: #ffffff !important; }
.ci-lp__section-sub {
    max-width: 640px;
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ci-color-text-subtle);
}
.ci-lp__section-sub-tight {
    max-width: 640px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ci-color-text-subtle);
}
.ci-lp__section-sub--on-dark { color: rgba(255, 255, 255, 0.82); }

/* --- Principles (4 cards) --- */
.ci-lp__pcards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 720px) { .ci-lp__pcards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1080px) { .ci-lp__pcards { grid-template-columns: repeat(4, 1fr); } }
.ci-lp__pcard {
    padding: 1.4rem 1.25rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-sm);
    transition: transform var(--ci-transition),
                border-color var(--ci-transition),
                box-shadow var(--ci-transition);
}
.ci-lp__pcard:hover {
    transform: translateY(-3px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: var(--ci-shadow-md);
}
.ci-lp__pcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.9rem;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-md);
}
.ci-lp__pcard-icon svg { width: 22px; height: 22px; }
.ci-lp__pcard h3 {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ci-color-text);
}
.ci-lp__pcard p {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}

/* --- What we collect (4 stacked data-item cards) --- */
.ci-lp__data-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.ci-lp__data-item {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 1.1rem;
    padding: 1.35rem 1.4rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    transition: transform var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-lp__data-item:hover {
    transform: translateX(2px);
    border-color: rgba(73, 134, 91, 0.35);
}
.ci-lp__data-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-lg);
}
.ci-lp__data-body h3 {
    margin: 0 0 0.35rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ci-color-text);
}
.ci-lp__data-body p {
    margin: 0 0 0.75rem;
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--ci-color-text-subtle);
}
.ci-lp__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ci-lp__tag {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ci-color-text);
    background-color: var(--ci-color-bg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
}

/* --- How we use it (checklist) --- */
.ci-lp__uses {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
}
.ci-lp__uses li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem 1.15rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
}
.ci-lp__use-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(73, 134, 91, 0.35);
}
.ci-lp__use-check svg { width: 15px; height: 15px; }
.ci-lp__uses li div { min-width: 0; }
.ci-lp__uses li strong {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ci-color-text);
    margin-bottom: 0.15rem;
}
.ci-lp__uses li span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ci-color-text-subtle);
}

/* --- Data flow diagram --- */
.ci-lp__flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ci-radius-xl);
}
@media (min-width: 820px) {
    .ci-lp__flow {
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
    }
}
.ci-lp__flow-node {
    padding: 1.25rem 1rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ci-radius-lg);
    text-align: center;
}
.ci-lp__flow-node--star {
    background-color: rgba(73, 134, 91, 0.2);
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px rgba(73, 134, 91, 0.12);
}
.ci-lp__flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.6rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--ci-radius-md);
}
.ci-lp__flow-icon svg { width: 22px; height: 22px; }
.ci-lp__flow-node strong {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.975rem;
    color: #ffffff;
    margin-bottom: 0.25rem;
}
.ci-lp__flow-node span {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}
.ci-lp__flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}
@media (min-width: 820px) {
    .ci-lp__flow-arrow { transform: none; }
}
.ci-lp__flow-arrow svg { width: 40px; height: 24px; }
.ci-lp__flow-note {
    margin: 1.25rem 0 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    font-style: italic;
    text-align: center;
}

/* --- Rights grid --- */
.ci-lp__rights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 720px) { .ci-lp__rights { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .ci-lp__rights { grid-template-columns: repeat(3, 1fr); } }
.ci-lp__right {
    padding: 1.25rem 1.25rem 1.35rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    transition: transform var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-lp__right:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.35);
}
.ci-lp__right-num {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-lp__right h3 {
    margin: 0 0 0.35rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ci-color-text);
}
.ci-lp__right p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ci-color-text-subtle);
}

/* --- Retention bars --- */
.ci-lp__retention {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
}
.ci-lp__retention-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    align-items: center;
}
.ci-lp__retention-row:last-child { border-bottom: 0; }
@media (min-width: 720px) {
    .ci-lp__retention-row {
        grid-template-columns: 220px 1fr auto;
        gap: 1.25rem;
    }
}
.ci-lp__retention-what strong {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ci-color-text);
}
.ci-lp__retention-what span {
    display: block;
    font-size: 0.8125rem;
    color: var(--ci-color-text-subtle);
    margin-top: 0.15rem;
}
.ci-lp__retention-bar {
    height: 8px;
    background-color: var(--ci-color-bg);
    border-radius: 999px;
    overflow: hidden;
}
.ci-lp__retention-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,
        var(--ci-color-brand) 0%,
        var(--ci-color-brand-dark) 100%);
    border-radius: 999px;
}
.ci-lp__retention-when {
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ci-color-brand-dark);
    white-space: nowrap;
}

/* --- Link card (sub-processors preview) --- */
.ci-lp__linkcard {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.35rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-xl);
    text-decoration: none;
    color: var(--ci-color-text);
    transition: transform var(--ci-transition),
                border-color var(--ci-transition),
                box-shadow var(--ci-transition);
}
.ci-lp__linkcard:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.4);
    box-shadow: var(--ci-shadow-md);
}
.ci-lp__linkcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: var(--ci-radius-lg);
}
.ci-lp__linkcard-icon svg { width: 28px; height: 28px; }
.ci-lp__linkcard-body strong {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ci-color-text);
    margin-bottom: 0.15rem;
}
.ci-lp__linkcard-body span {
    display: block;
    font-size: 0.9rem;
    color: var(--ci-color-text-subtle);
    line-height: 1.5;
}
.ci-lp__linkcard-arrow {
    font-family: var(--ci-font-sans);
    font-size: 1.3rem;
    color: var(--ci-color-brand-dark);
    transition: transform var(--ci-transition);
}
.ci-lp__linkcard:hover .ci-lp__linkcard-arrow { transform: translateX(3px); }

/* --- Security badges --- */
.ci-lp__badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 640px) { .ci-lp__badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ci-lp__badges { grid-template-columns: repeat(3, 1fr); } }
.ci-lp__badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-md);
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ci-color-text);
}
.ci-lp__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px rgba(73, 134, 91, 0.18);
    flex: 0 0 auto;
}

/* --- Contact CTA --- */
.ci-lp__contact {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
    background-image:
        radial-gradient(ellipse at top left,
            rgba(73, 134, 91, 0.35) 0%,
            rgba(73, 134, 91, 0) 55%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}
.ci-lp__contact-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.ci-lp__contact-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-lp h2.ci-lp__contact-title,
.ci-lp .ci-lp__contact-title {
    margin: 0 auto 0.85rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff !important;
    text-align: center !important;
}
.ci-lp__contact-sub {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}
.ci-lp__contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.ci-lp__contact .ci-btn--primary {
    background-color: #ffffff;
    color: var(--ci-color-brand-deep);
    border-color: #ffffff;
}
.ci-lp__contact .ci-btn--primary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-deep);
}
.ci-lp__contact .ci-btn--secondary {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}
.ci-lp__contact .ci-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}
.ci-lp__contact-address {
    margin: 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .ci-lp__pcard, .ci-lp__data-item, .ci-lp__right, .ci-lp__linkcard {
        transition: none;
    }
    .ci-lp__pcard:hover, .ci-lp__data-item:hover, .ci-lp__right:hover, .ci-lp__linkcard:hover {
        transform: none;
    }
}

/* =========================================================
   Legal & Trust page template (page-legal.php)
   Premium layout for Privacy, Terms, DPA, Cookie policy, etc.
   ========================================================= */

.ci-legal {
    background-color: #ffffff;
    color: var(--ci-color-text);
}

/* --- Hero band --- */
.ci-legal__hero {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    background-image:
        radial-gradient(ellipse at top left,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px, transparent 10px);
}

.ci-legal__hero-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ci-legal__hero .ci-article__back {
    margin-bottom: 1.25rem;
}

.ci-legal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-legal__eyebrow svg { width: 14px; height: 14px; }

.ci-legal h1.ci-legal__title,
.ci-legal .ci-legal__title {
    margin: 0 auto 1rem !important;
    max-width: 780px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    text-align: center !important;
}

.ci-legal__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}
.ci-legal__last-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.ci-legal__last-updated svg { width: 14px; height: 14px; }

/* --- Sibling doc navigation --- */
.ci-legal__siblings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    max-width: 720px;
}
.ci-legal__sibling {
    padding: 0.4rem 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ci-transition),
                border-color var(--ci-transition),
                color var(--ci-transition);
}
.ci-legal__sibling:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}
.ci-legal__sibling.is-current {
    background-color: var(--ci-color-brand);
    border-color: var(--ci-color-brand);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(73, 134, 91, 0.35);
}

/* --- Body layout with sticky TOC --- */
.ci-legal__body-wrap {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-legal__body-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1080px) {
    .ci-legal__body-inner {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 3.5rem;
    }
}

/* TOC */
.ci-legal__toc { display: none; }
@media (min-width: 1080px) {
    .ci-legal__toc {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: start;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}
.ci-legal__toc-title {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-text-subtle);
}
.ci-legal__toc-list {
    list-style: none;
    padding: 0 0 0 0.75rem;
    margin: 0;
    border-left: 2px solid rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ci-legal__toc-list a {
    display: block;
    padding: 0.15rem 0;
    font-family: var(--ci-font-sans);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ci-color-text-subtle);
    text-decoration: none;
    transition: color var(--ci-transition), transform var(--ci-transition);
}
.ci-legal__toc-list a:hover { color: var(--ci-color-brand-dark); }
.ci-legal__toc-list a.is-active {
    color: var(--ci-color-brand-dark);
    font-weight: 600;
    transform: translateX(2px);
}

/* --- Body typography (legal-optimised: readable, spacious) --- */
.ci-legal__body {
    max-width: 720px;
    font-family: var(--ci-font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ci-color-text);
}
.ci-legal__body > * + * { margin-top: 1.15rem; }

.ci-legal__body h2 {
    margin-top: 3rem !important;
    margin-bottom: 0.75rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    scroll-margin-top: 6rem;
    counter-increment: ci-legal-h2;
    position: relative;
}

/* Numbered section labels */
.ci-legal__body {
    counter-reset: ci-legal-h2;
}
.ci-legal__body h2::before {
    content: counter(ci-legal-h2, decimal-leading-zero);
    display: inline-block;
    margin-right: 0.75rem;
    padding: 0.15rem 0.55rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
    vertical-align: middle;
}

.ci-legal__body h3 {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--ci-color-text) !important;
    scroll-margin-top: 6rem;
}

.ci-legal__body p { margin: 0 0 1.15rem; }
.ci-legal__body a {
    color: var(--ci-color-brand-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.ci-legal__body a:hover { color: var(--ci-color-brand); }
.ci-legal__body strong { font-weight: 700; color: var(--ci-color-text); }
.ci-legal__body em { font-style: italic; }
.ci-legal__body ul,
.ci-legal__body ol {
    margin: 0 0 1.15rem;
    padding-left: 1.4rem;
}
.ci-legal__body li { margin: 0 0 0.4rem; }

.ci-legal__body blockquote {
    margin: 1.5rem 0;
    padding: 1.15rem 1.25rem;
    border-left: 4px solid var(--ci-color-brand);
    background: linear-gradient(135deg,
        var(--ci-color-brand-light) 0%,
        rgba(236, 253, 245, 0.4) 100%);
    border-radius: 0 var(--ci-radius-lg) var(--ci-radius-lg) 0;
    color: var(--ci-color-text);
    font-size: 1rem;
}
.ci-legal__body blockquote p:last-child { margin-bottom: 0; }

.ci-legal__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
}
.ci-legal__body th,
.ci-legal__body td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: top;
}
.ci-legal__body th {
    background-color: var(--ci-color-bg);
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--ci-color-text);
}
.ci-legal__body tr:last-child td { border-bottom: 0; }

.ci-legal__body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.05rem 0.4rem;
    background-color: rgba(15, 23, 42, 0.05);
    border-radius: 4px;
    color: var(--ci-color-brand-dark);
}

.ci-legal__body hr {
    margin: 2rem 0;
    border: 0;
    height: 1px;
    background-color: rgba(15, 23, 42, 0.08);
}

/* --- Contact block at the bottom --- */
.ci-legal__contact {
    background-color: var(--ci-color-bg);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ci-legal__contact-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.ci-legal__contact-eyebrow {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.65rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-legal__contact h2.ci-legal__contact-title,
.ci-legal__contact .ci-legal__contact-title {
    margin: 0 auto 0.75rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    letter-spacing: -0.015em;
    color: var(--ci-color-text) !important;
    text-align: center !important;
}
.ci-legal__contact-sub {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ci-color-text-subtle);
}
.ci-legal__contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.ci-legal__contact .ci-btn--secondary {
    background-color: #ffffff;
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}
.ci-legal__contact .ci-btn--secondary:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
}

/* --- Pagination --- */
.ci-cat-pagination {
    margin-top: 2.5rem;
    text-align: center;
}
.ci-cat-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.85rem;
    margin: 0 0.2rem;
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ci-color-text-subtle);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--ci-radius-md);
    text-decoration: none;
    transition: background-color var(--ci-transition),
                color var(--ci-transition),
                border-color var(--ci-transition);
}
.ci-cat-pagination .page-numbers.current {
    background-color: var(--ci-color-brand);
    color: #ffffff;
    border-color: var(--ci-color-brand);
}
.ci-cat-pagination a.page-numbers:hover {
    background-color: var(--ci-color-brand-light);
    color: var(--ci-color-brand-dark);
    border-color: var(--ci-color-brand);
}

/* ==========================================================================
   TOOLS - SHARED HERO
   ========================================================================== */
.ci-tool-hero {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    background-color: var(--ci-color-brand-deep);
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.045) 0px,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px, transparent 10px);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.ci-tool-hero__inner {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.ci-tool-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.5rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.ci-tool-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ci-color-brand);
}
.ci-tool-hero__title {
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.ci-tool-hero__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--ci-color-brand-light);
}
.ci-tool-hero__sub {
    margin: 0 auto 1.75rem;
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
.ci-tool-hero__badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ci-tool-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}
.ci-tool-hero__badge svg {
    width: 14px;
    height: 14px;
    color: var(--ci-color-brand-light);
}

/* ==========================================================================
   ANONYMIZER - TOOL PANEL
   ========================================================================== */
.ci-anon-tool {
    background-color: #f7f8fa;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
.ci-anon-tool__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.ci-anon-tool__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.ci-anon-tool__label {
    display: inline-block;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
    margin-right: 0.4rem;
}
.ci-anon-tool__detectors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.ci-anon-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.75);
    background-color: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--ci-transition), color var(--ci-transition), border-color var(--ci-transition);
    user-select: none;
}
.ci-anon-chip:hover {
    background-color: rgba(15, 23, 42, 0.07);
}
.ci-anon-chip input {
    accent-color: var(--ci-color-brand);
    margin: 0;
    width: 12px;
    height: 12px;
}
.ci-anon-chip:has(input:checked) {
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-color: var(--ci-color-brand);
}
.ci-anon-tool__options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ci-anon-tool__opt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ci-font-sans);
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.75);
    cursor: pointer;
}
.ci-anon-tool__opt input {
    accent-color: var(--ci-color-brand);
}
.ci-anon-tool__custom {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.ci-anon-tool__custom-input {
    flex: 1;
    min-width: 220px;
    padding: 0.55rem 0.8rem;
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.9);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: var(--ci-radius-md);
}
.ci-anon-tool__custom-input:focus {
    outline: none;
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px var(--ci-color-brand-light);
}
.ci-anon-tool__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (min-width: 900px) {
    .ci-anon-tool__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
}
.ci-anon-tool__pane {
    display: flex;
    flex-direction: column;
    background-color: #fbfbfd;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
}
.ci-anon-tool__pane--out {
    background-color: #f0f8f3;
    border-color: rgba(73, 134, 91, 0.25);
}
.ci-anon-tool__pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background-color: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ci-anon-tool__pane--out .ci-anon-tool__pane-head {
    background-color: rgba(73, 134, 91, 0.08);
    border-bottom-color: rgba(73, 134, 91, 0.18);
}
.ci-anon-tool__pane-title {
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.65);
}
.ci-anon-tool__pane--out .ci-anon-tool__pane-title {
    color: var(--ci-color-brand-deep);
}
.ci-anon-tool__pane-actions {
    display: flex;
    gap: 0.4rem;
}
.ci-anon-btn {
    padding: 0.32rem 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.8);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--ci-transition), color var(--ci-transition), border-color var(--ci-transition);
}
.ci-anon-btn:hover {
    background-color: rgba(15, 23, 42, 0.05);
}
.ci-anon-btn--primary {
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-color: var(--ci-color-brand);
}
.ci-anon-btn--primary:hover {
    background-color: var(--ci-color-brand-deep);
    border-color: var(--ci-color-brand-deep);
}
.ci-anon-tool__textarea {
    width: 100%;
    min-height: 320px;
    padding: 1rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.9);
    background-color: transparent;
    border: 0;
    resize: vertical;
    outline: none;
}
.ci-anon-tool__textarea:focus {
    outline: none;
}
.ci-anon-tool__textarea--out {
    color: rgba(15, 23, 42, 0.88);
}
.ci-anon-tool__stats {
    margin-top: 1rem;
    padding: 0.65rem 0.95rem;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.7);
    background-color: rgba(15, 23, 42, 0.03);
    border-radius: var(--ci-radius-md);
    text-align: center;
}

/* ==========================================================================
   ANONYMIZER - HOW IT WORKS
   ========================================================================== */
.ci-anon-how {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-anon-how__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.ci-anon-how__eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand);
}
.ci-anon-how__title {
    margin: 0 0 2rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: rgba(15, 23, 42, 0.95);
}
.ci-anon-how__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 768px) {
    .ci-anon-how__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.ci-anon-how__card {
    padding: 1.5rem;
    background-color: #f7f8fa;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--ci-radius-lg);
}
.ci-anon-how__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.8rem;
    color: var(--ci-color-brand);
    background-color: var(--ci-color-brand-light);
    border-radius: 10px;
}
.ci-anon-how__icon svg {
    width: 20px;
    height: 20px;
}
.ci-anon-how__card h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(15, 23, 42, 0.95);
}
.ci-anon-how__card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.68);
}

/* ==========================================================================
   ANONYMIZER - CTA
   ========================================================================== */
.ci-anon-cta {
    background-color: #0f172a;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    color: #ffffff;
    text-align: center;
}
.ci-anon-cta__inner {
    max-width: 720px;
    margin: 0 auto;
}
.ci-anon-cta__title {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: #ffffff;
}
.ci-anon-cta__sub {
    margin: 0 auto 1.75rem;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
.ci-anon-cta__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* ==========================================================================
   ROI CALCULATOR
   ========================================================================== */
.ci-roi-calc {
    background-color: #f7f8fa;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
.ci-roi-calc__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.ci-roi-calc__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 960px) {
    .ci-roi-calc__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2rem;
        align-items: start;
    }
}

/* Inputs card */
.ci-roi-inputs {
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
.ci-roi-inputs__title {
    margin: 0 0 1.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
}
.ci-roi-field {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ci-roi-field:last-child { border-bottom: 0; }
.ci-roi-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: rgba(15, 23, 42, 0.9);
}
.ci-roi-field__control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ci-roi-field__control input[type="number"] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.95);
    background-color: #fbfbfd;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: var(--ci-radius-md);
    text-align: right;
}
.ci-roi-field__control input[type="number"]:focus {
    outline: none;
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px var(--ci-color-brand-light);
    background-color: #ffffff;
}
.ci-roi-field__unit {
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.55);
    white-space: nowrap;
}
.ci-roi-field input[type="range"] {
    width: 100%;
    margin-top: 0.6rem;
    accent-color: var(--ci-color-brand);
    cursor: pointer;
}

/* Results card */
.ci-roi-results {
    position: sticky;
    top: 1rem;
}
.ci-roi-results__card {
    padding: clamp(1.5rem, 3vw, 2rem);
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: #ffffff;
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.15);
}
.ci-roi-results__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
}
.ci-roi-results__hero {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ci-roi-results__hero-label {
    display: block;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.3rem;
}
.ci-roi-results__hero-value {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    transition: color var(--ci-transition);
}
.ci-roi-results__hero-value--neg {
    color: #fca5a5;
}
.ci-roi-results__hero-note {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}
.ci-roi-results__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.ci-roi-stat {
    padding: 0.75rem 0.85rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ci-radius-md);
}
.ci-roi-stat__label {
    display: block;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.2rem;
}
.ci-roi-stat__value {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
}

/* Chart */
.ci-roi-chart {
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: var(--ci-radius-md);
}
.ci-roi-chart__row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}
.ci-roi-chart__label {
    font-family: var(--ci-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
}
.ci-roi-chart__track {
    height: 10px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.ci-roi-chart__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ci-color-brand), var(--ci-color-brand-light));
    border-radius: 999px;
    transition: width 250ms ease;
}
.ci-roi-chart__val {
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

.ci-roi-results__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.ci-roi-results__ctas .ci-btn {
    flex: 1;
    min-width: 160px;
    text-align: center;
}
.ci-btn--ghost {
    color: #ffffff;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.ci-btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* Assumptions */
.ci-roi-assumptions {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-roi-assumptions__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.ci-roi-assumptions__eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand);
}
.ci-roi-assumptions__title {
    margin: 0 0 2rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: rgba(15, 23, 42, 0.95);
}
.ci-roi-assumptions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 768px) {
    .ci-roi-assumptions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1100px) {
    .ci-roi-assumptions__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ci-roi-assumption {
    padding: 1.5rem;
    background-color: #f7f8fa;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--ci-radius-lg);
}
.ci-roi-assumption__num {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-roi-assumption h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(15, 23, 42, 0.95);
}
.ci-roi-assumption p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.68);
}

@media print {
    .ci-tool-hero, .ci-roi-assumptions, .ci-anon-cta,
    #kadence-header, .site-header, .site-footer, .ci-roi-results__ctas {
        display: none !important;
    }
    .ci-roi-results__card {
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #ccc;
        box-shadow: none !important;
    }
    .ci-roi-results__hero-label, .ci-roi-results__hero-note,
    .ci-roi-stat__label, .ci-roi-chart__label {
        color: #64748b !important;
    }
    .ci-roi-results__hero-value, .ci-roi-stat__value, .ci-roi-chart__val {
        color: #0f172a !important;
    }
    .ci-roi-eyebrow, .ci-roi-results__eyebrow { color: var(--ci-color-brand-deep) !important; }
}

/* ==========================================================================
   LLM COMPARATOR
   ========================================================================== */
.ci-cmp-tool {
    background-color: #f7f8fa;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
.ci-cmp-tool__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.ci-cmp-inputs {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    margin-bottom: 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
.ci-cmp-inputs__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 900px) {
    .ci-cmp-inputs__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.25rem;
    }
    .ci-cmp-field--prompt { grid-column: 1 / -1; }
    .ci-cmp-inputs__grid > .ci-cmp-field:not(.ci-cmp-field--prompt) { grid-column: span 1; }
}
@media (min-width: 1100px) {
    .ci-cmp-inputs__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    .ci-cmp-field--prompt { grid-column: 1 / span 1; grid-row: 1 / span 2; }
}
.ci-cmp-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ci-cmp-field label {
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.9);
}
.ci-cmp-field textarea,
.ci-cmp-field input[type="number"] {
    padding: 0.6rem 0.8rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    color: rgba(15, 23, 42, 0.95);
    background-color: #fbfbfd;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: var(--ci-radius-md);
    outline: none;
    transition: border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-cmp-field textarea {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 120px;
}
.ci-cmp-field textarea:focus,
.ci-cmp-field input[type="number"]:focus {
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px var(--ci-color-brand-light);
    background-color: #ffffff;
}
.ci-cmp-field__hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.6);
}
.ci-cmp-field__manual { margin-top: 0.4rem; }
.ci-cmp-linkbtn {
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ci-color-brand);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ci-cmp-linkbtn:hover { color: var(--ci-color-brand-deep); }

/* Table */
.ci-cmp-table-wrap {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    overflow-x: auto;
}
.ci-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ci-font-sans);
    font-size: 0.92rem;
    min-width: 720px;
}
.ci-cmp-table thead th {
    padding: 0.9rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: rgba(15, 23, 42, 0.6);
    background-color: #f7f8fa;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.ci-cmp-table__num { text-align: right; }
.ci-cmp-table__num--big {
    font-weight: 700;
    font-size: 1.02rem;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cmp-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.8);
    vertical-align: middle;
}
.ci-cmp-table tbody tr:last-child td { border-bottom: 0; }
.ci-cmp-row--highlight td {
    background-color: var(--ci-color-brand-light);
}
.ci-cmp-row--best td {
    box-shadow: inset 3px 0 0 var(--ci-color-brand);
}
.ci-cmp-model {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
}
.ci-cmp-model__provider {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
}
.ci-cmp-model__name {
    font-weight: 700;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cmp-badge {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
}
.ci-cmp-badge--best {
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border: 1px solid var(--ci-color-brand);
}
.ci-cmp-badge--highlight {
    color: #ffffff;
    background-color: var(--ci-color-brand);
    margin-left: 0.4rem;
}
.ci-cmp-note {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.6);
    background-color: rgba(15, 23, 42, 0.03);
    border-radius: var(--ci-radius-md);
    text-align: center;
}

/* Why routing */
.ci-cmp-why {
    background-color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.ci-cmp-why__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.ci-cmp-why__eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand);
}
.ci-cmp-why__title {
    margin: 0 0 2rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cmp-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 768px) {
    .ci-cmp-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.ci-cmp-why__card {
    padding: 1.5rem;
    background-color: #f7f8fa;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--ci-radius-lg);
}
.ci-cmp-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.8rem;
    color: var(--ci-color-brand);
    background-color: var(--ci-color-brand-light);
    border-radius: 10px;
}
.ci-cmp-why__icon svg { width: 20px; height: 20px; }
.ci-cmp-why__card h3 {
    margin: 0 0 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(15, 23, 42, 0.95);
}
.ci-cmp-why__card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.68);
}

/* ==========================================================================
   AI MATURITY ASSESSMENT
   ========================================================================== */
.ci-mty-quiz {
    background-color: #f7f8fa;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}
.ci-mty-quiz__inner {
    max-width: 820px;
    margin: 0 auto;
}
.ci-mty-axis {
    padding: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1.25rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
.ci-mty-axis__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ci-mty-axis__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 999px;
}
.ci-mty-axis__title {
    margin: 0 0 0.2rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.25rem;
    color: rgba(15, 23, 42, 0.95);
}
.ci-mty-axis__blurb {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.65);
}
.ci-mty-question {
    padding: 1rem 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
}
.ci-mty-question:last-child { border-bottom: 0; padding-bottom: 0; }
.ci-mty-question__text {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: rgba(15, 23, 42, 0.9);
    line-height: 1.4;
}
.ci-mty-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ci-mty-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background-color: #fbfbfd;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--ci-radius-md);
    cursor: pointer;
    transition: background-color var(--ci-transition), border-color var(--ci-transition);
}
.ci-mty-option:hover {
    background-color: #f0f8f3;
    border-color: rgba(73, 134, 91, 0.3);
}
.ci-mty-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.ci-mty-option__dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(15, 23, 42, 0.2);
    border-radius: 50%;
    background-color: #ffffff;
    transition: border-color var(--ci-transition), background-color var(--ci-transition);
    position: relative;
}
.ci-mty-option input[type="radio"]:checked ~ .ci-mty-option__dot {
    border-color: var(--ci-color-brand);
    background-color: var(--ci-color-brand);
    box-shadow: inset 0 0 0 3px #ffffff;
}
.ci-mty-option input[type="radio"]:focus-visible ~ .ci-mty-option__dot {
    outline: 3px solid var(--ci-color-brand-light);
    outline-offset: 2px;
}
.ci-mty-option:has(input:checked) {
    background-color: var(--ci-color-brand-light);
    border-color: var(--ci-color-brand);
}
.ci-mty-option__text {
    font-family: var(--ci-font-sans);
    font-size: 0.92rem;
    line-height: 1.4;
    color: rgba(15, 23, 42, 0.85);
}

/* Progress + CTA */
.ci-mty-progress {
    position: sticky;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
    z-index: 10;
}
.ci-mty-progress__bar {
    flex: 1;
    min-width: 140px;
    height: 8px;
    background-color: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.ci-mty-progress__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ci-color-brand), var(--ci-color-brand-deep));
    border-radius: 999px;
    transition: width 250ms ease;
}
.ci-mty-progress__label {
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    white-space: nowrap;
}
.ci-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Results */
.ci-mty-results {
    margin-top: 2rem;
}
.ci-mty-results__card {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: #ffffff;
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
}
.ci-mty-results__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
}
.ci-mty-results__hero {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}
.ci-mty-results__level {
    display: block;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.1;
}
.ci-mty-results__score {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ci-color-brand-light);
}
.ci-mty-results__score-of {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    margin-left: 0.2rem;
}
.ci-mty-results__blurb {
    max-width: 560px;
    margin: 0.8rem auto 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
.ci-mty-axes-chart {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ci-mty-axis-bar {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}
.ci-mty-axis-bar__label {
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}
.ci-mty-axis-bar__track {
    height: 10px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.ci-mty-axis-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ci-color-brand), var(--ci-color-brand-light));
    border-radius: 999px;
    transition: width 400ms ease;
}
.ci-mty-axis-bar__val {
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    white-space: nowrap;
}
.ci-mty-recs {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ci-radius-md);
}
.ci-mty-recs__title {
    margin: 0 0 0.75rem;
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
}
.ci-mty-recs__list {
    margin: 0;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
}
.ci-mty-recs__list li {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.55;
}
.ci-mty-recs__list li:last-child { margin-bottom: 0; }
.ci-mty-recs__list strong {
    color: #ffffff;
    font-weight: 700;
}
.ci-mty-results__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}
.ci-mty-results__ctas .ci-btn {
    flex: 1;
    min-width: 160px;
    text-align: center;
}

/* ==========================================================================
   TOOL TEASER (reusable card)
   ========================================================================== */
.ci-tteaser {
    display: block;
    margin: clamp(2rem, 4vw, 3rem) auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    max-width: 1100px;
}
.ci-tteaser__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--ci-radius-lg);
    border: 1px solid transparent;
}
@media (max-width: 720px) {
    .ci-tteaser__inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
}
.ci-tteaser__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex: 0 0 auto;
}
.ci-tteaser__icon svg {
    width: 26px;
    height: 26px;
}
.ci-tteaser__body {
    min-width: 0;
}
.ci-tteaser__eyebrow {
    display: inline-block;
    margin-bottom: 0.3rem;
    font-family: var(--ci-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.ci-tteaser__title {
    margin: 0 0 0.3rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.3;
}
.ci-tteaser__blurb {
    margin: 0;
    font-family: var(--ci-font-sans);
    font-size: 0.92rem;
    line-height: 1.5;
}
.ci-tteaser__cta { flex: 0 0 auto; }
.ci-tteaser__cta .ci-btn {
    white-space: nowrap;
}
.ci-tteaser__cta .ci-btn span[aria-hidden] {
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform var(--ci-transition);
}
.ci-tteaser__cta .ci-btn:hover span[aria-hidden] {
    transform: translateX(3px);
}

/* Light variant */
.ci-tteaser--light .ci-tteaser__inner {
    background: linear-gradient(135deg, #ffffff 0%, var(--ci-color-brand-light) 100%);
    border-color: rgba(73, 134, 91, 0.2);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
.ci-tteaser--light .ci-tteaser__icon {
    color: #ffffff;
    background-color: var(--ci-color-brand);
}
.ci-tteaser--light .ci-tteaser__eyebrow { color: var(--ci-color-brand-deep); }
.ci-tteaser--light .ci-tteaser__title { color: rgba(15, 23, 42, 0.95); }
.ci-tteaser--light .ci-tteaser__blurb { color: rgba(15, 23, 42, 0.7); }

/* Dark variant */
.ci-tteaser--dark .ci-tteaser__inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(73, 134, 91, 0.18) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
}
.ci-tteaser--dark .ci-tteaser__icon {
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
}
.ci-tteaser--dark .ci-tteaser__eyebrow { color: var(--ci-color-brand-light); }
.ci-tteaser--dark .ci-tteaser__title { color: #ffffff; }
.ci-tteaser--dark .ci-tteaser__blurb { color: rgba(255, 255, 255, 0.7); }

/* Homepage: teasers now live INSIDE their parent sections. Override the base
   teaser margin so the visible gap is ~1cm. Also cut the section's own
   padding-bottom (and the next section's top-padding for the ROI slot) so
   the teaser card sits tight against surrounding content. */
.ci-ps > .ci-tteaser,
.ci-dm > .ci-tteaser {
    margin-top: 1rem;
    margin-bottom: 0;
}
.ci-ps:has(> .ci-tteaser),
.ci-dm:has(> .ci-tteaser) {
    padding-bottom: clamp(1.25rem, 2vw, 2rem);
}
/* Trust section (comes after Dimensions on the homepage) - trim its top padding
   so there is only ~1cm between the ROI teaser and the "Trust and compliance"
   eyebrow pill. */
.ci-tc {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   TOOLS HUB PAGE
   ========================================================================== */
.ci-hub-grid {
    background-color: #f7f8fa;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}
.ci-hub-grid__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 720px) {
    .ci-hub-grid__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
.ci-hub-card {
    display: block;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform var(--ci-transition), box-shadow var(--ci-transition), border-color var(--ci-transition);
}
.ci-hub-card:hover {
    transform: translateY(-4px);
    border-color: var(--ci-color-brand);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
    text-decoration: none;
}
.ci-hub-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 12px;
}
.ci-hub-card__icon svg {
    width: 26px;
    height: 26px;
}
.ci-hub-card__eyebrow {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-deep);
}
.ci-hub-card__title {
    margin: 0 0 0.6rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.25;
    color: rgba(15, 23, 42, 0.95);
}
.ci-hub-card__blurb {
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(15, 23, 42, 0.68);
}
.ci-hub-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border-radius: 999px;
    box-shadow: var(--ci-shadow-sm);
    transition: background-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-hub-card__cta span[aria-hidden] {
    transition: transform var(--ci-transition);
}
.ci-hub-card:hover .ci-hub-card__cta {
    background-color: var(--ci-color-brand-dark);
    box-shadow: var(--ci-shadow-md);
}
.ci-hub-card:hover .ci-hub-card__cta span[aria-hidden] {
    transform: translateX(4px);
}

/* ==========================================================================
   HOMEPAGE - PROXY LAYER FLOW DIAGRAM
   ========================================================================== */
.ci-flow {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    background-color: #ffffff;
    color: rgba(15, 23, 42, 0.9);
    overflow: hidden;
}
.ci-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 55%, rgba(73, 134, 91, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.ci-flow__inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}
.ci-flow__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border: 1px solid rgba(73, 134, 91, 0.25);
    border-radius: 999px;
}
.ci-flow__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ci-color-brand);
}
.ci-flow__title {
    margin: 0 0 0.85rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.65rem, 3.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: rgba(15, 23, 42, 0.95);
}
.ci-flow__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--ci-color-brand);
}
.ci-flow__sub {
    max-width: 620px;
    margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
    font-family: var(--ci-font-sans);
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.65);
}

/* --- Diagram frame --- */
.ci-flow__diagram {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.ci-flow__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.ci-flow__paths path {
    fill: none;
    stroke: url(#ci-flow-grad-in);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 6 8;
    animation: ci-flow-dash-in 4.5s linear infinite;
}
.ci-flow__paths--out path {
    stroke: url(#ci-flow-grad-out);
    animation: ci-flow-dash-out 4.5s linear infinite;
}
@keyframes ci-flow-dash-in {
    to { stroke-dashoffset: -56; }
}
@keyframes ci-flow-dash-out {
    to { stroke-dashoffset: -56; }
}

/* --- Grid layout --- */
.ci-flow__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
    z-index: 1;
}
.ci-flow__col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}
.ci-flow__col-label {
    display: block;
    margin-bottom: 0.15rem;
    font-family: var(--ci-font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.45);
    text-align: center;
}

/* --- Nodes --- */
.ci-flow__node {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform var(--ci-transition), border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-flow__node:hover {
    transform: translateX(2px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: 0 4px 14px rgba(73, 134, 91, 0.1);
}
.ci-flow__col--in .ci-flow__node:hover { transform: translateX(-2px); }
.ci-flow__node-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border-radius: 8px;
    flex: 0 0 auto;
}
.ci-flow__node-icon svg { width: 16px; height: 16px; }
.ci-flow__node-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    text-align: left;
}
.ci-flow__node-label {
    font-family: var(--ci-font-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-color-brand-deep);
}
.ci-flow__node-title {
    font-family: var(--ci-font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.95);
    line-height: 1.3;
}
.ci-flow__node-sub {
    font-family: var(--ci-font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.55);
}

/* --- Center hub --- */
.ci-flow__hub {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}
.ci-flow__hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.25rem 1.1rem;
    width: 100%;
    max-width: 200px;
    background: linear-gradient(180deg, #ffffff 0%, var(--ci-color-brand-light) 100%);
    border: 1px solid rgba(73, 134, 91, 0.3);
    border-radius: 16px;
    box-shadow:
        0 10px 30px -8px rgba(73, 134, 91, 0.25),
        0 0 0 4px rgba(73, 134, 91, 0.05);
    position: relative;
}
.ci-flow__hub-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ci-color-brand) 0%, var(--ci-color-brand-deep) 100%);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(73, 134, 91, 0.3);
    margin-bottom: 0.25rem;
}
.ci-flow__hub-mark svg,
.ci-flow__hub-mark img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
}
.ci-flow__hub-name {
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: rgba(15, 23, 42, 0.95);
}
.ci-flow__hub-tagline {
    font-family: var(--ci-font-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ci-color-brand-deep);
    margin-bottom: 0.55rem;
}
.ci-flow__hub-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    width: 100%;
}
.ci-flow__hub-action {
    padding: 0.3rem 0.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    color: var(--ci-color-brand-deep);
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(73, 134, 91, 0.22);
    border-radius: 6px;
}

/* --- Responsive: stack on smaller screens, hide the SVG lines --- */
@media (max-width: 900px) {
    .ci-flow__lines { display: none; }
    .ci-flow__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ci-flow__hub { min-height: 0; order: 2; }
    .ci-flow__col--in { order: 1; }
    .ci-flow__col--out { order: 3; }
    .ci-flow__hub-card { max-width: 100%; }
    .ci-flow__col-label { text-align: center; }
    .ci-flow__hub-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   MAILERLITE STATUS - shared across every ML form (footer + newsletter)
   ========================================================================== */
.ci-ml-status {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    line-height: 1.45;
    border-radius: 8px;
    transition: padding 150ms ease, background-color 150ms ease;
}
.ci-ml-status:empty { display: none; }
.ci-ml-status.is-loading {
    padding: 0.55rem 0.85rem;
    color: rgba(255, 255, 255, 0.72);
    background-color: rgba(255, 255, 255, 0.06);
}
.ci-ml-status.is-success {
    padding: 0.6rem 0.9rem;
    color: var(--ci-color-brand-deep);
    background-color: var(--ci-color-brand-light);
    border: 1px solid rgba(73, 134, 91, 0.3);
}
.ci-ml-status.is-error {
    padding: 0.6rem 0.9rem;
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
/* Light-context override for the standalone newsletter shortcode */
.ci-in-nl .ci-ml-status.is-loading {
    color: rgba(15, 23, 42, 0.7);
    background-color: rgba(15, 23, 42, 0.04);
}
.ci-in-nl .ci-ml-status.is-error {
    color: #b91c1c;
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

/* ==========================================================================
   ARTICLE PAGE TEMPLATE (page-article.php)
   Used by every content-marketing page synced through the pipeline.
   ========================================================================== */

.ci-ap { background-color: #ffffff; color: var(--ci-color-text); }

/* Reading progress bar */
.ci-reading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--ci-color-brand);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
}

/* --- Hero --- */
.ci-ap__hero {
    background-color: var(--ci-color-brand-deep);
    color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem);
    background-image:
        radial-gradient(ellipse at bottom right,
            rgba(73, 134, 91, 0.4) 0%,
            rgba(73, 134, 91, 0) 60%),
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.045) 0px,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px, transparent 10px);
}
.ci-ap__hero-inner {
    max-width: 820px;
    margin: 0 auto;
}
.ci-ap__crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
.ci-ap__crumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color var(--ci-transition);
}
.ci-ap__crumb a:hover { color: #ffffff; }
.ci-ap__crumb span[aria-current] { color: rgba(255, 255, 255, 0.5); }
.ci-ap__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.75rem;
    margin-bottom: 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ci-color-brand-light);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}
.ci-ap__eyebrow svg { width: 14px; height: 14px; }
.ci-ap h1.ci-ap__title,
.ci-ap .ci-ap__title {
    margin: 0 0 0.8rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #ffffff !important;
}
.ci-ap__standfirst {
    margin: 0 0 1.5rem;
    max-width: 640px;
    font-family: var(--ci-font-sans);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}
.ci-ap__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}
.ci-ap__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ci-ap__meta-item svg { width: 14px; height: 14px; opacity: 0.75; }
.ci-ap__meta-dot { opacity: 0.5; }

/* --- Body wrap with TOC --- */
.ci-ap__body-wrap {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 5vw, 4.5rem);
    background-color: #ffffff;
}
.ci-ap__body-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .ci-ap__body-inner {
        grid-template-columns: 220px minmax(0, 720px);
        gap: 3rem;
        justify-content: center;
    }
}
.ci-ap__toc {
    display: none;
}
@media (min-width: 1024px) {
    .ci-ap__toc {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: flex-start;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}
.ci-ap__toc-eyebrow {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.45);
}
.ci-ap__toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid rgba(15, 23, 42, 0.08);
}
.ci-ap__toc-list li {
    margin: 0;
    padding: 0;
}
.ci-ap__toc-list a {
    display: block;
    padding: 0.4rem 0 0.4rem 0.85rem;
    margin-left: -2px;
    font-family: var(--ci-font-sans);
    font-size: 0.88rem;
    line-height: 1.4;
    color: rgba(15, 23, 42, 0.6);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color var(--ci-transition), border-color var(--ci-transition);
}
.ci-ap__toc-list a:hover {
    color: var(--ci-color-brand-deep);
}
.ci-ap__toc-list a.is-active {
    color: var(--ci-color-brand-deep);
    font-weight: 600;
    border-left-color: var(--ci-color-brand);
}

/* --- Body typography --- */
.ci-ap__body {
    font-family: var(--ci-font-sans);
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(15, 23, 42, 0.87);
    min-width: 0;
}
.ci-ap__body > *:first-child { margin-top: 0; }
.ci-ap__body > *:last-child { margin-bottom: 0; }
.ci-ap__body p {
    margin: 0 0 1.35rem;
}
.ci-ap__body h2 {
    margin: 2.75rem 0 0.9rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: rgba(15, 23, 42, 0.95);
    scroll-margin-top: 5rem;
}
.ci-ap__body h3 {
    margin: 2rem 0 0.7rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
    color: rgba(15, 23, 42, 0.92);
    scroll-margin-top: 5rem;
}
.ci-ap__body a {
    color: var(--ci-color-brand-deep);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--ci-transition);
}
.ci-ap__body a:hover {
    color: var(--ci-color-brand);
}
.ci-ap__body strong { font-weight: 700; color: rgba(15, 23, 42, 0.95); }
.ci-ap__body em { font-style: italic; }
.ci-ap__body code {
    padding: 0.1rem 0.35rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background-color: rgba(15, 23, 42, 0.05);
    border-radius: 4px;
    color: var(--ci-color-brand-deep);
}
.ci-ap__body ul,
.ci-ap__body ol {
    margin: 0 0 1.35rem;
    padding-left: 1.6rem;
}
.ci-ap__body li {
    margin: 0 0 0.5rem;
    line-height: 1.65;
}
.ci-ap__body li > p { margin-bottom: 0.5rem; }
.ci-ap__body blockquote {
    margin: 1.75rem 0;
    padding: 0.6rem 0 0.6rem 1.2rem;
    border-left: 3px solid var(--ci-color-brand);
    color: rgba(15, 23, 42, 0.75);
    font-style: italic;
    background: none;
}
.ci-ap__body hr {
    margin: 2.5rem 0;
    border: 0;
    height: 1px;
    background-color: rgba(15, 23, 42, 0.08);
}
.ci-ap__body table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 1.75rem 0;
    border-collapse: collapse;
    font-size: 0.94rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: var(--ci-radius-md);
}
.ci-ap__body thead {
    background-color: rgba(15, 23, 42, 0.03);
}
.ci-ap__body th {
    padding: 0.75rem 0.9rem;
    text-align: left;
    font-family: var(--ci-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}
.ci-ap__body td {
    padding: 0.85rem 0.9rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.82);
}
.ci-ap__body tr:last-child td { border-bottom: 0; }
.ci-ap__body pre {
    margin: 1.75rem 0;
    padding: 1rem 1.15rem;
    background-color: #0f172a;
    color: #e2e8f0;
    border-radius: var(--ci-radius-md);
    overflow-x: auto;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}
.ci-ap__body pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}
.ci-ap__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ci-radius-md);
    margin: 1.5rem 0;
}

/* Anchor link icon on headings (subtle, appears on hover) */
.ci-ap__body h2[id],
.ci-ap__body h3[id] {
    position: relative;
}
.ci-ap__body h2[id]:hover::before,
.ci-ap__body h3[id]:hover::before {
    content: "#";
    position: absolute;
    left: -1.2rem;
    color: rgba(15, 23, 42, 0.25);
    font-weight: 500;
    text-decoration: none;
}

/* --- Related reading --- */
.ci-ap__related {
    background-color: var(--ci-color-bg);
    padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ci-ap__related-inner {
    max-width: 1120px;
    margin: 0 auto;
}
.ci-ap__related-eyebrow {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ci-color-brand);
}
.ci-ap__related h2.ci-ap__related-title,
.ci-ap__related .ci-ap__related-title {
    margin: 0 0 1.75rem !important;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    color: rgba(15, 23, 42, 0.95) !important;
}
.ci-ap__related-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 720px) {
    .ci-ap__related-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.ci-ap__related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.65rem;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: var(--ci-radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transition: transform var(--ci-transition), border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-ap__related-card:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 134, 91, 0.35);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
.ci-ap__related-card-arrow {
    position: absolute;
    top: 1.15rem;
    right: 1.25rem;
    font-family: var(--ci-font-sans);
    font-size: 1.1rem;
    color: rgba(15, 23, 42, 0.35);
    transition: transform var(--ci-transition), color var(--ci-transition);
}
.ci-ap__related-card:hover .ci-ap__related-card-arrow {
    color: var(--ci-color-brand);
    transform: translateX(3px);
}
.ci-ap__related h3.ci-ap__related-card-title,
.ci-ap__related .ci-ap__related-card-title {
    margin: 0 0 0.75rem !important;
    padding-right: 1.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
    color: rgba(15, 23, 42, 0.95) !important;
}
.ci-ap__related-card-meta {
    margin-top: auto;
    font-family: var(--ci-font-sans);
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.55);
}

/* ==========================================================================
   WAITLIST - full-bleed pre-launch landing ([ciralgo_waitlist])
   ========================================================================== */

/* Hide the WordPress page title when this shortcode is on the page. */
body.page-slug-waitlist .entry-header,
body.page-slug-waitlist header.entry-header,
body.page-slug-waitlist .entry-hero,
body.page-slug-waitlist .site-main > article > .entry-header,
body.page-slug-waitlist .wp-block-post-title,
body.page-slug-waitlist h1.entry-title { display: none !important; }

/* Strip the theme's content-column constraints so the hero can go edge-to-edge. */
body.page-slug-waitlist .entry-content,
body.page-slug-waitlist .content-area,
body.page-slug-waitlist .site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }

.ci-wait {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    color: #ffffff;
    background-color: var(--ci-color-brand-deep, #2e5a3e);
    background-image:
        radial-gradient(ellipse at bottom right, rgba(73,134,91,0.45) 0%, rgba(73,134,91,0) 60%),
        radial-gradient(ellipse at top left,     rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 10px);
    overflow: hidden;
}
.ci-wait__inner {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.ci-wait__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.95rem;
    margin-bottom: 1.5rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
}
.ci-wait__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
}
.ci-wait__title {
    margin: 0 0 1.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 5.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #ffffff;
}
.ci-wait__sub {
    margin: 0 auto 2.25rem;
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.82);
}
.ci-wait__form {
    max-width: 520px;
    margin: 0 auto 2rem;
    padding: 0.5rem;
    background-color: rgba(255,255,255,0.96);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.ci-wait__label {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.ci-wait__row {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
    padding: 0.25rem;
}
.ci-wait__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 1rem;
    font-family: var(--ci-font-sans);
    font-size: 1rem;
    color: #1e293b;
    background-color: transparent;
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ci-wait__input:focus {
    border-color: var(--ci-color-brand);
    box-shadow: 0 0 0 3px rgba(73,134,91,0.15);
}
.ci-wait__btn {
    flex: 0 0 auto;
    padding: 0.85rem 1.4rem;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--ci-color-brand);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.ci-wait__btn:hover {
    background-color: var(--ci-color-brand-dark, #3e6b4b);
}
.ci-wait__btn:active {
    transform: translateY(1px);
}
.ci-wait__points {
    max-width: 520px;
    margin: 0 auto 1.75rem;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.82);
}
.ci-wait__points li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}
.ci-wait__points svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: rgba(255,255,255,0.9);
}
.ci-wait__contact {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}
.ci-wait__contact a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ci-wait__contact a:hover { color: rgba(255,255,255,0.85); }

@media (max-width: 480px) {
    .ci-wait__row { flex-direction: column; }
}
@media (min-width: 640px) {
    .ci-wait__points { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 0.88rem; }
    .ci-wait__points li { justify-content: flex-start; }
}

/* ==========================================================================
   ABOUT PAGE ([ciralgo_about])
   ========================================================================== */

/* Hide the WP page title and strip content-column padding when this
   shortcode is on the page (same technique the article/legal pages use
   via their custom templates). */
body.page-slug-about .entry-header,
body.page-slug-about header.entry-header,
body.page-slug-about .entry-hero,
body.page-slug-about .site-main > article > .entry-header,
body.page-slug-about .wp-block-post-title,
body.page-slug-about h1.entry-title { display: none !important; }

body.page-slug-about .entry-content,
body.page-slug-about .content-area,
body.page-slug-about .site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }

.ci-about-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-about-eyebrow--on-light {
    color: var(--ci-color-brand-deep);
    background-color: rgba(73, 134, 91, 0.08);
    border-color: rgba(73, 134, 91, 0.25);
}

/* --- Hero --- */
.ci-about-hero {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    color: #ffffff;
    background-color: var(--ci-color-brand-deep);
    background-image:
        radial-gradient(ellipse at bottom right, rgba(73,134,91,0.45) 0%, rgba(73,134,91,0) 60%),
        radial-gradient(ellipse at top left,     rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 10px);
    overflow: hidden;
    text-align: center;
}
.ci-about-hero__inner {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.ci-about-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.95rem;
    margin-bottom: 1.5rem;
    font-family: var(--ci-font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}
.ci-about-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
}
.ci-about-hero__title {
    margin: 0 0 1.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(2.25rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #ffffff;
}
.ci-about-hero__sub {
    margin: 0 auto;
    max-width: 640px;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}

/* --- Story --- */
.ci-about-story {
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 3rem);
    background-color: #ffffff;
}
.ci-about-story__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.ci-about-story__title {
    margin: 0.75rem 0 1.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
}
.ci-about-story .ci-about-eyebrow {
    color: var(--ci-color-brand-deep);
    background-color: rgba(73, 134, 91, 0.08);
    border-color: rgba(73, 134, 91, 0.25);
}
.ci-about-story__body {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(15, 23, 42, 0.72);
}

/* --- Founder --- */
.ci-about-founder {
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
    background-color: #f7f8fa;
}
.ci-about-founder__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.ci-about-founder .ci-about-eyebrow {
    color: var(--ci-color-brand-deep);
    background-color: rgba(73, 134, 91, 0.08);
    border-color: rgba(73, 134, 91, 0.25);
    margin-bottom: 1.5rem;
}
.ci-about-founder__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--ci-radius-lg, 16px);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    text-align: left;
}
.ci-about-founder__photo {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
    background-color: var(--ci-color-brand-light, #ecfdf5);
}
.ci-about-founder__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ci-color-brand);
}
.ci-about-founder__photo--placeholder svg {
    width: 56px;
    height: 56px;
}
.ci-about-founder__body {
    flex: 1 1 auto;
    text-align: center;
}
.ci-about-founder__name {
    margin: 0 0 0.25rem;
    font-family: var(--ci-font-sans);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ci-color-text);
}
.ci-about-founder__role {
    display: block;
    margin-bottom: 0.85rem;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ci-color-brand-dark, var(--ci-color-brand-deep));
}
.ci-about-founder__bio {
    margin: 0 0 1.25rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.72);
}
.ci-about-founder__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ci-color-brand-deep);
    background-color: #ffffff;
    border: 1px solid rgba(73, 134, 91, 0.3);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ci-transition, 0.2s), color var(--ci-transition, 0.2s);
}
.ci-about-founder__link:hover {
    background-color: var(--ci-color-brand);
    color: #ffffff;
    border-color: var(--ci-color-brand);
}
.ci-about-founder__link svg {
    width: 14px;
    height: 14px;
}

@media (min-width: 640px) {
    .ci-about-founder__card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
    .ci-about-founder__body { text-align: left; }
}

/* --- Principles --- */
.ci-about-princ {
    padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 3rem);
    background-color: #ffffff;
}
.ci-about-princ__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.ci-about-princ__title {
    margin: 0.75rem 0 2.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
}
.ci-about-princ__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: left;
}
@media (min-width: 720px) {
    .ci-about-princ__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.ci-about-princ__card {
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #f7f8fa;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--ci-radius-lg, 16px);
}
.ci-about-princ__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    color: var(--ci-color-brand);
    background-color: rgba(73, 134, 91, 0.1);
    border-radius: 12px;
}
.ci-about-princ__icon svg { width: 22px; height: 22px; }
.ci-about-princ__card-title {
    margin: 0 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ci-color-text);
}
.ci-about-princ__card-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.68);
}

/* --- Backers --- */
.ci-about-backers {
    padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
    background-color: #f7f8fa;
}
.ci-about-backers__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.ci-about-backers .ci-about-eyebrow {
    color: var(--ci-color-brand-deep);
    background-color: rgba(73, 134, 91, 0.08);
    border-color: rgba(73, 134, 91, 0.25);
}
.ci-about-backers__title {
    margin: 0.75rem 0 0.5rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.2;
    color: var(--ci-color-text);
}
.ci-about-backers__sub {
    margin: 0 auto 2rem;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.68);
}
.ci-about-backers__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, 3.5rem);
}
.ci-about-backers__logo img {
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
    opacity: 0.85;
    filter: grayscale(20%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.ci-about-backers__logo:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

/* --- Location + company details --- */
.ci-about-loc {
    padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 3rem);
    background-color: #ffffff;
}
.ci-about-loc__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 720px) {
    .ci-about-loc__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
.ci-about-loc__col {
    display: flex;
    flex-direction: column;
}
.ci-about-loc__col .ci-about-eyebrow {
    color: var(--ci-color-brand-deep);
    background-color: rgba(73, 134, 91, 0.08);
    border-color: rgba(73, 134, 91, 0.25);
    align-self: flex-start;
}
.ci-about-loc__title {
    margin: 1rem 0 1.25rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ci-color-text);
}
.ci-about-loc__address {
    margin: 0;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(15, 23, 42, 0.72);
}
.ci-about-loc__meta {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
.ci-about-loc__meta > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.ci-about-loc__meta > div:last-child { border-bottom: none; padding-bottom: 0; }
.ci-about-loc__meta dt {
    font-family: var(--ci-font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
}
.ci-about-loc__meta dd {
    margin: 0;
    font-family: var(--ci-font-sans);
    font-size: 0.95rem;
    color: var(--ci-color-text);
}

/* --- CTA --- */
.ci-about-cta {
    padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 3rem);
    color: #ffffff;
    background-color: var(--ci-color-brand-deep);
    background-image:
        radial-gradient(ellipse at top right, rgba(73,134,91,0.4) 0%, rgba(73,134,91,0) 60%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 10px);
    text-align: center;
    overflow: hidden;
}
.ci-about-cta__inner {
    max-width: 720px;
    margin: 0 auto;
}
.ci-about-cta__title {
    margin: 0 0 1rem;
    font-family: var(--ci-font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.8vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.ci-about-cta__sub {
    margin: 0 auto 2rem;
    max-width: 560px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}
.ci-about-cta__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}