/* ==========================================================================
   Certifreight Reports — Public Frontend
   Design system: ink/paper neutrals + a single blue accent, square corners,
   hairline rules, no gradients/shadows. Montserrat for display, Inter for body.
   ========================================================================== */

:root {
    --cf-ink: #14161c;
    --cf-surface: #ffffff;
    --cf-blue: #004AAC;
    --cf-blue-deep: #003580;
    --cf-lime: #AADF07;
    --cf-line: #e4e6ea;
    --cf-muted: #6b7280;

    /* Semantic "flagged" tone, deliberately outside the blue/lime brand pair
       so a compliance risk never reads as an accent. */
    --cf-amber: #9A5514;
    --cf-amber-bg: #FDF4EA;
    --cf-amber-line: #EBD6BC;

    --cf-font-display: 'Montserrat', sans-serif;
    --cf-font-body: 'Inter', sans-serif;

    --cf-radius: 6px;
    --cf-radius-lg: 10px;
    --cf-max-width: 1100px;
}

/* The active theme (Astra) wraps page content in a flex column
   (.ast-container { display: flex; flex-direction: column; }), which
   fights our own max-width/margin centering. Neutralize it, but only on
   the wrappers that actually contain our plugin's markup so the rest of
   the site (blog, other pages) keeps its normal theme layout untouched. */
.ast-container:has(.cf-product-page),
.ast-container:has(.cf-search-page) {
    display: block !important;
}

body.single-cf_product #content.site-content,
body.single-cf_product .site-content .ast-container {
    display: block !important;
}

.cf-search-page, .cf-product-page {
    font-family: var(--cf-font-body);
    color: var(--cf-ink);
    max-width: var(--cf-max-width);
    margin: 0 auto;
    padding: 56px 20px 96px;
}

.cf-search-page *, .cf-product-page * { box-sizing: border-box; }

.cf-search-page a:not(.cf-btn), .cf-product-page a:not(.cf-btn) { color: var(--cf-blue); }

/* -------------------- Search / Browse -------------------- */

.cf-search-header { margin-bottom: 32px; }

.cf-search-title {
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 8px 0;
}

.cf-search-subtitle {
    font-size: 15px;
    color: var(--cf-muted);
    margin: 0;
}

.cf-search-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px;
    margin-bottom: 32px;
    background: var(--cf-ink);
    border-radius: var(--cf-radius-lg);
    overflow: hidden;
}

.cf-search-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/search-banner-cargo-ship.jpg');
    background-size: cover;
    background-position: center;
}

.cf-search-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(20, 22, 28, 0.94) 0%, rgba(20, 22, 28, 0.82) 45%, rgba(20, 22, 28, 0.5) 100%);
}

.cf-search-banner-text,
.cf-search-banner-cta {
    position: relative;
    z-index: 1;
}

.cf-search-banner-heading {
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--cf-surface);
    margin: 0 0 4px 0;
}

.cf-search-banner-copy {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.cf-search-banner-cta { flex-shrink: 0; }

.cf-search-bar-wrap { margin-bottom: 20px; }

.cf-search-input {
    width: 100%;
    font-family: var(--cf-font-body);
    font-size: 16px;
    padding: 14px 16px;
    border: 1px solid var(--cf-ink);
    border-radius: var(--cf-radius);
    background: var(--cf-surface);
    color: var(--cf-ink);
    outline: none;
}

.cf-search-input:focus {
    border-color: var(--cf-blue);
    box-shadow: 0 0 0 1px var(--cf-blue);
}

.cf-search-input::placeholder { color: var(--cf-muted); }

.cf-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.cf-chip {
    font-family: var(--cf-font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    background: transparent;
    color: var(--cf-ink);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.cf-chip:hover { border-color: var(--cf-ink); }

.cf-chip-active,
.cf-chip-active:hover {
    background: var(--cf-ink);
    color: var(--cf-surface);
    border-color: var(--cf-ink);
}

.cf-chip:focus-visible,
.cf-search-input:focus-visible,
.cf-btn:focus-visible {
    outline: 2px solid var(--cf-blue);
    outline-offset: 2px;
}

.cf-results-list { display: flex; flex-direction: column; gap: 10px; }

.cf-results-list.cf-results-fade-in {
    animation: cf-fade-up 0.35s ease both;
}

.cf-results-loading {
    width: 110px;
    max-width: 30vw;
    aspect-ratio: 4 / 3;
    margin: 32px auto;
}

.cf-results-empty-lottie {
    width: 180px;
    max-width: 45vw;
    aspect-ratio: 1 / 1;
    margin: 12px auto 0;
}

.cf-results-empty {
    color: var(--cf-muted);
    text-align: center;
    padding: 8px 0 12px;
    font-size: 14px;
}

.cf-results-empty-cta { text-align: center; padding-bottom: 24px; }

.cf-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.cf-pagination-label {
    font-size: 13px;
    color: var(--cf-muted);
    font-variant-numeric: tabular-nums;
}

.cf-result-row {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius-lg);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cf-result-row:hover {
    border-color: var(--cf-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(20, 22, 28, 0.07);
}

/* Category doodle watermark - quiet, tiled, brand-blue line art per category.
   Each pattern file lives in assets/images/patterns/{category-slug}.svg. */
.cf-result-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 150px;
    opacity: 0.015;
    pointer-events: none;
}

.cf-result-row[data-category-slug="chemicals"]::before {
    background-image: url('../images/patterns/chemicals.svg');
}
.cf-result-row[data-category-slug="construction-materials"]::before {
    background-image: url('../images/patterns/construction-materials.svg');
}
.cf-result-row[data-category-slug="cosmetics-personal-care"]::before {
    background-image: url('../images/patterns/cosmetics-personal-care.svg');
}
.cf-result-row[data-category-slug="food-beverages"]::before {
    background-image: url('../images/patterns/food-beverages.svg');
}
.cf-result-row[data-category-slug="paper-hygiene"]::before {
    background-image: url('../images/patterns/paper-hygiene.svg');
}
.cf-result-row[data-category-slug="ppe-safety"]::before {
    background-image: url('../images/patterns/ppe-safety.svg');
}

.cf-result-main { position: relative; min-width: 0; }

.cf-result-title {
    font-family: var(--cf-font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
}

.cf-result-excerpt {
    font-size: 13px;
    line-height: 1.45;
    color: var(--cf-muted);
    margin: 4px 0 0;
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-result-aside {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    max-width: 46%;
}

.cf-result-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cf-muted);
    flex-shrink: 0;
}

.cf-result-code {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--cf-muted);
    line-height: 1.4;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-result-readmore {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-blue);
    white-space: nowrap;
    flex-shrink: 0;
}

.cf-result-arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    transition: transform 0.15s ease;
}

.cf-result-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 1px;
    background: var(--cf-ink);
    transform: translateY(-50%);
}

.cf-result-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--cf-ink);
    border-right: 1px solid var(--cf-ink);
    transform: translateY(-50%) rotate(45deg);
}

.cf-result-row:hover .cf-result-arrow { transform: translateX(3px); }

/* -------------------- Product / Report Preview -------------------- */

.cf-product-breadcrumb {
    font-size: 13px;
    color: var(--cf-muted);
    margin-bottom: 20px;
}

.cf-product-breadcrumb a { text-decoration: none; }
.cf-product-breadcrumb a:hover { text-decoration: underline; }
.cf-breadcrumb-sep { margin: 0 6px; }

.cf-product-header { margin-bottom: 28px; }

.cf-product-title {
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 12px 0;
}

.cf-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cf-badge {
    font-family: var(--cf-font-body);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border: 1px solid var(--cf-ink);
    border-radius: var(--cf-radius);
}

.cf-product-markets {
    font-size: 13px;
    color: var(--cf-muted);
}

/* ---- Report cover band ---- */

.cf-report-cover {
    position: relative;
    overflow: hidden;
    background: var(--cf-blue);
    color: #ffffff;
    border-radius: var(--cf-radius-lg);
    padding: 34px 36px;
    margin-bottom: 26px;
}

/* Category line-art watermark. The source SVGs are brand-blue stroke, which
   would vanish on a blue field - inverting to white keeps one asset set doing
   both jobs (search cards and this cover). */
.cf-report-cover-doodled::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cf-cover-doodle);
    background-repeat: repeat;
    background-size: 130px;
    filter: brightness(0) invert(1);
    opacity: 0.07;
    pointer-events: none;
}

.cf-report-cover > * { position: relative; z-index: 1; }

.cf-cover-kicker {
    font-family: var(--cf-font-display);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 10px;
}

