/* Crypto Influencer Marketing Agency — loaded AFTER defi-tokenization-development.css, which
   supplies the shared tx-* / rw-* / dtk-* components (the <main> carries both .defi-tk-page and
   .cim-page). This file only adds what that sheet lacks: bullet lists inside the shared process
   rows / asset cards, the pricing tiers and the add-on rows. Everything else reuses the base. */

/* ── Bullet lists inside the shared rows and cards. The base sheet styles only h3 + p, so the
      PDF's sub-bullets (vetting checks, reporting points, pricing inclusions) need this. ── */
.cim-page .cim-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    text-align: left;
}

.cim-page .cim-list li {
    position: relative;
    padding-left: 22px;
    font-family: Epilogue, sans-serif;
    font-size: var(--tx-copy);
    font-weight: 300;
    line-height: 1.6;
    color: var(--rw-text-mid);
}

.cim-page .cim-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rw-grad);
}

/* ── Pricing tiers + add-on orbit. Structure and behaviour ported from the supplied
      pricing design reference, re-themed onto this page's existing tokens: the reference's
      #8b5cf6 / #7ef29c palette becomes --tx-teal / --tx-gold so the site theme is unchanged.
      The base sheet's prefers-reduced-motion block already disables animation under
      .defi-tk-page, so none is repeated here. ── */
.cim-page .cim-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.cim-page .cim-price {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 26px 28px;
    border: 1px solid var(--rw-border);
    border-radius: 16px;
    background: var(--rw-card);
    opacity: 0;
    transform: translateY(22px);
    animation: cimCardIn .65s cubic-bezier(.2, .8, .2, 1) forwards;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .35s ease;
}

.cim-page .cim-price:nth-child(1) {
    animation-delay: .08s;
}

.cim-page .cim-price:nth-child(2) {
    animation-delay: .2s;
}

.cim-page .cim-price:nth-child(3) {
    animation-delay: .32s;
}

@keyframes cimCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cim-page .cim-price:hover {
    transform: translateY(-6px);
    border-color: rgba(54, 231, 196, .35);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
}

/* cursor-follow sheen */
.cim-page .cim-price::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .06), transparent 60%);
    transition: opacity .3s ease;
}

.cim-page .cim-price:hover::before {
    opacity: 1;
}

/* Featured tier: the gradient belongs to the BORDER only. The inner layer must be fully
   opaque — an earlier version faded from rgba(54,231,196,.07) to the card colour, which let
   the border gradient bleed through and filled the whole card. */
.cim-page .cim-price.is-featured {
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--rw-card), var(--rw-card)),
        var(--tx-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 14px 38px -24px rgba(0, 0, 0, .55);
}

.cim-page .cim-price.is-featured:hover {
    box-shadow: 0 20px 46px -22px rgba(0, 0, 0, .6);
}

.cim-page .cim-price-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 4px 10px;
    border: 1px solid rgba(54, 231, 196, .3);
    border-radius: 999px;
    background: rgba(54, 231, 196, .12);
    color: var(--tx-teal);
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.cim-page .cim-price-name {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    font-family: "Exo 2", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--rw-text-hi);
}

.cim-page .cim-price-tag {
    position: relative;
    z-index: 1;
    font-family: "Exo 2", sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    background: var(--tx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cim-page .cim-price-per {
    font-size: 15px;
    font-weight: 500;
    color: var(--rw-text-mid);
    -webkit-text-fill-color: var(--rw-text-mid);
}

.cim-page .cim-price-desc {
    position: relative;
    z-index: 1;
    margin: 14px 0 22px !important;
    font-size: 15px !important;
    line-height: 1.65;
    color: var(--rw-text-mid);
}

.cim-page .cim-price-features {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.cim-page .cim-price-features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    font-family: Epilogue, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--rw-text-mid);
}

.cim-page .cim-price-features li:first-child {
    border-top: 0;
}

.cim-page .cim-price-features li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--tx-teal);
}

.cim-page .cim-price.is-featured .cim-price-features li::before {
    background: var(--tx-gold);
}

/* All three tiers share the same gradient CTA — the featured card is distinguished by its
   border and badge alone, not by a different button. */
.cim-page .cim-price-cta {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--tx-gradient);
    color: #040914;
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px -10px rgba(54, 231, 196, .6);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cim-page .cim-price-cta:hover {
    filter: brightness(1.08);
    box-shadow: 0 10px 30px -8px rgba(54, 231, 196, .75);
    color: #040914;
}

