/* ==========================================================================
   LD Design System
   --------------------------------------------------------------------------
   The site already had a dominant pattern for almost everything; it had just
   drifted in a few places. This file does not invent a new look, it picks the
   pattern that was already winning by count and applies it to the outliers.

   Measured on the home page before this file existed:
     buttons  35 x navy pill (Oswald, 28px radius)  vs 1 green form button
              and 1 accent button with white text (contrast 2.36:1)
     cards    17 x white / 4px palette7 border / 16px radius / no shadow
              vs 18px + 1px + shadow (guides) and 40px (testimonial panel)
     eyebrow  2 x Oswald 17px / 400 / 1px tracking / palette2
              vs 1 x 14.4px with no tracking

   Two radii exist on purpose and nothing else should:
     --ld-radius-card  16px  cards, panels, media
     --ld-radius-pill  28px  buttons and pill links

   Colours always go through the Kadence palette variables so every rule here
   follows the light/dark switcher in the header. Note that the palette
   inverts: palette2 is navy in light mode and near-white in dark, palette9 is
   the reverse. That is why a "navy button with white text" stays readable in
   both modes without a second rule.
   ========================================================================== */

:root {
    --ld-radius-card: 16px;
    --ld-radius-pill: 28px;
    --ld-card-border: 4px;
    --ld-ease: cubic-bezier(.2, .6, .3, 1);
}

/* The colour tokens are declared on body, not :root, and that is load-bearing.
   A var() inside a custom property is substituted at the element where the
   property is declared, not where it is used. Kadence's dark switcher
   redefines --global-palette* on body.color-switch-dark, while html still
   holds the light values — so --ld-card-surface declared on :root would
   compute to #ffffff once and stay white in dark mode, giving white cards with
   white text. Declared on body it resolves against the switched palette. */