.cf-cover-title {
    font-family: var(--cf-font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
    color: #ffffff;
    max-width: 24ch;
    text-wrap: balance;
    /* Product titles like Certifreight_RollOn_Standard_149_PREVIEW are a
       single token with no break opportunity, and the cover clips its overflow
       for the watermark - so on a phone the title was being cut off mid-word
       rather than wrapping. */
    overflow-wrap: break-word;
}

.cf-cover-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cf-cover-chip {
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    padding: 5px 11px;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
}

.cf-cover-chip-accent {
    background: var(--cf-lime);
    border-color: var(--cf-lime);
    color: var(--cf-ink);
}

/* ---- "Where shipments fail" ranked panel ---- */

.cf-risk-panel { margin-bottom: 34px; }

.cf-risk-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cf-risk-panel-head h2 {
    font-family: var(--cf-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--cf-ink);
    margin: 0;
}

.cf-risk-panel-head span { font-size: 12px; color: var(--cf-muted); }

.cf-risk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.cf-risk-item {
    background: var(--cf-amber-bg);
    border: 1px solid var(--cf-amber-line);
    border-radius: 9px;
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cf-risk-rank { display: flex; align-items: center; gap: 8px; }

.cf-risk-num {
    font-style: normal;
    font-family: var(--cf-font-display);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    background: var(--cf-amber);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
}

.cf-risk-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--cf-amber);
}

.cf-risk-title {
    font-family: var(--cf-font-display);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cf-ink);
    margin: 0;
    /* Extracted headlines vary in length; clamp so every card lines up. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-risk-detail {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cf-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- The report document ----
   The page container is 1100px, but the report body used to sit at 860px and
   left-flush inside it, so a one-sided 240px gap ran the whole length of the
   report while the cover, scope list and paywall all ran full width. A margin
   only reads as intentional when it is on both sides.

   So the document narrows and centres instead, and the tables - the one thing
   here that genuinely wants the extra room - bleed back out past it. */
.cf-report-view {
    --cf-doc: 960px;
    --cf-bleed: 50px;
}

/* Below this there is no slack left in the page to bleed into, and a table
   wider than its container would push the whole body sideways. */
@media (max-width: 1199px) {
    .cf-report-view { --cf-bleed: 0px; }
}

.cf-report-view .cf-product-breadcrumb,
.cf-report-view .cf-admin-preview-ribbon,
.cf-report-view .cf-report-cover,
.cf-report-view .cf-risk-panel,
.cf-report-view .cf-report-preview-wrap,
.cf-report-view .cf-readmore,
.cf-report-view .cf-scope,
.cf-report-view .cf-paywall {
    max-width: var(--cf-doc);
    margin-left: auto;
    margin-right: auto;
}

/* Product slugs, standard codes and HS numbers are single unbroken tokens with
   no natural break opportunity. On a narrow screen they either clip or push
   the whole page sideways unless told to break. */
.cf-report-view h1,
.cf-report-view h2,
.cf-report-view h3,
.cf-report-view h4,
.cf-report-view p,
.cf-report-view li,
.cf-report-view th,
.cf-report-view td,
.cf-report-view b,
.cf-report-view strong {
    overflow-wrap: break-word;
}

.cf-report-preview-wrap {
    position: relative;
}