.cim-page .cim-price-cta:active {
    transform: scale(.97);
}

/* ── Numbered two-column points (the "why a specialized strategy" section). Ported from the
      .w3-principle component on /web3-marketing-agency/ rather than linking that 485-line sheet:
      every rule there is scoped to .web3-page, so adding that class to this <main> would drag in
      its whole cascade alongside .defi-tk-page. Its --w3-line is byte-identical to the --tx-line
      this page already defines, and its accent is exactly --tx-teal, so this reuses existing
      tokens and adds no new colour literals. ── */
.cim-page .cim-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 48px;
}

.cim-page .cim-principle {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tx-line);
    transition: border-color .25s ease;
}

.cim-page .cim-principle:hover {
    border-bottom-color: rgba(54, 231, 196, .4);
}

.cim-page .cim-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(54, 231, 196, .22);
    border-radius: 10px;
    background: rgba(54, 231, 196, .06);
    color: var(--tx-teal);
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cim-page .cim-principle:hover .cim-number {
    border-color: rgba(54, 231, 196, .6);
    box-shadow: 0 0 12px rgba(54, 231, 196, .2);
}

.cim-page .cim-principle p {
    margin: 0 !important;
}

.cim-page .cim-principle strong {
    color: var(--rw-text-hi);
    font-weight: 600;
}

@media (max-width: 991px) {
    .cim-page .cim-principles {
        gap: 22px 28px;
    }}

@media (max-width: 767px) {
    .cim-page .cim-principles {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cim-page .cim-principle {
        gap: 12px;
        padding-bottom: 16px;
    }

    .cim-page .cim-number {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 12px;
    }

    .cim-page .cim-principle p {
        font-size: 13px !important;
    }}

/* ── "Why Web3 brands choose us": a vertical timeline. A connector line runs behind the icon
      chips, each row sits on it, and key phrases in the copy are picked out in the page accent.
      Full width — no sticky side heading — so every row gets the same measure. ── */
.cim-page .cim-reasons {
    position: relative;
    display: grid;
    gap: 52px;
    padding-left: 4px;
}


.cim-page .cim-reason {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.cim-page .cim-reason-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(54, 231, 196, .35);
    border-radius: 14px;
    background: rgba(54, 231, 196, .07);
    color: var(--tx-teal);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.cim-page .cim-reason-icon svg {
    width: 24px;
    height: 24px;
}

.cim-page .cim-reason:hover .cim-reason-icon {
    border-color: rgba(54, 231, 196, .7);
    background: rgba(54, 231, 196, .14);
    box-shadow: 0 0 18px -2px rgba(54, 231, 196, .35);
    transform: translateY(-2px);
}

.cim-page .cim-reason-body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.cim-page .cim-reason-body h3 {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rw-text-hi);
}

.cim-page .cim-reason-body p {
    margin: 0 !important;
    line-height: 1.7;
}

/* key phrases picked out of the existing copy — no wording is changed */
.cim-page .cim-hl {
    color: var(--tx-teal);
    font-weight: 500;
}

@media (max-width: 767px) {
    .cim-page .cim-reasons {
        gap: 34px;
    }

    /* chip is 38px here: 4 + 19 = 23 centre horizontally, so left = 23 - 1 = 22;
       vertically the first/last chip centres are 19px in */
    .cim-page .cim-reasons::before {
        left: 22px;
        top: 19px;
        bottom: 19px;
    }

    .cim-page .cim-reason {
        gap: 14px;
    }

    .cim-page .cim-reason-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .cim-page .cim-reason-icon svg {
        width: 20px;
        height: 20px;
    }

    .cim-page .cim-reason-body h3 {
        font-size: 16px;
    }}

/* This band carries a tall diagram against five stacked points, so it needs more room to breathe
   than the 70px the shared .tx-section gives every other section. Scoped to the id so nothing
   else on the page shifts. */
.cim-page #why-blockchainx {
    padding: 112px 0;
}

/* ── Campaigns cards: keep the 4-up grid, but adopt the card treatment from the white-label
      tokenization page's review cards — roomier 24px gutters, 24px/22px padding, a lighter
      hairline border and a calmer hover. The base .rw-glow-card is already flex-column with
      height:100%, so rows stay level; these only adjust spacing, weight and colour. Scoped to
      .cim-page and safe because #campaigns is the only consumer of rw-glow-* on this page. ── */