body {
    --ld-card-line: var(--global-palette7, #edf2f7);
    --ld-card-surface: var(--global-palette9, #ffffff);
}

/* --------------------------------------------------------------------------
   1. BUTTONS

   The rule of the system: navy pill on light backgrounds, accent pill on dark
   backgrounds. The hero is the only dark section with buttons, and it already
   follows this, so the hero is deliberately left untouched.
   -------------------------------------------------------------------------- */

/* The "Why speed and SEO matter" CTA was the one accent button sitting on a
   light background, and it carried white text: #ffffff on #65b5f9 is 2.36:1,
   well under the 4.5:1 minimum. On a light background the standard is navy. */
.kb-row-layout-id2_ba66fb-cf .kb-button {
    background-color: var(--global-palette2, #081e3d) !important;
    border-color: var(--global-palette2, #081e3d) !important;
    color: var(--global-palette9, #ffffff) !important;
}

/* Now that "If any of this sounds familiar" is a navy band, its "Call us
   today" button is a navy pill on navy — only the white text showed, the pill
   itself vanished. Accent fill with navy text, same as the hero. */
.kb-row-layout-id2_c9733f-1b .kb-button {
    background-color: var(--global-palette1, #65b5f9) !important;
    border-color: var(--global-palette1, #65b5f9) !important;
    color: #081e3d !important;
}

.kb-row-layout-id2_c9733f-1b .kb-button:hover {
    background-color: var(--global-palette9, #ffffff) !important;
    border-color: var(--global-palette9, #ffffff) !important;
    color: #081e3d !important;
}

/* Fluent Forms ships its own green button (#67c23a, 7px radius, 16px system
   font). It was the only control on the page that did not look like the site.
   Matched to the Kadence button: same height, radius, font and hover. */
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform .ff_btn_style {
    background-color: var(--global-palette2, #081e3d) !important;
    border: 2px solid var(--global-palette2, #081e3d) !important;
    color: var(--global-palette9, #ffffff) !important;
    font-family: var(--global-heading-font-family, Oswald, sans-serif) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    border-radius: var(--ld-radius-pill) !important;
    padding: 10px 26px !important;
    min-height: 48px !important;
    box-shadow: none !important;
    transition: background-color .2s var(--ld-ease), border-color .2s var(--ld-ease), color .2s var(--ld-ease);
}

.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn-submit:hover {
    background-color: var(--global-palette1, #65b5f9) !important;
    border-color: var(--global-palette1, #65b5f9) !important;
    color: var(--global-palette2, #081e3d) !important;
}

.fluentform .ff-btn-submit:focus-visible {
    outline: 3px solid var(--global-palette1, #65b5f9);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. CARDS

   One card: white surface, 4px palette7 edge, 16px radius, no shadow. The 4px
   border is what gives the site its soft, slightly chunky edge — a thinner
   border plus a shadow (which the guides block used at first) reads as a
   different design language even though the shape is nearly the same.
   -------------------------------------------------------------------------- */

/* Info boxes were not filling their column, so cards in the same row ended at
   different heights. Stretching them is what makes a row read as a set.

   Listed row by row on purpose. Stretching every info box on the site breaks
   the integrations list in "Everything you need to capture and track leads"
   (row 2_74e10d-fc): those six boxes are stacked inside one tall column, so
   height:100% makes each one fill that column and the list spreads down the
   page over the section below it. Add a row here only when its boxes sit
   side by side. */

/* Desktop and tablet only. Below 768px the columns stack, so each box's
   parent is as tall as the whole row and height:100% makes every box that
   tall — on a phone the "Built for leads" list overflowed 1140px past its
   section and landed on top of the portfolio heading. Cards that stack do not
   need equal heights anyway. */
@media (min-width: 768px) {

/* Done with flex, not height:100%. height:100% resolves against the padded
   parent box, so every card came out ~18px taller than its row and sat on top
   of the paragraph and the button underneath it. Flex stretches to the
   available space instead of overflowing it. */
.kb-row-layout-id2_5c74cc-2b .wp-block-kadence-column,
.kb-row-layout-id2_044b11-d1 .wp-block-kadence-column,
.kb-row-layout-id2_57b67e-85 .wp-block-kadence-column {
    display: flex;
    flex-direction: column;
}

.kb-row-layout-id2_5c74cc-2b .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-id2_044b11-d1 .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-id2_57b67e-85 .wp-block-kadence-column > .kt-inside-inner-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.kb-row-layout-id2_5c74cc-2b .wp-block-kadence-infobox,
.kb-row-layout-id2_044b11-d1 .wp-block-kadence-infobox,
.kb-row-layout-id2_57b67e-85 .wp-block-kadence-infobox {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.kb-row-layout-id2_5c74cc-2b .kt-blocks-info-box-link-wrap,
.kb-row-layout-id2_044b11-d1 .kt-blocks-info-box-link-wrap,
.kb-row-layout-id2_57b67e-85 .kt-blocks-info-box-link-wrap {
    flex: 1 1 auto;
}

/* Note: the "Built for leads" checklist (row 2_16a02f-96) is deliberately NOT
   in this list. Its boxes sit in a two-column list inside a much taller row
   next to the photo, so stretching them pushed the items up to 1958px past
   their section, over the portfolio heading. They are list items, not cards —
   they do not need equal heights. */

}
/* end min-width:768px */

/* The Kadence Posts grid (latest posts above the footer) had no card at all —
   bare image, title and excerpt floating on the background, while the guides
   block right above it used cards. Same content type, so: same card. */
.kb-posts.kb-posts-style-unboxed .loop-entry {
    background: var(--ld-card-surface);
    border: var(--ld-card-border) solid var(--ld-card-line);
    border-radius: var(--ld-radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: none;
    transition: border-color .25s var(--ld-ease), transform .25s var(--ld-ease);
}

.kb-posts.kb-posts-style-unboxed .loop-entry:hover {
    border-color: var(--global-palette1, #65b5f9);
    transform: translateY(-4px);
}

.kb-posts.kb-posts-style-unboxed .loop-entry .post-thumbnail {
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
}

.kb-posts.kb-posts-style-unboxed .loop-entry .post-thumbnail img {
    border-radius: 0 !important;
    display: block;
    width: 100%;
    transition: transform .5s var(--ld-ease);
}

.kb-posts.kb-posts-style-unboxed .loop-entry:hover .post-thumbnail img {
    transform: scale(1.06);
}

.kb-posts.kb-posts-style-unboxed .loop-entry .entry-content-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 12px;
    padding: 22px 22px 24px;
}

.kb-posts.kb-posts-style-unboxed .loop-entry .entry-header,
.kb-posts.kb-posts-style-unboxed .loop-entry .entry-summary,
.kb-posts.kb-posts-style-unboxed .loop-entry .entry-summary p,
.kb-posts.kb-posts-style-unboxed .loop-entry .entry-footer {
    margin: 0 !important;
    padding: 0 !important;
}

/* Keeps the "Continue reading" link on the bottom edge of every card so the
   links line up across the row regardless of excerpt length. */
.kb-posts.kb-posts-style-unboxed .loop-entry .entry-footer {
    margin-top: auto !important;
    padding-top: 4px !important;
}

/* The "If any of this sounds familiar" band used to sit on a magenta parallax
   image; it is navy now, like the other dark bands. Its cards carry navy icon
   badges that overhang the top edge, so the overhanging half disappeared into
   the band. Same rule as the buttons: on a dark background the fill is accent
   and the content is navy. */
.kb-row-layout-id2_044b11-d1 .kt-blocks-info-box-media {
    background-color: var(--global-palette1, #65b5f9) !important;
}

.kb-row-layout-id2_044b11-d1 .kt-blocks-info-box-media .kt-info-svg-icon,
.kb-row-layout-id2_044b11-d1 .kt-blocks-info-box-media svg {
    color: var(--global-palette2, #081e3d) !important;
    stroke: var(--global-palette2, #081e3d) !important;
}

/* Title, meta and excerpt matched to the guides cards, and clamped: one post
   with a five-line headline was making its card taller than the other two and
   pushing the row out of rhythm. */
.kb-posts.kb-posts-style-unboxed .loop-entry .entry-title {
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-posts.kb-posts-style-unboxed .loop-entry .entry-title a {
    text-decoration: none;
}

.kb-posts.kb-posts-style-unboxed .loop-entry .entry-meta {
    font-size: 12px !important;
    color: var(--global-palette5, #4a5568) !important;
}

.kb-posts.kb-posts-style-unboxed .loop-entry .entry-summary p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--global-palette5, #4a5568) !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-posts.kb-posts-style-unboxed .loop-entry .entry-actions a,
.kb-posts.kb-posts-style-unboxed .loop-entry .post-more-link {
    font-family: var(--global-heading-font-family, Oswald, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

/* Same 28px gutter as the guides grid; it was 40px. */
.kb-posts.grid-cols {
    grid-gap: 28px !important;
    gap: 28px !important;
}

/* Pricing plans were the last card outlier: 7px corners, no border, and a grey
   fill instead of white. Same card as everything else now, with the middle
   plan keeping the accent fill as the "featured" variant. The three columns
   are stretched and the buttons pushed to the bottom edge so they line up —
   they used to sit at three different heights (588 / 564 / 593px). */
.kadence-column2_d5289e-ec,
.kadence-column2_3243f1-f9,
.kadence-column2_f4225d-37 {
    display: flex;
}

.kadence-column2_d5289e-ec > .kt-inside-inner-col,
.kadence-column2_3243f1-f9 > .kt-inside-inner-col,
.kadence-column2_f4225d-37 > .kt-inside-inner-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-radius: var(--ld-radius-card) !important;
}

.kadence-column2_d5289e-ec > .kt-inside-inner-col,
.kadence-column2_f4225d-37 > .kt-inside-inner-col {
    background-color: var(--ld-card-surface) !important;
    border: var(--ld-card-border) solid var(--ld-card-line) !important;
}

.kadence-column2_3243f1-f9 > .kt-inside-inner-col {
    background-color: var(--global-palette1, #65b5f9) !important;
    border: var(--ld-card-border) solid var(--global-palette2, #081e3d) !important;
}

.kadence-column2_d5289e-ec .wp-block-kadence-advancedbtn,
.kadence-column2_3243f1-f9 .wp-block-kadence-advancedbtn,
.kadence-column2_f4225d-37 .wp-block-kadence-advancedbtn {
    /* !important because Kadence prints a fixed margin-top:48px for this block
       inline in the head, at the same specificity but later in the cascade. */
    margin-top: auto !important;
    padding-top: 48px;
}

/* Pricing PAGE (/pricing/, blocks 483_*) — not the home page block above.
   The three plan names are full sentences set at 64px, which is the price
   size, not a name size. At that size they wrapped to four lines and the
   browser broke a word mid-letter ("eCommerc / e Store"). Brought down to a
   heading size; the price still carries the weight because it is the only
   thing in the line. */
.kt-adv-heading483_34657b-c4,
.kt-adv-heading483_eb4a37-e2,
.kt-adv-heading483_06acf5-83 {
    font-size: clamp(22px, 2.2vw, 28px) !important;
    line-height: 1.25 !important;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* 40px on the testimonial panel was the only radius of its kind on the site. */
.kb-row-layout-id2_ead4f6-8b {
    border-radius: var(--ld-radius-card) !important;
}

/* --------------------------------------------------------------------------
   3. EYEBROWS

   The small uppercase label above a section heading ("How it works",
   "Testimonials", "Free guides"). Two of the three already used Oswald 17/400
   with 1px tracking in navy, so that is the token; the contact CTA was the
   odd one out at 14.4px with no tracking and a different colour.
   -------------------------------------------------------------------------- */
.kt-adv-heading2_b32541-91 {
    font-size: 17px !important;
    letter-spacing: 1px !important;
    color: var(--global-palette2, #081e3d) !important;
}

/* --------------------------------------------------------------------------
   4. MOTION

   Everything above animates. Respect the OS setting.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .kb-posts.kb-posts-style-unboxed .loop-entry,
    .kb-posts.kb-posts-style-unboxed .loop-entry .post-thumbnail img,
    .fluentform .ff-btn-submit {
        transition: none !important;
    }

    .kb-posts.kb-posts-style-unboxed .loop-entry:hover {
        transform: none;
    }

    .kb-posts.kb-posts-style-unboxed .loop-entry:hover .post-thumbnail img {
        transform: none;
    }
}