.cf-report-preview {
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.8;
    /* Widened by the bleed so that overflow:hidden - which the height clamp
       needs - doesn't shear the breakout tables off at the document edge. The
       matching padding puts the prose back on the 960px measure. */
    margin-left: calc(var(--cf-bleed, 0px) * -1);
    margin-right: calc(var(--cf-bleed, 0px) * -1);
    padding-left: var(--cf-bleed, 0px);
    padding-right: var(--cf-bleed, 0px);
    /* JS clamps max-height to ~50% of natural content height. The fade is
       deliberately short - it only has to say "there's more", and the pricing
       follows immediately, rather than after a long stretch of blurred text. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
}

/* The blurred teaser of the first paywalled section is gone. It contradicted
   the Read more directly above it - the button said there was more to come,
   then more content appeared anyway, half-faded. The scope list names every
   locked section instead, which tells a visitor more than blurred text can. */

.cf-report-preview h3 {
    font-family: var(--cf-font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-left: 3px solid var(--cf-blue);
    padding-left: 10px;
    margin: 24px 0 10px 0;
}

.cf-report-preview p { margin: 0 0 14px 0; }

/* Tables bleed out past the document measure. The catalog's sequence and
   test-parameter tables carry six columns of real prose; at the old 860px
   every cell wrapped three or four lines and the table alone was most of the
   free preview's height. */
.cf-report-preview table {
    width: calc(100% + (var(--cf-bleed, 0px) * 2));
    margin: 0 0 20px calc(var(--cf-bleed, 0px) * -1);
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.55;
}

.cf-report-preview th,
.cf-report-preview td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.cf-report-preview thead th {
    font-family: var(--cf-font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--cf-ink);
    border-bottom: none;
}

.cf-report-preview tbody tr:nth-child(even) { background: #f6f7f9; }

/* Who arranges what is the most-scanned column in a sequence table, and as
   plain uppercase text it consumed a whole column of wrapping. Wrapped
   server-side by CF_Report_Sections::decorate() - the AI's own HTML carries no
   attributes, so this can't be a class the model was asked to emit. Importer
   borrows the amber already reserved for compliance flags, not a new hue. */
.cf-resp {
    display: inline-block;
    font-family: var(--cf-font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.cf-resp-exporter {
    background: rgba(0, 74, 172, 0.1);
    border-color: rgba(0, 74, 172, 0.24);
    color: var(--cf-blue-deep);
}

.cf-resp-importer {
    background: var(--cf-amber-bg);
    border-color: var(--cf-amber-line);
    color: var(--cf-amber);
}

.cf-resp-shared {
    background: #eef1f5;
    border-color: #d8dde5;
    color: #414855;
}

.cf-report-preview-full {
    -webkit-mask-image: none;
    mask-image: none;
    max-height: none;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clamped by the Read more button. -full turned the mask off, so the fade is
   reinstated for exactly as long as the block is collapsed. Must stay after
   the -full rule: same specificity, so source order decides. */
.cf-report-collapsed {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

/* ---- Read more ----
   The free sections used to render at full height, so on a long report the
   pricing sat several screens down. JS collapses them behind this button; the
   markup renders expanded so no-JS visitors and crawlers still get everything.

   Butted against the fade above and the teaser below, a button here reads as
   part of the text and gets skipped - hence the deliberate air on both sides
   and the centred position. */
.cf-readmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 38px auto 42px;
}

/* The markup ships hidden and JS reveals it. A class selector outranks the UA
   [hidden] rule, so without this the button would show for everyone including
   the no-JS visitors it is meant to stay out of the way of. */
.cf-readmore[hidden] { display: none; }

.cf-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--cf-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: var(--cf-blue);
    border: 1px solid var(--cf-blue);
    border-radius: 99px;
    padding: 12px 28px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cf-readmore-btn:hover,
.cf-readmore-btn:focus {
    background: var(--cf-blue-deep);
    border-color: var(--cf-blue-deep);
    color: #ffffff;
}

.cf-readmore-btn:focus-visible {
    outline: 2px solid var(--cf-blue);
    outline-offset: 3px;
}

.cf-readmore-chev {
    font-size: 11px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.cf-readmore-btn[aria-expanded="true"] .cf-readmore-chev { transform: rotate(180deg); }

.cf-readmore-hint {
    font-size: 12.5px;
    color: var(--cf-muted);
    margin: 0;
    text-align: center;
}

.cf-admin-preview-ribbon {
    background: var(--cf-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--cf-radius);
    margin-bottom: 20px;
}

/* ---- Locked-section scope list ----
   What's behind the wall, named. A visitor deciding whether to pay needs to
   see how much report is left, which blurred text can't tell them. */

.cf-scope {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--cf-line);
}

.cf-scope-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cf-scope-head h2 {
    font-family: var(--cf-font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cf-ink);
    margin: 0;
}

.cf-scope-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-amber);
    font-variant-numeric: tabular-nums;
}

.cf-scope-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cf-scope-item {
    border: 1px solid var(--cf-line);
    border-left: 3px solid #c9d2de;
    border-radius: var(--cf-radius);
    background: #fafbfc;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cf-scope-item b {
    font-family: var(--cf-font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cf-ink);
}

.cf-scope-item span {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cf-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Paywall ----
   Full width, under the report, on every viewport. It used to be a sticky
   card in a right-hand column, which stretched the text and pushed the
   pricing off to the side. */

.cf-paywall {
    margin-top: 28px;
    background: var(--cf-ink);
    color: #ffffff;
    border-radius: var(--cf-radius-lg);
    padding: 30px 32px 32px;
}

.cf-paywall-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cf-lime);
    margin: 0;
}

/* Astra sets colour directly on bare h1-h6, and a direct rule always beats an
   inherited value - so this must be set on the heading itself, not the card. */
.cf-paywall-title {
    font-family: var(--cf-font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    color: #ffffff;
    margin: 6px 0 18px;
    text-wrap: balance;
}

.cf-paywall-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 24px;
}

.cf-paywall-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.cf-paywall-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cf-paywall-tier {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--cf-radius);
    padding: 16px 16px 17px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cf-paywall-tier-on {
    border-color: var(--cf-lime);
    background: rgba(170, 223, 7, 0.09);
}

.cf-paywall-tier-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.cf-paywall-tier-name {
    font-family: var(--cf-font-display);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.cf-paywall-tier-price {
    font-family: var(--cf-font-display);
    font-size: 21px;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cf-paywall-tier-promise {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}

/* The comparison disclosure sits on the dark card here, so its light-surface
   defaults need re-tinting. */
.cf-paywall .cf-compare {
    border-top-color: rgba(255, 255, 255, 0.16);
    margin-top: 20px;
}

.cf-paywall .cf-compare-toggle { color: var(--cf-lime); }
.cf-paywall .cf-compare-table { color: #ffffff; }
.cf-paywall .cf-compare-table th,
.cf-paywall .cf-compare-table td { border-bottom-color: rgba(255, 255, 255, 0.13); }
.cf-paywall .cf-compare-table thead th { background: rgba(255, 255, 255, 0.1); }
.cf-paywall .cf-compare-table tbody th { color: rgba(255, 255, 255, 0.92); }
.cf-paywall .cf-compare-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); }
.cf-paywall .cf-compare-yes { background: var(--cf-lime); color: var(--cf-ink); }
.cf-paywall .cf-compare-no { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
.cf-paywall .cf-compare-note { color: rgba(255, 255, 255, 0.72); }

.cf-paywall-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: 22px;
    padding-top: 20px;
}

.cf-unlock-tick {
    flex: 0 0 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--cf-lime);
    color: var(--cf-ink);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.cf-unlock-from {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.66);
}

.cf-unlock-from b {
    display: block;
    font-family: var(--cf-font-display);
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cf-unlock-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Two-class selectors (0,2,0) on purpose: the generic
   `.cf-btn { border: 1px solid transparent }` rule is declared later in this
   file, and at equal specificity its shorthand resets any border-color set
   here - which is exactly how the outline button once ended up borderless.
   Scoping by class rather than by ancestor means these keep working wherever
   the buttons are placed. */
.cf-btn.cf-unlock-btn-primary,
.cf-btn.cf-unlock-btn-outline {
    text-align: center;
    padding: 12px 22px;
}

.cf-btn.cf-unlock-btn-primary {
    background: #ffffff;
    color: var(--cf-ink);
    border: 1px solid #ffffff;
}

.cf-btn.cf-unlock-btn-primary:hover {
    background: var(--cf-lime);
    border-color: var(--cf-lime);
    color: var(--cf-ink);
}

.cf-btn.cf-unlock-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.cf-btn.cf-unlock-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff;
}

/* -------------------- Buttons -------------------- */

.cf-btn {
    font-family: var(--cf-font-body);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--cf-radius);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cf-btn-primary {
    background: var(--cf-blue);
    color: var(--cf-surface);
    border-color: var(--cf-blue);
}

.cf-btn-primary:hover { background: var(--cf-blue-deep); border-color: var(--cf-blue-deep); }

.cf-btn-outline {
    background: transparent;
    color: var(--cf-ink);
    border-color: var(--cf-ink);
}

.cf-btn-outline:hover { background: var(--cf-ink); color: var(--cf-surface); }

.cf-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* -------------------- Accordion Wizard -------------------- */

/* Full site container width - the wizard is no longer capped at 640px, so the
   tier step's two-column feature lists get room to breathe. */
.cf-accordion-section {
    margin: 0 auto;
    padding-top: 8px;
}

/* -------------------- Pricing tier step (wizard step 1) -------------------- */

.cf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cf-step-intro {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cf-muted);
    margin: -8px 0 24px;
}

.cf-tier-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-tier-row {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid var(--cf-line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cf-tier-row:hover { border-color: #b9c4d4; }

.cf-tier-row.cf-tier-selected {
    border-color: var(--cf-blue);
    background: #f5f9ff;
    box-shadow: 0 0 0 3px rgba(0, 74, 172, 0.1);
}

/* The real radio stays in the DOM for keyboard/AT users; the visible control
   is the label beside it, so arrow-key navigation still works. */
.cf-tier-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.cf-tier-radio {
    flex: 0 0 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid #c3cad6;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cf-tier-row.cf-tier-selected .cf-tier-radio { border-color: var(--cf-blue); }

.cf-tier-row.cf-tier-selected .cf-tier-radio::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cf-blue);
}

.cf-tier-input:focus-visible + .cf-tier-radio {
    outline: 2px solid var(--cf-blue);
    outline-offset: 3px;
}

.cf-tier-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cf-tier-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.cf-tier-name {
    font-family: var(--cf-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--cf-ink);
}

.cf-tier-badge {
    font-style: normal;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: var(--cf-lime);
    color: var(--cf-ink);
    padding: 3px 8px;
    border-radius: 99px;
    margin-left: 8px;
    white-space: nowrap;
}

.cf-tier-price {
    font-family: var(--cf-font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--cf-blue);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cf-tier-promise {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cf-muted);
    margin: 0;
}

.cf-tier-toggle {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 2px 0;
    margin-top: 2px;
    font-family: var(--cf-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-blue);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cf-tier-toggle .cf-tier-toggle-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cf-tier-detail {
    list-style: none;
    margin: 8px 0 0;
    padding: 14px 0 0;
    border-top: 1px dashed var(--cf-line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 18px;
}

.cf-tier-detail li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cf-ink);
}

.cf-tier-detail li.cf-tier-feature-off { color: #a2a8b4; }

.cf-tier-tick {
    flex: 0 0 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--cf-blue);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.cf-tier-tick-no {
    background: #e3e7ee;
    color: #8a91a0;
}

.cf-tier-footnote {
    font-size: 12px;
    line-height: 1.55;
    color: #8a91a0;
    text-align: center;
    margin: 18px 0 0;
}

/* ---- "Compare at a Glance" disclosure ----
   Native <details>, so it needs no JS. Collapsed by default: it's a 14-row
   4-column table and the wizard card is only 640px wide. */

.cf-compare {
    margin-top: 16px;
    border-top: 1px dashed var(--cf-line);
    padding-top: 14px;
}

.cf-compare-toggle {
    font-family: var(--cf-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-blue);
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Safari still paints its own disclosure triangle without this. */
.cf-compare-toggle::-webkit-details-marker { display: none; }

.cf-compare-toggle::after {
    content: "\25BE";
    font-size: 10px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.cf-compare[open] .cf-compare-toggle::after { transform: rotate(180deg); }

/* The table can't reflow below ~460px, so it scrolls inside its own box
   rather than pushing the page sideways. */
.cf-compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
}

.cf-compare-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.4;
}

.cf-compare-table th,
.cf-compare-table td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--cf-line);
    vertical-align: top;
}

.cf-compare-table thead th {
    font-family: var(--cf-font-display);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--cf-ink);
    border-bottom: none;
    white-space: nowrap;
}

.cf-compare-table tbody th {
    font-weight: 500;
    color: var(--cf-ink);
}

.cf-compare-table tbody tr:nth-child(even) { background: #f6f7f9; }

.cf-compare-table td { text-align: center; }

.cf-compare-yes,
.cf-compare-no {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

.cf-compare-yes {
    background: var(--cf-blue);
    color: #ffffff;
}

.cf-compare-no {
    background: #e3e7ee;
    color: #8a91a0;
}

.cf-compare-note {
    color: var(--cf-muted);
    font-size: 11.5px;
}

/* Selected tier, pinned above the answers on the review step */
.cf-review-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #f5f9ff;
    border: 1px solid #cfe0f7;
    border-left: 3px solid var(--cf-blue);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.cf-review-tier-key {
    display: block;
    font-family: var(--cf-font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--cf-muted);
    margin-bottom: 2px;
}

.cf-review-tier-value {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cf-ink);
}

.cf-review-tier-value b {
    color: var(--cf-blue);
    font-variant-numeric: tabular-nums;
}

.cf-review-tier-change {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--cf-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cf-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}

/* Selected tier, echoed on the confirmation screen */
.cf-confirmation-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: var(--cf-blue);
    color: #ffffff;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 22px auto 0;
    max-width: 380px;
    text-align: left;
}

.cf-confirmation-tier-key {
    display: block;
    font-family: var(--cf-font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.cf-confirmation-tier-name {
    display: block;
    font-family: var(--cf-font-display);
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.cf-confirmation-tier-price {
    font-family: var(--cf-font-display);
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .cf-tier-detail { grid-template-columns: 1fr; }
    .cf-tier-row { padding: 14px 14px; }
    .cf-tier-price { font-size: 18px; }
    .cf-tier-badge { margin-left: 0; margin-top: 4px; display: inline-block; }
}

.cf-progress-indicator { margin-bottom: 32px; }

.cf-progress-label {
    display: block;
    font-family: var(--cf-font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cf-muted);
    margin-bottom: 10px;
}

.cf-progress-segments {
    display: flex;
    gap: 5px;
}

.cf-progress-segment {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--cf-line);
    transition: background 0.25s ease;
}

.cf-progress-segment.cf-segment-filled { background: var(--cf-lime); }

.cf-step {
    display: none;
}

.cf-step.cf-step-active {
    position: relative;
    display: block;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: 10px;
    padding: 36px;
    box-shadow: 0 2px 10px rgba(20, 22, 28, 0.05);
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cf-step.cf-step-active.cf-step-animate-in {
    opacity: 0;
    transform: translateX(14px);
    transition: none;
}

.cf-step-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    animation: cf-fade-up 0.2s ease both;
    z-index: 5;
}

.cf-step-loading-lottie { width: 90px; aspect-ratio: 4 / 3; }

.cf-step-loading-text {
    font-size: 13px;
    color: var(--cf-muted);
    margin: 0;
}

.cf-step-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cf-blue);
    margin-bottom: 10px;
}

.cf-step-heading {
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.35;
    margin: 0 0 24px 0;
}

.cf-step-fields { display: block; }

.cf-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--cf-muted);
    margin: 18px 0 6px 0;
}