.cim-page .rw-glow-grid {
    gap: 24px;
}

.cim-page .rw-glow-card {
    gap: 14px;
    padding: 24px 22px;
    border-color: rgba(255, 255, 255, .07);
    background: rgba(20, 22, 30, .7);
}

.cim-page .rw-glow-card:hover {
    border-color: rgba(161, 131, 224, .25);
    box-shadow: 0 8px 32px rgba(78, 31, 163, .12);
}

/* title sized to sit comfortably in a quarter-width card */
.cim-page .rw-glow-card h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
}

.cim-page .rw-glow-card p {
    font-size: 14px !important;
    line-height: 1.7;
}

@media (max-width: 991px) {
    .cim-page .rw-glow-grid {
        gap: 20px;
    }}

@media (max-width: 767px) {
    .cim-page .rw-glow-grid {
        gap: 14px;
    }

    .cim-page .rw-glow-card {
        padding: 20px 18px;
        gap: 12px;
    }

    .cim-page .rw-glow-card h3 {
        font-size: 16px;
    }}

/* ── Channels: two per row, icon left and copy right. The shared .rw-asset-grid is 4-up and
      centre-aligned, which is what made these eight cards look ragged — the copy lengths differ
      a lot. A wider, left-aligned measure evens them out, and grid rows stretch so every card in
      a row matches height. Scoped here rather than overriding .rw-asset-grid, because #reporting
      still uses that component. ── */
.cim-page .cim-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.cim-page .cim-channel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    height: 100%;
    padding: 24px 24px;
    border: 1px solid var(--rw-border);
    border-radius: 18px;
    background: var(--rw-card);
    transition: transform .3s, border-color .3s, background .3s, box-shadow .3s;
}

.cim-page .cim-channel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--rw-grad);
    transform: scaleX(0);
    transition: transform .35s;
}

.cim-page .cim-channel:hover {
    border-color: rgba(161, 131, 224, .35);
    background: #1f2030;
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}

.cim-page .cim-channel:hover::before {
    transform: scaleX(1);
}

/* brand marks keep their own colours — these are logos, not theme accents */
.cim-page .cim-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1px solid var(--rw-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

.cim-page .cim-channel:hover .cim-channel-icon {
    border-color: rgba(161, 131, 224, .35);
    background: rgba(255, 255, 255, .07);
    transform: scale(1.06);
}

.cim-page .cim-channel-icon svg {
    width: 26px;
    height: 26px;
}

.cim-page .cim-channel-body {
    flex: 1;
    min-width: 0;
}

.cim-page .cim-channel-body h3 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    background: var(--rw-head-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cim-page .cim-channel-body p {
    margin: 0 !important;
    color: #d9d9d9;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .cim-page .cim-channels {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .cim-page .cim-channel {
        padding: 18px 16px;
        gap: 14px;
    }

    .cim-page .cim-channel-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .cim-page .cim-channel-icon svg {
        width: 22px;
        height: 22px;
    }

    .cim-page .cim-channel-body h3 {
        font-size: 16px;
    }}

/* ── Inline SVG icons inside the shared .rw-icon-wrap. The base sheet sizes `.rw-icon-wrap img`
      but has no rule for an svg, and the wrap sets no colour — so without these an inline icon
      renders unsized and inherits the body grey. Colour is the page accent already used by
      .cim-number and .cim-reasons, so this adds no new colour literal. ── */
.cim-page .rw-icon-wrap svg {
    width: 32px;
    height: 32px;
    color: var(--tx-teal);
}

/* two-column body: step list left, detail card right */
.cim-page .cim-vet {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.cim-page .cim-vet-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 24px;
}

.cim-page .cim-vet-track {
    position: absolute;
    left: 42px;
    top: 26px;
    bottom: 26px;
    width: 2px;
    border-radius: 2px;
    background: rgba(217, 217, 217, .1);
}

.cim-page .cim-vet-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tx-gold), var(--tx-teal));
    box-shadow: 0 0 10px rgba(54, 231, 196, .6);
    transition: height .4s cubic-bezier(.4, 0, .2, 1);
}

.cim-page .cim-vet-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 18px;
    border: 1px solid rgba(217, 217, 217, .1);
    border-radius: 14px;
    background: #081020;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transition: background .25s cubic-bezier(.4, 0, .2, 1), border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.cim-page .cim-vet-step:hover {
    background: #0d172e;
    border-color: rgba(54, 231, 196, .35);
    transform: translateX(4px);
}

