/* ==============================================================================================================
   CMS MIGRATION LANDING PAGE – page-only styles
   Page: cms-migration-services.html (body class "landing-page cms-migration-page")
   No Figma frame yet. Everything on the page reuses the shared landing blocks in styles.css (.ldhero, .ld,
   .ldchip, .ldcard, .ldstep, .ldcap, .ldfaq, .cta); the only thing styles.css has no pattern for is the
   before / after comparison table, so that one block lives here. Loaded after styles.css.
   ============================================================================================================== */

/* ---------- COMPARISON TABLE (legacy CMS vs a modern build; 3 columns, rows 24 padding, radius 24) ---------- */
.cms-migration-page .ldmig__wrap {
    --u: calc(100vw / 1920);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e4e4e7;
    border-radius: max(16px, calc(24 * var(--u)));
}

.cms-migration-page .ldmig__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #52525b;
    text-align: left;
}

.cms-migration-page .ldmig__table th,
.cms-migration-page .ldmig__table td {
    padding: max(16px, calc(24 * var(--u)));
    vertical-align: top;
    border-bottom: 1px solid #e4e4e7;
}

.cms-migration-page .ldmig__table thead th {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
    letter-spacing: var(--ls-h6);
    color: #09090b;
    background: #f4f4f5;
}

/* the row label column reads as the card title it would have been */
.cms-migration-page .ldmig__table tbody th {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: #09090b;
    white-space: nowrap;
}

.cms-migration-page .ldmig__table tbody tr:last-child th,
.cms-migration-page .ldmig__table tbody tr:last-child td {
    border-bottom: 0;
}

/* the "after" column is the one we are selling: ink text, faint tint */
.cms-migration-page .ldmig__table .ldmig__after {
    color: #09090b;
    background: rgba(141, 198, 63, .06);
}

.cms-migration-page .ldmig__note {
    margin-top: max(16px, calc(24 * var(--u)));
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: #71717a;
}

.cms-migration-page .ldmig__scroll-hint {
    display: none;
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #a1a1aa;
}

/* a horizontally scrollable table needs a visible hint on a phone */
@media (max-width: 900px), (orientation: portrait), (max-height: 540px) {
    .cms-migration-page .ldmig__table {
        font-size: 15px;
    }

    .cms-migration-page .ldmig__table th,
    .cms-migration-page .ldmig__table td {
        padding: 16px;
    }

    .cms-migration-page .ldmig__scroll-hint {
        display: block;
    }
}


/* ---------- Inline links inside the dark cards ----------
   .ldlink (styles.css) is ink-coloured and inline-flex, so it disappears into a dark card and breaks the line
   flow. Inside a card the links stay inline text, underlined in white. */
.cms-migration-page .ldcard__link {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, .45);
    transition: text-decoration-color .2s ease;
}

.cms-migration-page .ldcard__link:hover,
.cms-migration-page .ldcard__link:focus-visible {
    text-decoration-color: #fff;
}