.cf-step-fields .cf-field-label:first-child { margin-top: 0; }

/* Form fields span the full width of the wizard card / container. */
.cf-step-fields { max-width: none; }

.cf-field-input,
.cf-field-textarea,
.cf-field-select {
    width: 100%;
    font-family: var(--cf-font-body);
    font-size: 15px;
    padding: 11px 14px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface);
    color: var(--cf-ink);
}

.cf-field-input:focus,
.cf-field-textarea:focus,
.cf-field-select:focus {
    outline: none;
    border-color: var(--cf-blue);
    box-shadow: 0 0 0 1px var(--cf-blue);
}

.cf-field-textarea { resize: vertical; min-height: 90px; }

/* Field revealed by another field's answer ("Not listed here" → type it in).
   Indented under a rule so it reads as belonging to the control above it
   rather than as a new question. The explicit [hidden] rule is defensive:
   the theme sets display on plenty of bare elements, and a hidden field that
   still renders would be a confusing bug rather than a cosmetic one. */
.cf-field-conditional {
    margin-top: 4px;
    padding-left: 14px;
    border-left: 2px solid var(--cf-blue);
}

.cf-field-conditional[hidden] { display: none; }

.cf-field-conditional .cf-field-label { margin-top: 12px; }

.cf-field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cf-field-input.cf-input-invalid,
.cf-field-textarea.cf-input-invalid,
.cf-country-select.cf-input-invalid {
    border-color: #b3261e;
}

.cf-field-error {
    display: none;
    color: #b3261e;
    font-size: 12px;
    margin-top: 6px;
}

.cf-field-error.cf-visible { display: block; }

/* -------------------- Phone field: country select + dropdown -------------------- */

.cf-phone-field {
    position: relative;
    display: flex;
    gap: 8px;
}

.cf-country-select {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 12px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    background: var(--cf-surface);
    cursor: pointer;
    font-family: var(--cf-font-body);
    font-size: 15px;
    color: var(--cf-ink);
}

.cf-country-select:hover { border-color: var(--cf-ink); }

.cf-country-flag { font-size: 16px; line-height: 1; }

.cf-country-caret { font-size: 10px; color: var(--cf-muted); }

.cf-phone-input { flex: 1; min-width: 0; }

.cf-country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    max-width: 90vw;
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    box-shadow: 0 8px 24px rgba(20, 22, 28, 0.12);
    z-index: 20;
    padding: 8px;
}

.cf-country-search {
    width: 100%;
    font-family: var(--cf-font-body);
    font-size: 14px;
    padding: 9px 12px;
    border: 1px solid var(--cf-line);
    border-radius: var(--cf-radius);
    margin-bottom: 6px;
}

.cf-country-search:focus {
    outline: none;
    border-color: var(--cf-blue);
}

.cf-country-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.cf-country-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.cf-country-list li:hover,
.cf-country-list li.cf-country-highlighted {
    background: var(--cf-line);
}

.cf-country-list .cf-country-list-dial {
    color: var(--cf-muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.cf-country-list-empty {
    padding: 12px 10px;
    color: var(--cf-muted);
    font-size: 13px;
}

.cf-review-summary { font-size: 14px; }

.cf-review-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cf-line);
}

.cf-review-item dt { color: var(--cf-muted); }
.cf-review-item dd { margin: 0; text-align: right; font-weight: 500; }

.cf-step-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.cf-form-error {
    color: #b3261e;
    font-size: 13px;
    margin-top: 8px;
    display: none;
}

.cf-form-error.cf-visible { display: block; }

.cf-accordion.cf-fade-out {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cf-confirmation {
    text-align: center;
    padding: 24px 20px 48px;
}

.cf-confirmation-lottie {
    width: 200px;
    max-width: 55vw;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.cf-confirmation.cf-fade-in {
    animation: cf-fade-up 0.4s ease both;
}

.cf-confirmation h2 {
    font-family: var(--cf-font-display);
    font-size: 22px;
    margin: 0 0 10px 0;
}

.cf-confirmation p { color: var(--cf-muted); margin: 0; }

/* -------------------- Motion -------------------- */

@keyframes cf-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.cf-search-header,
.cf-product-header,
.cf-report-preview-wrap {
    animation: cf-fade-up 0.5s ease both;
}

.cf-product-header { animation-delay: 0.05s; }
.cf-report-preview-wrap { animation-delay: 0.1s; }

.cf-btn { transform: translateY(0); }
.cf-btn-primary:hover,
.cf-btn-outline:hover { transform: translateY(-1px); }

.cf-chip:hover:not(.cf-chip-active) { transform: translateY(-1px); }

/* -------------------- Reduced motion -------------------- */

@media (prefers-reduced-motion: reduce) {
    .cf-result-arrow,
    .cf-progress-fill,
    .cf-btn,
    .cf-readmore-btn,
    .cf-readmore-chev,
    .cf-report-preview,
    .cf-chip,
    .cf-step.cf-step-active,
    .cf-result-row,
    .cf-accordion.cf-fade-out {
        transition: none;
    }

    .cf-search-header,
    .cf-product-header,
    .cf-report-preview-wrap,
    .cf-confirmation.cf-fade-in,
    .cf-results-list.cf-results-fade-in,
    .cf-step-loading-overlay {
        animation: none;
    }
}

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

@media (max-width: 900px) {
    .cf-cover-title { font-size: 27px; max-width: none; }
    .cf-report-cover { padding: 28px 24px; }

    /* Three price columns stop fitting well before the feature list does. */
    .cf-paywall-tiers { grid-template-columns: 1fr; }
    .cf-paywall-list { grid-template-columns: 1fr; gap: 8px; }
    .cf-scope-grid { grid-template-columns: 1fr; }
}

/* ---- Report tables on narrow screens ----

   Between the desktop bleed and the phone there is a wide band - tablets,
   split-screen windows - where a six-column prose table is squeezed into the
   exact shape the whole layout review was about. Two stages:

   1. Down to 820px, tighten the type and padding and let the table scroll
      inside its own box rather than pushing the page body sideways.
   2. Below 820px, six columns of prose stop being a table in any useful
      sense, so each row becomes a card and the column heading is printed
      beside its value. Only tables CF_Report_Sections::label_cells() could
      read a <thead> from get this - the rest keep scrolling. */

@media (max-width: 1099px) {
    .cf-report-preview { font-size: 15px; line-height: 1.75; }

    .cf-report-preview table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }

    .cf-report-preview th,
    .cf-report-preview td {
        padding: 9px 10px;
        min-width: 132px;
    }

    /* The first column of a sequence table is a bare index - it never needs
       the same floor as a column of prose. */
    .cf-report-preview td:first-child,
    .cf-report-preview th:first-child { min-width: 0; }
}

@media (max-width: 820px) {
    .cf-table-labeled,
    .cf-table-labeled tbody,
    .cf-table-labeled tr {
        display: block;
        width: 100%;
    }

    /* The headings are repeated onto every cell below, so the header row would
       only be saying it twice. */
    .cf-table-labeled thead { display: none; }

    /* Scoped to beat `.cf-report-preview table` above, which is one element
       more specific than a bare class and would otherwise keep the scroll box
       on a table that no longer needs one. */
    .cf-report-preview table.cf-table-labeled {
        overflow-x: visible;
        font-size: 14px;
    }

    .cf-table-labeled tbody tr {
        border: 1px solid var(--cf-line);
        border-radius: var(--cf-radius);
        margin: 0 0 12px;
        background: var(--cf-surface);
        overflow: hidden;
    }

    /* Zebra striping reads as "alternate rows" and means nothing once each row
       is its own card. */
    .cf-report-preview .cf-table-labeled tbody tr:nth-child(even) { background: var(--cf-surface); }

    /* Exactly two children: the ::before label and the .cf-cell wrapper that
       label_cells() puts around every value. */
    .cf-table-labeled td {
        display: grid;
        grid-template-columns: minmax(84px, 30%) 1fr;
        gap: 12px;
        align-items: baseline;
        min-width: 0;
        padding: 9px 13px;
        border-bottom: 1px solid #eef0f3;
    }

    .cf-table-labeled .cf-cell { min-width: 0; }

    .cf-table-labeled tr td:last-child { border-bottom: none; }

    .cf-table-labeled td[data-cf-label]::before {
        content: attr(data-cf-label);
        font-family: var(--cf-font-display);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cf-muted);
        line-height: 1.5;
    }

    /* A cell the labeller couldn't name has no left column to sit beside. */
    .cf-table-labeled td:not([data-cf-label]) { display: block; }
}