.cim-page .cim-vet-step[aria-current="step"] {
    background: linear-gradient(135deg, rgba(17, 34, 66, .95), rgba(8, 16, 32, .98));
    border-color: rgba(54, 231, 196, .65);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 20px rgba(54, 231, 196, .16);
    transform: translateX(6px);
}

.cim-page .cim-vet-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(217, 217, 217, .18);
    border-radius: 50%;
    background: #0b1326;
    color: #94a3b8;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.cim-page .cim-vet-step:hover .cim-vet-dot {
    border-color: rgba(54, 231, 196, .5);
    color: var(--tx-teal);
}

.cim-page .cim-vet-step.is-done .cim-vet-dot {
    border-color: rgba(245, 210, 85, .55);
    color: var(--tx-gold);
}

.cim-page .cim-vet-step[aria-current="step"] .cim-vet-dot {
    border-color: var(--tx-teal);
    color: var(--tx-teal);
    box-shadow: 0 0 14px rgba(54, 231, 196, .5);
}

.cim-page .cim-vet-name {
    flex: 1;
    min-width: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #cbd5e1;
    transition: color .2s ease;
}

.cim-page .cim-vet-step[aria-current="step"] .cim-vet-name {
    color: #fff;
}

.cim-page .cim-vet-chevron {
    flex-shrink: 0;
    color: rgba(217, 217, 217, .25);
    font-size: 14px;
    transition: color .25s ease, transform .25s ease;
}

.cim-page .cim-vet-step[aria-current="step"] .cim-vet-chevron {
    color: var(--tx-teal);
    transform: translateX(3px);
}

/* right-hand detail card */
.cim-page .cim-vet-viewer {
    position: sticky;
    top: 110px;
    align-self: start;
}

.cim-page .cim-vet-panel {
    padding: 28px;
    border: 1px solid rgba(54, 231, 196, .3);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 12%, rgba(54, 231, 196, .07), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(245, 210, 85, .04), transparent 40%),
        #0a1122;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .45), 0 0 30px rgba(54, 231, 196, .08);
    animation: cimPanelFade .35s cubic-bezier(.4, 0, .2, 1);
}

@keyframes cimPanelFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cim-page .cim-vet-phase {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 5px 12px;
    border: 1px solid rgba(54, 231, 196, .35);
    border-radius: 20px;
    background: rgba(54, 231, 196, .12);
    color: var(--tx-teal);
    font-family: "Exo 2", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
}

.cim-page .cim-vet-panel h3 {
    margin: 0 0 18px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.32;
    background: var(--tx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cim-page .cim-vet-panel .cim-list {
    margin-top: 0;
}

.cim-page .cim-vet-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(217, 217, 217, .1);
}

.cim-page .cim-vet-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(54, 231, 196, .3);
    border-radius: 8px;
    background: rgba(54, 231, 196, .07);
    color: var(--tx-teal);
    font-family: "Exo 2", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.cim-page .cim-vet-nav:hover:not(:disabled) {
    background: rgba(54, 231, 196, .16);
    border-color: var(--tx-teal);
    transform: translateY(-2px);
}

.cim-page .cim-vet-nav:disabled {
    opacity: .32;
    cursor: default;
}

.cim-page .cim-vet-count {
    font-family: "Exo 2", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rw-text-mid);
}

.cim-page .cim-vet-count strong {
    color: var(--tx-teal);
    font-weight: 800;
}

@media (max-width: 991px) {
    .cim-page .cim-vet {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .cim-page .cim-vet-viewer {
        position: static;
    }

    .cim-page .cim-vet-track {
        display: none;
    }

    .cim-page .cim-vet-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
        padding: 0 0 12px;
        scrollbar-width: thin;
    }

    .cim-page .cim-vet-step {
        flex: 0 0 230px;
    }

    .cim-page .cim-vet-step:hover,
    .cim-page .cim-vet-step[aria-current="step"] {
        transform: none;
    }}