@media (max-width: 640px) {
    .cf-report-cover { padding: 24px 20px; border-radius: var(--cf-radius); }
    .cf-cover-title { font-size: 23px; }
    .cf-cover-kicker { font-size: 10px; }
    .cf-cover-chip { font-size: 11px; padding: 4px 9px; }
    .cf-report-cover-doodled::after { background-size: 100px; }

    .cf-risk-list { grid-template-columns: 1fr; }
    .cf-risk-panel-head { gap: 4px; }
    .cf-risk-panel-head span { font-size: 11.5px; }
    /* On one column there's no card-height alignment to preserve, so let the
       full headline and explanation through rather than clamping. */
    .cf-risk-title,
    .cf-risk-detail {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
    }

    .cf-paywall {
        padding: 22px 20px 24px;
        border-radius: var(--cf-radius);
    }
    .cf-paywall-title { font-size: 20px; }
    .cf-paywall-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .cf-unlock-from b { font-size: 20px; }

    .cf-readmore { margin: 28px auto 30px; }
    .cf-readmore-btn { width: 100%; justify-content: center; }

    .cf-scope-head h2 { font-size: 17px; }
    /* One column has no card-height alignment to preserve, so let the full
       description through rather than clamping it. */
    .cf-scope-item span {
        display: block;
        -webkit-line-clamp: none;
        overflow: visible;
    }

    .cf-search-page, .cf-product-page { padding: 32px 16px 64px; }
    .cf-search-title { font-size: 24px; }
    .cf-result-category { display: none; }
    .cf-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .cf-result-aside {
        width: 100%;
        max-width: none;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .cf-result-code {
        white-space: normal;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: normal;
        word-break: normal;
        flex: 1 1 auto;
        min-width: 0;
    }
    .cf-result-readmore {
        margin-left: auto;
    }
    .cf-step.cf-step-active { padding: 24px 20px; }
    .cf-step-heading { font-size: 18px; }
    .cf-unlock-buttons { flex-direction: column; width: 100%; }
    .cf-unlock-buttons .cf-btn { width: 100%; text-align: center; }
    .cf-search-banner { flex-direction: column; align-items: flex-start; }
    .cf-search-banner-cta { width: 100%; text-align: center; }
    .cf-review-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .cf-review-item dd { text-align: left; }
    .cf-product-title { font-size: 22px; }
    .cf-pagination { flex-wrap: wrap; gap: 12px; }
    .cf-results-loading { width: 84px; margin: 24px auto; }
    .cf-results-empty-lottie { width: 140px; }
    .cf-confirmation-lottie { width: 150px; }
    .cf-step-loading-lottie { width: 70px; }
    .cf-step-loading-text { font-size: 12px; padding: 0 20px; text-align: center; }
}



/* ==========================================================================
   FOCUS BAR
   Replaces the theme header on the checker page. Standalone rather than
   scoped to .cf-landing, because it renders outside every landing section.
   ========================================================================== */

.cf-focusbar {
    --cfb-navy: #001A51;
    --cfb-green: #27B42A;
    --cfb-green-deep: #1F9522;

    width: 100%;
    background: var(--cfb-navy);
    font-family: var(--cf-font-body);
    box-sizing: border-box;
}

.cf-focusbar * { box-sizing: border-box; }

.cf-focusbar.is-sticky {
    position: sticky;
    top: 0;
    /* Above page content, well below the WP admin bar's 99999. */
    z-index: 100;
    box-shadow: 0 2px 14px rgba(0, 26, 81, .16);
}

/* position:sticky is cancelled by an overflow value on ANY ancestor, and the
   bar sits seven levels deep inside Astra's markup. Scoped to our own pages,
   so nothing else on the site is affected. */
.cf-no-header #page,
.cf-no-header #content,
.cf-no-header .site-content,
.cf-no-header .ast-container,
.cf-no-header #primary,
.cf-no-header .site-main,
.cf-no-header .ast-article-single,
.cf-no-header .entry-content { overflow: visible; }

/* The admin bar is fixed over the top of the viewport for logged-in users, so
   a sticky bar at top:0 would slide underneath it. */
body.admin-bar .cf-focusbar.is-sticky { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .cf-focusbar.is-sticky { top: 46px; }
}

/* Below 600px the admin bar scrolls away with the page, so the offset goes. */
@media (max-width: 600px) {
    body.admin-bar .cf-focusbar.is-sticky { top: 0; }
}

/* Breathing room under the bar, now that the theme header no longer supplies
   any. Checker pages only — the same wrappers keep their original spacing
   anywhere the header is still shown.

   All three sizes live here on purpose. The wrappers' own mobile padding is
   set much earlier in this file, so a base rule declared down here would
   outrank that media query at every width and quietly hand phones the
   desktop value. Same specificity means source order decides. */
.cf-checker-page .cf-search-page,
.cf-checker-page .cf-product-page { padding-top: 76px; }

@media (max-width: 1024px) {
    .cf-checker-page .cf-search-page,
    .cf-checker-page .cf-product-page { padding-top: 60px; }
}

@media (max-width: 767px) {
    .cf-checker-page .cf-search-page,
    .cf-checker-page .cf-product-page { padding-top: 44px; }
}

.cf-focusbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 68px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cf-focusbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }

.cf-focusbar-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.cf-focusbar-back:hover,
.cf-focusbar-back:focus { color: #ffffff; text-decoration: none; }

.cf-focusbar-arrow { width: 17px; height: 17px; flex: 0 0 auto; }

.cf-focusbar-rule { width: 1px; height: 26px; background: rgba(255, 255, 255, .18); flex: 0 0 auto; }

.cf-focusbar-brand { display: block; line-height: 0; }

.cf-focusbar-logo { height: 30px; width: auto; display: block; max-width: 100%; }

/* One logo file for both grounds, inverted rather than a second white asset -
   the same technique the report cover uses for the category line art. */
.cf-focusbar-logo.is-inverted { filter: brightness(0) invert(1); }

.cf-focusbar-call {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 11px 18px;
    border-radius: 6px;
    border: 1px solid var(--cfb-green);
    background: var(--cfb-green);
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.cf-focusbar-call:hover,
.cf-focusbar-call:focus {
    background: var(--cfb-green-deep);
    border-color: var(--cfb-green-deep);
    color: #ffffff;
    text-decoration: none;
}

.cf-focusbar-call:focus-visible,
.cf-focusbar-back:focus-visible { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 2px; }

.cf-focusbar-phone { width: 17px; height: 17px; flex: 0 0 auto; }

@media (max-width: 767px) {
    .cf-focusbar-inner { min-height: 60px; padding: 9px 5%; gap: 12px; }
    /* The label goes, the arrow stays - the target is still tappable. */
    .cf-focusbar-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cf-focusbar-rule { display: none; }
    .cf-focusbar-logo { height: 26px; }
    .cf-focusbar-call { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-focusbar-back, .cf-focusbar-call { transition: none; }
}

/* ==========================================================================
   LANDING PAGE SECTIONS
   Styles for the six [certicheck_*] shortcodes. Deliberately self-contained:
   these render inside Elementor containers, not inside .cf-search-page or
   .cf-product-page, so nothing here may inherit from those wrappers.

   The palette is scoped to .cf-landing rather than overwriting the :root
   tokens, so the wizard, search page and report keep the #004AAC they were
   signed off with. Rolling this palette through the rest of the plugin is a
   separate, deliberate change.
   ========================================================================== */

.cf-landing {
    --cfl-ink: #000000;
    --cfl-navy: #001A51;
    --cfl-blue: #0056F1;
    --cfl-blue-deep: #0043C4;
    --cfl-green: #27B42A;
    --cfl-green-deep: #1F9522;
    --cfl-blue-soft: #E8F0FE;
    --cfl-green-soft: #E8F7E9;
    --cfl-navy-soft: #E6EAF2;
    --cfl-surface: #ffffff;
    --cfl-line: #E1E7F0;
    --cfl-muted: #5A6472;
    --cfl-wash: #F4F8FF;

    --cfl-max: 1200px;
    --cfl-gutter: 24px;
    --cfl-pad-y: 72px;

    display: block;
    font-family: var(--cf-font-body);
    color: var(--cfl-ink);
    font-size: 16px;
    line-height: 1.6;
}

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

.cf-landing-inner {
    max-width: var(--cfl-max);
    margin: 0 auto;
    padding: var(--cfl-pad-y) var(--cfl-gutter);
}

/* "full" hands width control back to the page builder's own container, so a
   section dropped inside an already-constrained Elementor column is not
   measured twice. */
.cf-landing-w-full > .cf-landing-inner { max-width: none; padding-left: 0; padding-right: 0; }

.cf-landing-bg-white { background: var(--cfl-surface); }
.cf-landing-bg-wash  { background: var(--cfl-wash); }
.cf-landing-bg-navy  { background: var(--cfl-navy); }
.cf-landing-bg-none  { background: transparent; }

/* Astra applies direct colour rules to bare h1-h6, and a direct rule always
   beats an inherited value - every heading below therefore sets its own
   colour explicitly rather than relying on a parent. */
.cf-landing h2,
.cf-landing h3 { font-family: var(--cf-font-display); font-weight: 700; }

.cf-landing p { margin: 0; }

.cf-landing a:not(.cf-btn) { text-decoration: none; }

/* Default size for any icon that has no rule of its own. Without this an
   unsized inline <svg> falls back to the SVG default of roughly 300x150 and
   destroys whatever row it is in - which is exactly what went wrong in the
   mockup this bar came from. */
.cf-landing svg { display: block; flex: 0 0 auto; width: 20px; height: 20px; }

.cf-landing .cf-inline-icon { width: 17px; height: 17px; }
.cf-landing .cf-btn-icon { width: 18px; height: 18px; }

/* Astra wraps page content in a flex column which fights our own centering.
   Same neutralisation the search and product pages already needed. */
.ast-container:has(.cf-landing) { display: block !important; }

/* -------------------- Shared: section heading -------------------- */

.cf-landing .cf-sec-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 36px;
}

.cf-landing .cf-sec-head--center { align-items: center; text-align: center; }

.cf-landing .cf-sec-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cfl-blue);
}

.cf-landing .cf-sec-kicker--green { color: var(--cfl-green-deep); }

.cf-landing .cf-sec-title {
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.14;
    letter-spacing: -.022em;
    margin: 0;
    color: var(--cfl-navy);
    text-wrap: balance;
}

.cf-landing .cf-sec-title em { font-style: normal; color: var(--cfl-green); }

.cf-landing .cf-sec-sub {
    font-size: 16px;
    color: var(--cfl-muted);
    max-width: 62ch;
}

.cf-landing .cf-sec-head--center .cf-sec-sub { margin-left: auto; margin-right: auto; }

/* -------------------- Shared: buttons -------------------- */
/* Declared after the global .cf-btn block and under a two-class selector, so
   the shorthand `border` on .cf-btn cannot reset these. */

.cf-landing .cf-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--cf-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 14px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cf-landing .cf-btn-primary { background: var(--cfl-blue); border: 1px solid var(--cfl-blue); color: #ffffff; }
.cf-landing .cf-btn-primary:hover,
.cf-landing .cf-btn-primary:focus { background: var(--cfl-blue-deep); border-color: var(--cfl-blue-deep); color: #ffffff; }

.cf-landing .cf-btn-outline { background: transparent; border: 1px solid var(--cfl-blue); color: var(--cfl-blue); }
.cf-landing .cf-btn-outline:hover,
.cf-landing .cf-btn-outline:focus { background: var(--cfl-blue-soft); color: var(--cfl-blue-deep); }

.cf-landing .cf-btn:focus-visible { outline: 3px solid rgba(0, 86, 241, .4); outline-offset: 2px; }

/* -------------------- Shared: colour tints -------------------- */

.cf-landing .t-blue  { --cfl-tint: var(--cfl-blue);  --cfl-tint-soft: var(--cfl-blue-soft); }
.cf-landing .t-green { --cfl-tint: var(--cfl-green); --cfl-tint-soft: var(--cfl-green-soft); }
.cf-landing .t-navy  { --cfl-tint: var(--cfl-navy);  --cfl-tint-soft: var(--cfl-navy-soft); }

/* -------------------- Shared: grid column counts -------------------- */

.cf-landing .cf-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-landing .cf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-landing .cf-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-landing .cf-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* -------------------- 1 - Finder -------------------- */

.cf-landing--finder .cf-finder {
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    padding: 44px 36px;
}

.cf-landing--finder .cf-sec-head { margin-bottom: 30px; }

/* The input and the button are two halves of one control, so they are given
   one explicit shared height rather than being left to arrive at the same
   size through padding plus line-height. Astra's Customizer sets line-height
   on `input` and on `button` from separate variables, so metric-based sizing
   put the two halves on two independently-changeable measurements — they
   matched only by luck, and drifted apart the moment either was edited.

   Both selectors are element-qualified (0,2,1) so they outrank Astra's own
   `input[type=search]` and button rules without needing !important. */
.cf-landing .cf-finder-form {
    display: flex;
    align-items: stretch;
    margin: 0 auto;
    max-width: 860px;
    --cfl-field-h: 58px;
}

.cf-landing input.cf-finder-input,
.cf-landing button.cf-finder-submit {
    box-sizing: border-box;
    height: var(--cfl-field-h);
    min-height: var(--cfl-field-h);
    padding-top: 0;
    padding-bottom: 0;
    border-width: 1px;
    border-style: solid;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.cf-landing input.cf-finder-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    font-family: var(--cf-font-body);
    font-size: 16px;
    line-height: normal;
    color: var(--cfl-ink);
    background: #ffffff;
    padding-left: 18px;
    padding-right: 18px;
    border-color: var(--cfl-line);
    border-right-width: 0;
    border-radius: 8px 0 0 8px;
}

.cf-landing .cf-finder-input::placeholder { color: #98A2B3; opacity: 1; }

.cf-landing input.cf-finder-input:focus {
    outline: none;
    border-color: var(--cfl-blue);
    box-shadow: inset 0 0 0 1px var(--cfl-blue);
}

.cf-landing button.cf-finder-submit {
    flex: 0 0 auto;
    padding-left: 28px;
    padding-right: 28px;
    border-color: var(--cfl-blue);
    border-radius: 0 8px 8px 0;
    line-height: 1;
}

.cf-landing .cf-finder-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 20px auto 0;
    max-width: 860px;
}

.cf-landing .cf-finder-popular-label {
    font-size: 13.5px;
    color: var(--cfl-muted);
    margin-right: 2px;
}

.cf-landing .cf-chip-link {
    font-size: 13.5px;
    color: var(--cfl-ink);
    background: #ffffff;
    border: 1px solid var(--cfl-line);
    border-radius: 999px;
    padding: 8px 16px;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.cf-landing .cf-chip-link:hover,
.cf-landing .cf-chip-link:focus {
    border-color: var(--cfl-blue);
    color: var(--cfl-blue);
    background: var(--cfl-blue-soft);
}

/* -------------------- 2 - Categories -------------------- */

.cf-landing .cf-cat-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.cf-landing .cf-cat-head .cf-sec-head { margin-bottom: 0; }

.cf-landing .cf-cat-all {
    font-size: 15px;
    font-weight: 600;
    color: var(--cfl-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding-bottom: 4px;
}

.cf-landing .cf-cat-all:hover { text-decoration: underline; }

.cf-landing .cf-cat-grid { display: grid; gap: 16px; }

.cf-landing .cf-cat-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 24px 24px;
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.cf-landing .cf-cat-card:hover,
.cf-landing .cf-cat-card:focus-visible {
    border-color: var(--cfl-tint, var(--cfl-blue));
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 26, 81, .07);
}

.cf-landing .cf-cat-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--cfl-tint-soft, var(--cfl-blue-soft));
    color: var(--cfl-tint, var(--cfl-blue));
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-landing .cf-cat-icon svg { width: 42px; height: 42px; }

.cf-landing .cf-cat-name {
    font-size: 17px;
    line-height: 1.25;
    margin: 0;
    color: var(--cfl-navy);
}

.cf-landing .cf-cat-desc {
    font-size: 14px;
    color: var(--cfl-muted);
    line-height: 1.55;
    flex: 1 1 auto;
}

.cf-landing .cf-cat-count {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cfl-tint, var(--cfl-blue));
    font-variant-numeric: tabular-nums;
}

/* -------------------- 3 - How it works -------------------- */

.cf-landing .cf-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.cf-landing .cf-flow-card {
    position: relative;
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    padding: 28px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The dashed connector sits in the gutter between cards, so it must not be
   drawn after the last one. */
.cf-landing .cf-flow-card::after {
    content: "";
    position: absolute;
    top: 51px;
    right: -20px;
    width: 22px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #B9C7DC 0 4px, transparent 4px 8px);
}

.cf-landing .cf-flow-card:last-child::after { display: none; }

.cf-landing .cf-flow-num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    background: var(--cfl-blue);
    color: #ffffff;
}

.cf-landing .cf-flow-check { width: 21px; height: 21px; }

.cf-landing .cf-flow-card--end { border-color: rgba(39, 180, 42, .4); }
.cf-landing .cf-flow-card--end .cf-flow-num { background: var(--cfl-green); }

.cf-landing .cf-flow-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
    color: var(--cfl-navy);
}

.cf-landing .cf-flow-copy { font-size: 14.5px; color: var(--cfl-muted); line-height: 1.6; }

.cf-landing .cf-flow-foot {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.cf-landing .cf-flow-note { font-size: 14px; color: var(--cfl-muted); }

/* -------------------- 4 - Why us -------------------- */

.cf-landing .cf-why-grid { display: grid; gap: 18px; }

.cf-landing .cf-why-card {
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cf-landing .cf-why-card:hover {
    border-color: var(--cfl-tint, var(--cfl-blue));
    box-shadow: 0 8px 22px rgba(0, 26, 81, .06);
}

.cf-landing .cf-why-mark {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--cfl-tint-soft, var(--cfl-blue-soft));
    color: var(--cfl-tint, var(--cfl-blue));
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-landing .cf-why-mark svg { width: 28px; height: 28px; }

.cf-landing .cf-why-title {
    font-size: 17px;
    line-height: 1.3;
    margin: 0;
    color: var(--cfl-navy);
}

.cf-landing .cf-why-copy { font-size: 14.5px; color: var(--cfl-muted); line-height: 1.62; }

/* -------------------- 5 - Deliverables (report anatomy) -------------------- */

.cf-landing .cf-anat {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.cf-landing .cf-page {
    background: #ffffff;
    border: 1px solid var(--cfl-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0, 26, 81, .12);
}

.cf-landing .cf-page-cover {
    background: var(--cfl-navy);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cf-landing .cf-page-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8FBBFF;
}

.cf-landing .cf-page-title {
    font-size: 21px;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
}

.cf-landing .cf-page-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

.cf-landing .cf-page-chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .82);
}

.cf-landing .cf-page-chip--green { background: rgba(39, 180, 42, .24); color: #B6EFB7; }

.cf-landing .cf-page-toc { padding: 22px 26px 26px; display: flex; flex-direction: column; }

.cf-landing .cf-page-toc-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cfl-muted);
    margin-bottom: 13px;
}