@media (max-width: 767px) {

    .cim-page .cim-vet-step {
        flex: 0 0 190px;
        padding: 10px 12px;
        gap: 10px;
    }

    .cim-page .cim-vet-dot {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .cim-page .cim-vet-name {
        font-size: 12.5px;
    }

    .cim-page .cim-vet-panel {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .cim-page .cim-vet-panel h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .cim-page .cim-vet-pager {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .cim-page .cim-vet-nav {
        padding: 9px 14px;
        font-size: 12.5px;
    }}

/* ── Responsive ── */
@media (max-width: 991px) {
    .cim-page .cim-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    .cim-page .cim-price-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cim-page .cim-price {
        padding: 22px 18px;
    }

    .cim-page .cim-price-name {
        font-size: 14px;
    }

    .cim-page .cim-price-tag {
        font-size: 24px;
    }}

/* ── Reporting cards: three per row, taking the card rhythm from the white-label tokenization
      page's regulatory grid — 3-up, 16px gutters, 28px/24px padding, left-aligned text. The
      shared .rw-asset-grid is 4-up at a tight 14px gap, which is what made six cards feel
      cramped here. #reporting is the only consumer of .rw-asset-* on this page, so scoping to
      .cim-page cannot reach another section. Colours stay on the existing tokens — only the
      spacing and column count come from the reference. ── */
.cim-page .rw-asset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Two-row grid so the icon and heading share one line: icon in column 1, heading in column 2,
   and the bullet list spanning both columns underneath. Done here rather than by wrapping the
   icon and heading in markup, so the card keeps its existing structure. */
.cim-page .rw-asset-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 28px 24px;
    text-align: left;
}

/* the base sheet sizes `.rw-asset-card img` and centres it; an inline svg needs its own rule,
   and sitting on the heading's line means the bottom margin has to go. */
.cim-page .rw-asset-card svg {
    grid-column: 1;
    grid-row: 1;
    width: 30px;
    height: 30px;
    margin: 0;
    color: var(--tx-teal);
}

.cim-page .rw-asset-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 17px;
}

.cim-page .rw-asset-card .cim-list {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 6px;
}

@media (max-width: 991px) {
    .cim-page .rw-asset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }}

@media (max-width: 767px) {
    .cim-page .rw-asset-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cim-page .rw-asset-card {
        padding: 22px 18px;
    }

    .cim-page .rw-asset-card svg {
        width: 34px;
        height: 34px;
    }}

/* ── Engagement process: a connected stepper, ported from the crypto-seo-agency roadmap and
      re-scoped to .cim-page. That sheet scopes every rule to .seo-page, so linking it would
      clash with this page — the handful of rules are copied across instead. Six steps run 3-up
      (two even rows) rather than the reference's 4-up, which would strand a lopsided 4+2. The
      gradient reuses the page's existing gold/teal, so the theme is unchanged. ── */
.cim-page .cim-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 28px;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.cim-page .cim-step {
    position: relative;
    text-align: center;
}

/* The connector runs from the right edge of this node to the left edge of the next one.
   top 31px = half the 64px node minus the 2px line's half, so it sits on the node's centre.
   left = 50% + 42px (half the node, 32, plus 10px clearance); the width subtracts that
   clearance at both ends (84px) and adds the 28px column gap back. */
.cim-page .cim-step::after {
    content: "";
    position: absolute;
    top: 31px;
    left: calc(50% + 42px);
    width: calc(100% - 84px + 28px);
    height: 2px;
    background: linear-gradient(90deg, rgba(245, 210, 85, .55), rgba(54, 231, 196, .55));
}

/* last item of each row has nothing to connect to */
.cim-page .cim-step:nth-child(3n)::after {
    display: none;
}

.cim-page .cim-step-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 2px solid rgba(54, 231, 196, .75);
    background: radial-gradient(circle at 40% 35%, #3b1d85, #0b1030 72%);
    box-shadow: 0 0 22px rgba(54, 231, 196, .25);
    color: #fff;
    transition: transform .3s, box-shadow .3s;
}

.cim-page .cim-step:nth-child(even) .cim-step-node {
    border-color: rgba(245, 210, 85, .8);
    box-shadow: 0 0 22px rgba(245, 210, 85, .2);
}

.cim-page .cim-step:hover .cim-step-node {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 0 30px rgba(54, 231, 196, .45);
}

.cim-page .cim-step-node svg {
    width: 28px;
    height: 28px;
}

.cim-page .cim-step h3 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rw-text-hi);
}

.cim-page .cim-step p {
    font-size: 15px !important;
    line-height: 1.6;
    color: var(--rw-text-mid);
}

@media (max-width: 991px) {
    .cim-page .cim-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* at two per row the 3rd/6th are no longer last in their row, so restore their connector
       first, then hide it on the ones that now end a row */
    .cim-page .cim-step:nth-child(3n)::after {
        display: block;
    }

    .cim-page .cim-step:nth-child(2n)::after {
        display: none;
    }}