.cf-landing .cf-toc-row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dotted var(--cfl-line);
    font-size: 13.5px;
}

.cf-landing .cf-toc-row:last-child { border-bottom: 0; }

.cf-landing .cf-toc-n {
    flex: 0 0 20px;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cfl-blue);
}

.cf-landing .cf-toc-name { flex: 1 1 auto; color: var(--cfl-ink); }
.cf-landing .cf-toc-pg { font-size: 11.5px; color: var(--cfl-muted); font-variant-numeric: tabular-nums; }

.cf-landing .cf-toc-row--key .cf-toc-name { font-weight: 600; }
.cf-landing .cf-toc-row--key .cf-toc-n { color: var(--cfl-green-deep); }

.cf-landing .cf-anat-side .cf-sec-head { margin-bottom: 28px; }

.cf-landing .cf-anat-list { display: flex; flex-direction: column; gap: 22px; }

.cf-landing .cf-anat-item { display: flex; gap: 16px; }

.cf-landing .cf-anat-mark {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cfl-tint-soft, var(--cfl-blue-soft));
    color: var(--cfl-tint, var(--cfl-blue));
}

.cf-landing .cf-anat-mark svg { width: 25px; height: 25px; }

.cf-landing .cf-anat-body h3 {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 5px;
    color: var(--cfl-navy);
}

.cf-landing .cf-anat-body p { font-size: 14.5px; color: var(--cfl-muted); line-height: 1.6; }

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

.cf-landing .cf-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.cf-landing .cf-tier {
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    position: relative;
}

.cf-landing .cf-tier--rec {
    border: 2px solid var(--cfl-blue);
    padding: 31px 27px;
    box-shadow: 0 12px 34px rgba(0, 86, 241, .11);
}

.cf-landing .cf-tier-badge {
    position: absolute;
    top: -12px;
    left: 28px;
    background: var(--cfl-blue);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 5px;
}

.cf-landing .cf-tier-name { font-size: 19px; margin: 0; color: var(--cfl-navy); }

.cf-landing .cf-tier-price {
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--cfl-navy);
}

.cf-landing .cf-tier--rec .cf-tier-price { color: var(--cfl-blue); }

.cf-landing .cf-tier-price small {
    font-family: var(--cf-font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--cfl-muted);
}

.cf-landing .cf-tier-promise {
    font-size: 14.5px;
    color: var(--cfl-ink);
    padding-bottom: 17px;
    border-bottom: 1px solid var(--cfl-line);
}

.cf-landing .cf-tier-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.cf-landing .cf-tier-features li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.cf-landing .cf-tier-features li svg { width: 17px; height: 17px; margin-top: 3px; }

.cf-landing .cf-feat-yes { color: var(--cfl-green); }
.cf-landing .cf-feat-no { color: #BFC7D2; }
.cf-landing .cf-tier-features li.is-out { color: #98A2B3; }

.cf-landing .cf-tier .cf-btn { justify-content: center; width: 100%; }

.cf-landing .cf-tier-foot {
    margin-top: 26px;
    font-size: 13.5px;
    color: var(--cfl-muted);
    line-height: 1.65;
    max-width: 80ch;
}

/* The comparison panel is shared with the wizard and the report paywall, so
   it is only recoloured inside a landing section - never restyled globally. */
.cf-landing .cf-compare {
    margin-top: 24px;
    border: 1px solid var(--cfl-line);
    border-radius: 10px;
    background: var(--cfl-surface);
    overflow: hidden;
}

.cf-landing .cf-compare-toggle {
    padding: 17px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cfl-blue);
}

.cf-landing .cf-compare-table thead th { background: var(--cfl-navy); color: #ffffff; }
.cf-landing .cf-compare-yes { color: var(--cfl-green-deep); }
.cf-landing .cf-compare-no { color: #BFC7D2; }



/* -------------------- 7 - Contact -------------------- */

.cf-landing .cf-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 24px;
    align-items: start;
}

.cf-landing .cf-contact-methods { display: flex; flex-direction: column; gap: 14px; }

.cf-landing .cf-contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 22px;
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cf-landing .cf-contact-item:hover,
.cf-landing .cf-contact-item:focus-visible {
    border-color: var(--cfl-tint, var(--cfl-blue));
    box-shadow: 0 8px 22px rgba(0, 26, 81, .06);
}

.cf-landing .cf-contact-mark {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cfl-tint-soft, var(--cfl-blue-soft));
    color: var(--cfl-tint, var(--cfl-blue));
}

.cf-landing .cf-contact-mark svg { width: 24px; height: 24px; }

.cf-landing .cf-contact-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cf-landing .cf-contact-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--cfl-muted);
}

.cf-landing .cf-contact-value {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--cfl-navy);
    line-height: 1.45;
    overflow-wrap: break-word;
}

.cf-landing .cf-contact-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cfl-blue);
}

.cf-landing .cf-contact-item:hover .cf-contact-action { text-decoration: underline; }

/* Opening hours */
.cf-landing .cf-contact-hours {
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    padding: 24px 24px 20px;
}

.cf-landing .cf-hours-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--cfl-line);
}

.cf-landing .cf-hours-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    color: var(--cfl-navy);
}

.cf-landing .cf-hours-icon { width: 19px; height: 19px; color: var(--cfl-blue); }

.cf-landing .cf-hours-status {
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.cf-landing .cf-hours-status.is-open { background: var(--cfl-green-soft); color: var(--cfl-green-deep); }
.cf-landing .cf-hours-status.is-shut { background: #F1F4F9; color: var(--cfl-muted); }

.cf-landing .cf-hours-list { margin: 0; padding: 0; }

.cf-landing .cf-hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cfl-line);
}

.cf-landing .cf-hours-row:last-child { border-bottom: 0; }

.cf-landing .cf-hours-row dt,
.cf-landing .cf-hours-row dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--cfl-ink);
}

.cf-landing .cf-hours-row dd { font-variant-numeric: tabular-nums; text-align: right; }
.cf-landing .cf-hours-row dd.is-closed { color: var(--cfl-muted); }

.cf-landing .cf-hours-row.is-today dt,
.cf-landing .cf-hours-row.is-today dd { font-weight: 600; color: var(--cfl-navy); }

.cf-landing .cf-hours-today {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cfl-blue);
    background: var(--cfl-blue-soft);
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: 1px;
}

.cf-landing .cf-hours-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--cfl-muted);
    line-height: 1.55;
}

/* -------------------- 8 - FAQ -------------------- */

.cf-landing .cf-faq-list { display: grid; gap: 12px; }
.cf-landing .cf-faq-cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.cf-landing .cf-faq-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.cf-landing .cf-faq-item {
    background: var(--cfl-surface);
    border: 1px solid var(--cfl-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s ease;
}

.cf-landing .cf-faq-item[open] { border-color: var(--cfl-blue); }

.cf-landing .cf-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

/* Safari still paints the disclosure marker without this. */
.cf-landing .cf-faq-q::-webkit-details-marker { display: none; }

.cf-landing .cf-faq-q > h3,
.cf-landing .cf-faq-q > h4,
.cf-landing .cf-faq-q > h5 {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--cfl-navy);
}

.cf-landing .cf-faq-item[open] .cf-faq-q > h3,
.cf-landing .cf-faq-item[open] .cf-faq-q > h4,
.cf-landing .cf-faq-item[open] .cf-faq-q > h5 { color: var(--cfl-blue); }

.cf-landing .cf-faq-q:focus-visible { outline: 3px solid rgba(0, 86, 241, .4); outline-offset: -3px; }

/* A plus that becomes a minus - two bars, one of which rotates away. */
.cf-landing .cf-faq-sign {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cfl-blue-soft);
}

.cf-landing .cf-faq-sign::before,
.cf-landing .cf-faq-sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 1px;
    background: var(--cfl-blue);
    transform: translate(-50%, -50%);
    transition: transform .18s ease, opacity .18s ease;
}

.cf-landing .cf-faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.cf-landing .cf-faq-item[open] .cf-faq-sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.cf-landing .cf-faq-a { padding: 0 22px 22px; }

.cf-landing .cf-faq-a p {
    margin: 0;
    font-size: 15px;
    line-height: 1.68;
    color: var(--cfl-muted);
    max-width: 74ch;
}


/* Contact, navy variant - the page's one dark block, so it reads as an
   ending rather than the page simply stopping. The heading moves inside the
   panel and becomes its left column. */
.cf-landing .cf-contact-navy {
    background: var(--cfl-navy);
    border-radius: 14px;
    padding: 52px 44px;
}

.cf-landing .cf-contact-navy .cf-contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 48px;
}