@media (max-width: 767px) {
    .cim-page .cim-step h3 {
        font-size: 16px;
    }

    .cim-page .cim-step p {
        font-size: 14px !important;
    }}

/* roadmap becomes a vertical timeline: node on the left, line running down to the next node */
@media (max-width: 575px) {
    .cim-page .cim-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .cim-page .cim-step {
        padding-left: 68px;
        text-align: left;
    }

    .cim-page .cim-step-node {
        position: absolute;
        top: 0;
        left: 0;
        width: 52px;
        height: 52px;
        margin: 0;
    }

    .cim-page .cim-step-node svg {
        width: 24px;
        height: 24px;
    }

    .cim-page .cim-step:nth-child(n)::after {
        display: block;
        top: 60px;
        left: 25px;
        width: 2px;
        height: calc(100% - 40px);
        background: linear-gradient(180deg, rgba(245, 210, 85, .55), rgba(54, 231, 196, .55));
    }

    .cim-page .cim-step:last-child::after {
        display: none;
    }
}

.cim-page .tx-section.tx-alt {
    background: #12131b;
}

/* The rhythm opens at the hero: hero light, then the stats strip and the client logos share a
   single dark block, then the .tx-section run carries on. These three blocks carry their own
   classes rather than .tx-section, so they need backgrounds set explicitly. Scoped to .cim-page
   because .project-section and .about-section-clients are shared across the site. */
.cim-page .tx-hero {
    background: #12131b;
}

.cim-page .project-section,
.cim-page .about-section-clients {
    background: #02040a;
}

/* ── Section rhythm, matched to the white-label tokenization page. Its .section-block (the class
      used by most of that page) consumes --section-pad-y: 110px, stepping 90 / 72 / 56 at
      1200 / 992 / 768. The shared .tx-section here gives only 70px, so adjacent sections sat
      140px apart against that page's 220px. Their breakpoints are used verbatim so the ladder
      genuinely matches the reference.
      The base sheet also steps down to 30px/26px below 575/480; without the last two rules here
      this ladder would override those and leave 56px on a small phone. ── */
@media (max-width: 1200px) {
    .cim-page .tx-section {
        padding: 90px 0;
    }

    .cim-page #why-blockchainx {
        padding: 96px 0;
    }
}

@media (max-width: 992px) {
    .cim-page .tx-section {
        padding: 72px 0;
    }

    /* keep the diagram section at or above the default rather than behind it */
    .cim-page #why-blockchainx {
        padding: 80px 0 72px;
    }}

@media (max-width: 768px) {
    .cim-page .tx-section {
        padding: 56px 0;
    }

    .cim-page #why-blockchainx {
        padding: 60px 0 56px;
    }}

@media (max-width: 575px) {
    .cim-page .tx-section {
        padding: 44px 0;
    }

    .cim-page #why-blockchainx {
        padding: 48px 0 44px;
    }}

@media (max-width: 425px) {
    .cim-page .tx-section {
        padding: 34px 0;
    }

    .cim-page #why-blockchainx {
        padding: 38px 0 34px;
    }}
/* ── Section CTA bands (end of #why-campaigns-fail and #pricing): a line of copy on the left
      with its two buttons beside it on the right, separated from the section above by the shared
      --tx-line rule. Buttons keep the standard .tx-btn / .tx-btn-ghost appearance — only scale
      changes, so gradient, colour, weight and hover are untouched. The ghost stays 1px/2px
      tighter to compensate its 1.5px border, the same offset the base sheet uses. ── */
.cim-page .cim-cta-band {
    margin-top: 64px;
    padding-top: 44px;
    border-top: 1px solid var(--tx-line);
}

.cim-page .cim-cta-band p {
    margin: 0 !important;
    font-family: "Exo 2", sans-serif;
    font-weight: 500;
    color: var(--rw-text-hi);
}

@media (min-width: 1400px) {
    /* copy left, buttons right, the pair spanning the full container */
    .cim-page .cim-cta-band {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        margin-top: 72px;
        padding-top: 48px;
    }

    .cim-page .cim-cta-band p {
        flex: 0 1 auto;
        font-size: 18px !important;
        line-height: 1.45;
        white-space: nowrap;
    }

    /* .tx-actions.dtk-center in the base sheet is (0,3,0), so this must match that weight to
       win on margin-top - hence .tx-actions in the selector rather than .cim-cta-row alone. */
    .cim-page .tx-actions.cim-cta-row {
        flex: none;
        gap: 20px;
        margin-top: 0;
    }

    .cim-page .cim-cta-row .tx-btn {
        padding: 12px 28px;
        border-radius: 10px;
        font-size: 15px;
    }
}