.cf-landing .cf-contact-intro .cf-sec-head { margin-bottom: 0; }
.cf-landing .cf-contact-navy .cf-sec-kicker { color: #8FBBFF; }
.cf-landing .cf-contact-navy .cf-sec-title { color: #ffffff; }
.cf-landing .cf-contact-navy .cf-sec-sub { color: rgba(255, 255, 255, .68); }

.cf-landing .cf-contact-navy .cf-contact-methods { gap: 22px; margin-top: 26px; }

/* Stripped back to bare rows - a bordered card on a dark panel would just be
   a box inside a box. */
.cf-landing .cf-contact-navy .cf-contact-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 15px;
}

.cf-landing .cf-contact-navy .cf-contact-item:hover,
.cf-landing .cf-contact-navy .cf-contact-item:focus-visible { box-shadow: none; }

.cf-landing .cf-contact-navy .cf-contact-mark {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .1);
    color: #8FBBFF;
}

.cf-landing .cf-contact-navy .cf-contact-mark svg { width: 22px; height: 22px; }
.cf-landing .cf-contact-navy .cf-contact-label { color: rgba(255, 255, 255, .5); }
.cf-landing .cf-contact-navy .cf-contact-value { color: #ffffff; }
.cf-landing .cf-contact-navy .cf-contact-action { color: #8FBBFF; }

.cf-landing .cf-hours-cta {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

/* FAQ, ruled variant - hairline rules instead of cards, so six questions
   read as a list to scan rather than six things to evaluate. */
.cf-landing .cf-faq-ruled {
    max-width: 900px;
    border-top: 1px solid var(--cfl-line);
    gap: 0;
}

.cf-landing .cf-faq-ruled.is-centred { margin-left: auto; margin-right: auto; }

.cf-landing .cf-faq-ruled .cf-faq-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cfl-line);
    border-radius: 0;
}

/* The rule stays neutral when a panel opens; the question text carries the
   open state instead. */
.cf-landing .cf-faq-ruled .cf-faq-item[open] { border-color: var(--cfl-line); }

.cf-landing .cf-faq-ruled .cf-faq-q { padding: 24px 0; gap: 0; }

.cf-landing .cf-faq-ruled .cf-faq-q > h2,
.cf-landing .cf-faq-ruled .cf-faq-q > h3,
.cf-landing .cf-faq-ruled .cf-faq-q > h4,
.cf-landing .cf-faq-ruled .cf-faq-q > h5 { flex: 1 1 auto; font-size: 18px; }

.cf-landing .cf-faq-num {
    flex: 0 0 34px;
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cfl-green-deep);
    font-variant-numeric: tabular-nums;
}

.cf-landing .cf-faq-ruled .cf-faq-sign {
    background: transparent;
    width: 22px;
    height: 22px;
    margin-left: 18px;
}

.cf-landing .cf-faq-ruled .cf-faq-a { padding: 0 0 26px 34px; }

/* No number means no indent to line up with. */
.cf-landing .cf-faq-ruled .cf-faq-q:not(:has(.cf-faq-num)) + .cf-faq-a { padding-left: 0; }

/* ==========================================================================
   Landing - tablet and mobile
   ========================================================================== */

/* Tablet. 1024px is Elementor's own tablet breakpoint, so the editor's
   device preview matches what actually renders. */
@media (max-width: 1024px) {
    .cf-landing { --cfl-pad-y: 60px; --cfl-gutter: 22px; }

    .cf-landing .cf-cat-grid,
    .cf-landing .cf-why-grid,
    .cf-landing .cf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cf-landing .cf-cols-4,
    .cf-landing .cf-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Two across means every second card ends a row, so the connectors would
       point into nothing. */
    .cf-landing .cf-flow-card::after { display: none; }

    .cf-landing .cf-anat { gap: 40px; }
    .cf-landing .cf-tiers { gap: 16px; }
    .cf-landing .cf-tier { padding: 28px 22px; }
    .cf-landing .cf-tier--rec { padding: 27px 21px; }
    .cf-landing .cf-tier-price { font-size: 38px; }
    .cf-landing .cf-faq-cols-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet portrait: pricing and the report anatomy both need the full width. */
@media (max-width: 900px) {
    .cf-landing .cf-anat { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
    .cf-landing .cf-page { max-width: 460px; margin: 0 auto; }
    .cf-landing .cf-tiers { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
    .cf-landing .cf-tier--rec { order: -1; }
    .cf-landing .cf-tier-foot { margin-left: auto; margin-right: auto; }
    .cf-landing--finder .cf-finder { padding: 36px 26px; }
    .cf-landing .cf-contact-grid,
    .cf-landing .cf-contact-navy .cf-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cf-landing .cf-contact-navy { padding: 38px 30px; }
}

/* Mobile. 767px is Elementor's own mobile breakpoint. Padding here is the
   client's spec: 64px top and bottom, 5% left and right. The horizontal value
   is a percentage on purpose - it keeps the same optical margin from a 360px
   phone up to a 767px tablet, which a fixed pixel gutter does not. */
@media (max-width: 767px) {
    .cf-landing { --cfl-pad-y: 64px; --cfl-gutter: 5%; font-size: 15px; }

    .cf-landing .cf-sec-head { margin-bottom: 28px; gap: 9px; }
    .cf-landing .cf-sec-sub { font-size: 15px; }

    .cf-landing .cf-cat-grid,
    .cf-landing .cf-why-grid,
    .cf-landing .cf-flow,
    .cf-landing .cf-cols-2,
    .cf-landing .cf-cols-3,
    .cf-landing .cf-cols-4,
    .cf-landing .cf-cols-6 { grid-template-columns: minmax(0, 1fr); }

    .cf-landing .cf-cat-grid,
    .cf-landing .cf-why-grid,
    .cf-landing .cf-flow { gap: 14px; }

    .cf-landing--finder .cf-finder { padding: 30px 20px; border-radius: 10px; }

    .cf-landing .cf-finder-form { flex-direction: column; gap: 10px; --cfl-field-h: 54px; }
    .cf-landing input.cf-finder-input { border-right-width: 1px; border-radius: 8px; }
    .cf-landing button.cf-finder-submit { border-radius: 8px; width: 100%; justify-content: center; }

    .cf-landing .cf-cat-head { align-items: flex-start; gap: 14px; margin-bottom: 22px; }
    .cf-landing .cf-cat-card { padding: 24px 20px 20px; }
    .cf-landing .cf-cat-icon { width: 66px; height: 66px; }
    .cf-landing .cf-cat-icon svg { width: 36px; height: 36px; }

    .cf-landing .cf-flow-card { padding: 24px 20px; }
    .cf-landing .cf-flow-foot { margin-top: 30px; justify-content: flex-start; gap: 14px; }
    .cf-landing .cf-flow-foot .cf-btn { width: 100%; justify-content: center; }

    .cf-landing .cf-why-card { padding: 24px 20px; }

    .cf-landing .cf-page { max-width: none; }
    .cf-landing .cf-page-cover { padding: 20px; }
    .cf-landing .cf-page-toc { padding: 18px 20px 20px; }
    .cf-landing .cf-toc-row { font-size: 12.5px; }
    .cf-landing .cf-anat-list { gap: 18px; }
    .cf-landing .cf-anat-mark { width: 42px; height: 42px; }
    .cf-landing .cf-anat-mark svg { width: 23px; height: 23px; }

    .cf-landing .cf-tiers { max-width: none; }
    .cf-landing .cf-tier-price { font-size: 36px; }

    .cf-landing .cf-contact-item { padding: 18px; gap: 13px; }
    .cf-landing .cf-contact-mark { width: 42px; height: 42px; }
    .cf-landing .cf-contact-mark svg { width: 22px; height: 22px; }
    .cf-landing .cf-contact-hours { padding: 20px 18px 16px; }
    .cf-landing .cf-hours-row { padding: 8px 0; }
    .cf-landing .cf-hours-row dt,
    .cf-landing .cf-hours-row dd { font-size: 14px; }

    .cf-landing .cf-faq-q { padding: 17px 18px; gap: 12px; }
    .cf-landing .cf-faq-q > h3,
    .cf-landing .cf-faq-q > h4,
    .cf-landing .cf-faq-q > h5 { font-size: 15.5px; }
    .cf-landing .cf-faq-a { padding: 0 18px 18px; }
    .cf-landing .cf-faq-a p { font-size: 14.5px; }

    .cf-landing .cf-contact-navy { padding: 32px 20px; border-radius: 12px; }
    .cf-landing .cf-faq-ruled .cf-faq-q { padding: 20px 0; }
    .cf-landing .cf-faq-ruled .cf-faq-q > h2,
    .cf-landing .cf-faq-ruled .cf-faq-q > h3,
    .cf-landing .cf-faq-ruled .cf-faq-q > h4,
    .cf-landing .cf-faq-ruled .cf-faq-q > h5 { font-size: 16px; }
    .cf-landing .cf-faq-num { flex-basis: 26px; }
    .cf-landing .cf-faq-ruled .cf-faq-sign { margin-left: 12px; }
    .cf-landing .cf-faq-ruled .cf-faq-a { padding: 0 0 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-landing .cf-cat-card:hover { transform: none; }
}