/* ── Why-BlockchainX reasons. The section used to be a two-column split with a diagram on the
      left; with that gone the left column ran out of content and left dead space, so the heading
      now runs full width and the five reasons sit in a card grid beneath it.
      Six tracks let three sit on the first row and the remaining two centre under them
      (2/span 2 and 4/span 2) — the same approach /crypto-seo-agency/ uses for its five-item
      block. Card colours reuse the values already on this page. ── */
.cim-page .cim-reasons {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    padding-left: 0;
}

.cim-page .cim-reason {
    grid-column: span 2;
    gap: 16px;
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: rgba(20, 22, 30, .7);
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}



.cim-page .cim-reason:hover {
    border-color: rgba(161, 131, 224, .25);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(78, 31, 163, .12);
}

@media (max-width: 991px) {
    .cim-page .cim-reasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .cim-page .cim-reason:nth-of-type(n) {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .cim-page .cim-reasons {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cim-page .cim-reason {
        padding: 20px 18px;
    }
}


/* ── Hero image: the shared sheet tilts and scales it on hover
      (.defi-tk-page .tx-hero-art:hover img -> rotateY(-7deg) rotateX(4deg) scale(1.03)).
      Turned off for this page only; every other tx-* page keeps the effect. Same specificity
      as the base rule (0,3,1), so it wins on source order alone. ── */
.cim-page .tx-hero-art:hover img {
    transform: none;
    filter: none;
}

/* The shared sheet floats the hero image continuously
   (.defi-tk-page .tx-hero-art img -> animation: dtkFloat 7s ease-in-out infinite, which
   translates it 0 -> -12px -> 0). Held still on this page; other tx-* pages keep it. */
.cim-page .tx-hero-art img {
    animation: none;
}




/* Headings sit beside a 48px icon, so at 19px "Deep Blockchain & Web3 Expertise" wrapped to a
   second line while the others stayed on one - which is why the paragraphs started at different
   heights. 17px lets every heading fit on a single line, so the icon, heading and body line up
   the same way in all five cards with no reserved blank line. */
.cim-page .cim-reason-body h3 {
    font-size: 17px;
}

/* ── Card layout: icon and heading share the top line, the copy starts on its own line beneath
      them at the card's left edge (not indented under the heading). The heading is now a direct
      child of the card rather than living inside the body, so a two-row grid can place the icon
      and heading side by side on row 1 and let the body span the full width on row 2.
      Applies to both the Why-BlockchainX reasons and the Web3 channel cards. ── */
.cim-page .cim-reason,
.cim-page .cim-channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    column-gap: 14px;
    row-gap: 0;
}

.cim-page .cim-reason-icon,
.cim-page .cim-channel-icon {
    grid-column: 1;
    grid-row: 1;
}

.cim-page .cim-reason > h3,
.cim-page .cim-channel > h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

/* the copy spans both columns on the second row, starting level with the icon */
.cim-page .cim-reason-body,
.cim-page .cim-channel-body {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 6px;
    padding-top: 0;
}

/* the heading styling moves with the heading, since .cim-*-body h3 no longer matches */
.cim-page .cim-reason > h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rw-text-hi);
}

.cim-page .cim-channel > h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    background: var(--rw-head-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {
    .cim-page .cim-reason > h3 {
        font-size: 16px;
    }

    .cim-page .cim-reason-body,
    .cim-page .cim-channel-body {
        margin-top: 6px;
    }
}

/* Five cards in a six-track grid: the first three fill the top row, and the last two are
   placed at tracks 2-3 and 4-5 so they sit centred beneath them rather than left-aligned
   with an empty slot on the right. All five keep the same two-track width. */
.cim-page .cim-reason:nth-of-type(4) {
    grid-column: 2 / span 2;
}

.cim-page .cim-reason:nth-of-type(5) {
    grid-column: 4 / span 2;
}

@media (max-width: 991px) {

    .cim-page .cim-reason:nth-of-type(4),
    .cim-page .cim-reason:nth-of-type(5) {
        grid-column: auto;
    }
}