/* ==========================================================================
   DIGITAL MARKETING PAGES — /google-ads and /email-marketing

   Editorial, corporate layout. Shared with the rest of the site: ONLY the
   home page's type (Montserrat / TK Heading for headings, Poppins / TK Body
   for text) and colour (#0073FC brand blue, near-black dark ground, #F3F6F8
   light ground). Everything else is deliberately restrained: hairline rules
   instead of glowing cards, numbered section labels, generous whitespace,
   real photography, and blue used only for actions and key figures.

   Theme: the custom properties on .dmx are the dark values; the
   html[data-tk-theme="light"] block swaps them, so the whole page follows
   the site's theme toggle.
   ========================================================================== */

.dmx {
    --x-blue: var(--primary-color, #0073FC);
    --x-blue-dark: var(--primary-color-dark, #005BC7);
    --x-bg: #070809;
    --x-bg-2: #0D0F11;
    --x-panel: #121518;
    --x-ink: #F3F5F7;
    --x-ink-2: rgba(243, 245, 247, 0.72);
    --x-ink-3: rgba(243, 245, 247, 0.48);
    --x-rule: rgba(255, 255, 255, 0.1);
    --x-rule-strong: rgba(255, 255, 255, 0.2);
    --x-head: var(--tk-heading-font, 'TK Heading', Montserrat, system-ui, sans-serif);
    --x-body: var(--tk-body-font, 'TK Body', Poppins, system-ui, sans-serif);

    position: relative;
    background: var(--x-bg);
    color: var(--x-ink);
    font-family: var(--x-body);
    font-size: 16px;
    line-height: 1.7;
}

html[data-tk-theme="light"] .dmx {
    --x-bg: #FFFFFF;
    --x-bg-2: #F3F6F8;
    --x-panel: #FFFFFF;
    --x-ink: #0A0D0F;
    --x-ink-2: #3E464F;
    --x-ink-3: #6B747E;
    --x-rule: rgba(15, 23, 42, 0.1);
    --x-rule-strong: rgba(15, 23, 42, 0.22);
}

.dmx *,
.dmx *::before,
.dmx *::after {
    box-sizing: border-box;
}

.dmx .container {
    max-width: 1220px;
}

.dmx a {
    text-decoration: none;
}

/* ---- section rhythm -------------------------------------------------------- */
.dmx-section {
    padding: 72px 0;
    border-top: 1px solid var(--x-rule);
}

.dmx-section--muted {
    background: var(--x-bg-2);
}

.dmx-section--flush {
    border-top: 0;
}

/* Section header: numbered label column + title column */
.dmx-head {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 40px;
    margin-bottom: 72px;
}

.dmx-label {
    display: flex;
    align-self: start;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    color: var(--x-ink-3);
    font-family: var(--x-head);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.dmx-label b {
    color: var(--x-blue);
    font-weight: 800;
}

.dmx-label::after {
    content: "";
    flex: 1 1 auto;
    max-width: 64px;
    height: 1px;
    background: var(--x-rule-strong);
}

.dmx-title {
    margin: 0;
    max-width: 860px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: clamp(32px, 3.9vw, 52px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.dmx-intro {
    margin: 24px 0 0;
    max-width: 680px;
    color: var(--x-ink-2);
    font-size: 18px;
    line-height: 1.7;
}

.dmx-p {
    margin: 0;
    color: var(--x-ink-2);
    font-size: 15.5px;
    line-height: 1.75;
}

.dmx-h3 {
    margin: 0 0 12px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* ---- buttons (same recipe as the home page CTAs) --------------------------- */
.dmx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

.dmx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: var(--x-head);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dmx-btn:hover {
    transform: translateY(-1px);
}

.dmx-btn--primary {
    background: linear-gradient(var(--x-blue), var(--x-blue-dark));
    color: #FFFFFF;
}

.dmx-btn--primary:hover {
    color: #FFFFFF;
}

.dmx-btn--line {
    border-color: var(--x-rule-strong);
    background: transparent;
    color: var(--x-ink);
}

.dmx-btn--line:hover {
    border-color: var(--x-ink);
    color: var(--x-ink);
}

.dmx-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 14px;
    font-weight: 800;
}

.dmx-link::after {
    content: "\2192";
    transition: transform 0.2s ease;
}

.dmx-link:hover {
    color: var(--x-blue);
}

.dmx-link:hover::after {
    transform: translateX(4px);
}

/* ---- hero ------------------------------------------------------------------- */
.dmx-hero {
    padding: 168px 0 72px;
}

.dmx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
}

.dmx-kicker {
    margin: 0 0 26px;
    color: var(--x-ink-3);
    font-family: var(--x-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dmx-kicker span {
    color: var(--x-blue);
}

.dmx-h1 {
    margin: 0;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
}

.dmx-h1 em {
    color: var(--x-blue);
    font-style: normal;
}

.dmx-lede {
    margin: 30px 0 0;
    max-width: 560px;
    color: var(--x-ink-2);
    font-size: 19px;
    line-height: 1.65;
}

/* real ratings from the site's review snapshots */
.dmx-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--x-rule);
}

.dmx-ratings li {
    padding: 20px 32px 0 0;
    margin-right: 32px;
}

.dmx-ratings li + li {
    padding-left: 32px;
    border-left: 1px solid var(--x-rule);
}

.dmx-ratings strong {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.dmx-stars {
    color: var(--x-blue);
    font-size: 14px;
    letter-spacing: 2px;
}

.dmx-ratings span {
    display: block;
    margin-top: 8px;
    color: var(--x-ink-3);
    font-size: 13px;
}

.dmx-ratings a {
    color: inherit;
}

.dmx-ratings a:hover {
    color: var(--x-ink);
}

.dmx-figure {
    position: relative;
    margin: 0;
}

.dmx-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.dmx-figure figcaption {
    margin-top: 14px;
    color: var(--x-ink-3);
    font-size: 13px;
}

/* full-width typographic hero (email page) */
.dmx-hero--type .dmx-h1 {
    max-width: 1060px;
    font-size: clamp(42px, 6.2vw, 88px);
}

.dmx-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
    margin-top: 56px;
}

.dmx-hero-row .dmx-lede {
    margin-top: 0;
}

.dmx-hero-row .dmx-actions {
    margin-top: 32px;
}

.dmx-glance {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--x-rule-strong);
}

.dmx-glance li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid var(--x-rule);
    color: var(--x-ink-2);
    font-size: 15px;
}

.dmx-glance li b {
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 13px;
    font-weight: 800;
}

.dmx-glance li strong {
    color: var(--x-ink);
    font-weight: 600;
}

/* ---- statement --------------------------------------------------------------- */
.dmx-statement {
    margin: 0;
    max-width: 1020px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: clamp(26px, 2.9vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.32;
}

.dmx-statement span {
    color: var(--x-ink-3);
}

.dmx-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 80px;
    border-top: 1px solid var(--x-rule-strong);
}

.dmx-columns > div {
    padding: 32px 40px 0 0;
}

.dmx-columns > div + div {
    padding-left: 40px;
    border-left: 1px solid var(--x-rule);
}

.dmx-columns h3 {
    margin: 0 0 12px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 18px;
    font-weight: 800;
}

/* ---- index (numbered rows) -------------------------------------------------- */
.dmx-index {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--x-rule-strong);
}

.dmx-index > li {
    display: grid;
    grid-template-columns: 80px minmax(0, 3.2fr) minmax(0, 5fr) minmax(0, 3.6fr);
    gap: 32px;
    padding: 36px 0;
    border-bottom: 1px solid var(--x-rule);
    transition: background 0.25s ease;
}

.dmx-index > li:hover {
    background: linear-gradient(90deg, transparent, var(--x-bg-2) 30%, var(--x-bg-2) 70%, transparent);
}

.dmx-index-num {
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.dmx-index h3 {
    margin: 0;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.dmx-index-tags {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--x-ink-3);
    font-size: 14px;
    line-height: 1.9;
}

/* ---- explainer (auction) ---------------------------------------------------- */
.dmx-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    padding: 40px 44px;
    border: 1px solid var(--x-rule-strong);
    border-radius: 18px;
    background: var(--x-panel);
    font-family: var(--x-head);
}

.dmx-formula-term {
    color: var(--x-ink);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.dmx-formula-term small {
    display: block;
    margin-top: 4px;
    color: var(--x-ink-3);
    font-family: var(--x-body);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
}

.dmx-formula-op {
    color: var(--x-blue);
    font-size: 28px;
    font-weight: 800;
}

.dmx-formula-term--result {
    color: var(--x-blue);
}

.dmx-factors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 56px;
}

.dmx-factors > div {
    padding: 0 40px 0 0;
}

.dmx-factors > div + div {
    padding-left: 40px;
    border-left: 1px solid var(--x-rule);
}

.dmx-factor-tag {
    display: block;
    margin-bottom: 18px;
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dmx-note {
    margin: 40px 0 0;
    color: var(--x-ink-3);
    font-size: 13.5px;
}

/* ---- planner / estimator ---------------------------------------------------- */
.dmx-planner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    overflow: hidden;
    border: 1px solid var(--x-rule-strong);
    border-radius: 20px;
    background: var(--x-panel);
}

.dmx-planner-inputs {
    display: grid;
    gap: 34px;
    padding: 48px;
}

.dmx-field label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 15px;
    font-weight: 600;
}

.dmx-field output {
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.dmx-field small {
    display: block;
    margin-top: 10px;
    color: var(--x-ink-3);
    font-size: 13px;
}

.dmx-range {
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--x-blue) var(--fill, 50%), var(--x-rule-strong) var(--fill, 50%));
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* The theme styles every <input> globally (height, padding, border, radius,
   shadow, background). Range sliders need all of that undone. */
.dmx .dmx-field input[type="range"].dmx-range {
    display: block;
    width: 100% !important;
    height: 4px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: linear-gradient(90deg, var(--x-blue) var(--fill, 50%), var(--x-rule-strong) var(--fill, 50%)) !important;
    outline: none;
}

.dmx .dmx-field input[type="range"].dmx-range:focus-visible {
    outline: 2px solid var(--x-blue);
    outline-offset: 8px;
}

/* mainfrontend.blade.php styles every range track/thumb on the site
   (input[type=range]::-webkit-slider-*: 38px bordered track, 60px image
   thumb). These selectors outrank it and reset each property it sets. */
.dmx .dmx-field input[type="range"].dmx-range::-webkit-slider-runnable-track,
.dmx .dmx-field input[type="range"].dmx-range:focus::-webkit-slider-runnable-track {
    height: 4px;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    background: transparent;
}

.dmx .dmx-field input[type="range"].dmx-range::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    background: transparent;
}

.dmx .dmx-field input[type="range"].dmx-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin: -9px 0 0;
    border: 4px solid var(--x-panel);
    border-radius: 50%;
    background: var(--x-blue);
    background-image: none;
    box-shadow: 0 0 0 1px var(--x-blue), 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: none;
    -webkit-appearance: none;
    appearance: none;
}

.dmx .dmx-field input[type="range"].dmx-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 4px solid var(--x-panel);
    border-radius: 50%;
    background: var(--x-blue);
    background-image: none;
    box-shadow: 0 0 0 1px var(--x-blue), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.dmx-range:focus-visible {
    outline: 2px solid var(--x-blue);
    outline-offset: 6px;
}

.dmx-planner-results {
    display: flex;
    flex-direction: column;
    padding: 48px;
    background: linear-gradient(160deg, var(--x-blue), var(--x-blue-dark));
    color: #FFFFFF;
}

.dmx-planner-results h3 {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--x-head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dmx-result {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.dmx-result:first-of-type {
    padding-top: 0;
}

.dmx-result span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
}

.dmx-result strong {
    display: block;
    margin-top: 2px;
    color: #FFFFFF;
    font-family: var(--x-head);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.dmx-result--lead strong {
    font-size: 48px;
}

.dmx-planner-results p {
    margin: auto 0 0;
    padding-top: 26px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ---- phased plan ------------------------------------------------------------ */
.dmx-phases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 3px solid var(--x-blue);
}

.dmx-phase {
    padding: 36px 40px 0 0;
}

.dmx-phase + .dmx-phase {
    padding-left: 40px;
    border-left: 1px solid var(--x-rule);
}

.dmx-phase-when {
    display: block;
    margin-bottom: 8px;
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dmx-list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.dmx-list li {
    position: relative;
    padding: 12px 0 12px 22px;
    border-top: 1px solid var(--x-rule);
    color: var(--x-ink-2);
    font-size: 15px;
    line-height: 1.55;
}

.dmx-list li::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--x-blue);
}

/* ---- glossary --------------------------------------------------------------- */
.dmx-glossary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 80px;
    margin: 0;
}

.dmx-glossary > div {
    padding: 30px 0;
    border-top: 1px solid var(--x-rule);
}

.dmx-glossary dt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 10px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 19px;
    font-weight: 800;
}

.dmx-glossary dt code {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--x-bg-2);
    color: var(--x-ink-2);
    font-family: var(--x-body);
    font-size: 12.5px;
    font-weight: 400;
}

.dmx-glossary dd {
    margin: 0;
    color: var(--x-ink-2);
    font-size: 15px;
    line-height: 1.7;
}

/* ---- two-column checklists -------------------------------------------------- */
.dmx-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--x-rule-strong);
    border-radius: 20px;
    overflow: hidden;
}

.dmx-split > div {
    padding: 48px;
    background: var(--x-panel);
}

.dmx-split > div + div {
    border-left: 1px solid var(--x-rule-strong);
}

.dmx-ticks {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.dmx-ticks li {
    position: relative;
    padding: 14px 0 14px 34px;
    border-top: 1px solid var(--x-rule);
    color: var(--x-ink-2);
    font-size: 15px;
    line-height: 1.55;
}

.dmx-ticks li::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230073FC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.dmx-ticks li strong {
    color: var(--x-ink);
    font-weight: 600;
}

/* ---- pricing ---------------------------------------------------------------- */
.dmx-plans {
    display: grid;
    grid-template-columns: repeat(var(--plans, 2), minmax(0, 1fr));
    border: 1px solid var(--x-rule-strong);
    border-radius: 20px;
    overflow: hidden;
}

.dmx-plan {
    display: flex;
    flex-direction: column;
    padding: 48px;
    background: var(--x-panel);
}

.dmx-plan + .dmx-plan {
    border-left: 1px solid var(--x-rule-strong);
}

.dmx-plan--featured {
    box-shadow: inset 0 3px 0 var(--x-blue);
}

.dmx-plan-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.dmx-plan-name {
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 24px;
    font-weight: 800;
}

.dmx-plan-badge {
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dmx-plan-sub {
    margin: 4px 0 0;
    color: var(--x-ink-3);
    font-size: 14px;
}

.dmx-plan-price {
    margin: 34px 0 6px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.dmx-plan-price small {
    color: var(--x-ink-3);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
}

.dmx-plan-meta {
    margin: 0;
    color: var(--x-ink-3);
    font-size: 13.5px;
}

.dmx-plan .dmx-ticks {
    flex: 1 1 auto;
    margin: 30px 0 36px;
}

.dmx-plan .dmx-btn {
    width: 100%;
}

.dmx-plans-note {
    margin: 26px 0 0;
    color: var(--x-ink-3);
    font-size: 14px;
}

/* ---- data table (lifecycle, comparison) ------------------------------------- */
.dmx-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--x-rule-strong);
}

.dmx-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.dmx-table th,
.dmx-table td {
    padding: 22px 24px 22px 0;
    border-bottom: 1px solid var(--x-rule);
    text-align: left;
    vertical-align: top;
}

.dmx-table thead th {
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--x-ink-3);
    font-family: var(--x-head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dmx-table tbody th {
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.dmx-table tbody th small {
    display: block;
    margin-top: 4px;
    color: var(--x-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dmx-table td {
    color: var(--x-ink-2);
    font-size: 15px;
    line-height: 1.6;
}

.dmx-table--compare td,
.dmx-table--compare thead th:not(:first-child) {
    text-align: center;
}

.dmx-table--compare tbody th {
    font-family: var(--x-body);
    font-size: 15px;
    font-weight: 600;
    white-space: normal;
}

.dmx-yes,
.dmx-no {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.dmx-yes {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230073FC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.dmx-no {
    position: relative;
}

.dmx-no::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 4px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--x-ink-3);
}

/* ---- capability grid (email) ------------------------------------------------ */
.dmx-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 56px;
}

.dmx-grid3 > div {
    padding: 34px 0 44px;
    border-top: 1px solid var(--x-rule-strong);
}

.dmx-grid3-num {
    display: block;
    margin-bottom: 26px;
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 14px;
    font-weight: 800;
}

/* ---- sequence (welcome series anatomy) -------------------------------------- */
.dmx-sequence {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmx-sequence li {
    display: grid;
    grid-template-columns: 140px minmax(0, 4fr) minmax(0, 5fr);
    gap: 32px;
    padding: 30px 0;
    border-top: 1px solid var(--x-rule);
}

.dmx-sequence li:last-child {
    border-bottom: 1px solid var(--x-rule);
}

.dmx-seq-day {
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 15px;
    font-weight: 800;
}

.dmx-seq-day small {
    display: block;
    color: var(--x-ink-3);
    font-family: var(--x-body);
    font-size: 12.5px;
    font-weight: 400;
}

.dmx-seq-subject {
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.dmx-seq-subject small {
    display: block;
    margin-top: 6px;
    color: var(--x-ink-3);
    font-family: var(--x-body);
    font-size: 13px;
    font-weight: 400;
}

/* ---- standards list (deliverability) ---------------------------------------- */
.dmx-standards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 72px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: std;
}

.dmx-standards li {
    position: relative;
    padding: 28px 0 28px 64px;
    border-top: 1px solid var(--x-rule);
    counter-increment: std;
}

.dmx-standards li::before {
    content: counter(std, decimal-leading-zero);
    position: absolute;
    top: 28px;
    left: 0;
    color: var(--x-blue);
    font-family: var(--x-head);
    font-size: 14px;
    font-weight: 800;
}

.dmx-standards strong {
    display: block;
    margin-bottom: 6px;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 17px;
    font-weight: 800;
}

.dmx-standards span {
    color: var(--x-ink-2);
    font-size: 15px;
    line-height: 1.65;
}

/* ---- platforms band --------------------------------------------------------- */
.dmx-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmx-platforms li {
    color: var(--x-ink-3);
    font-family: var(--x-head);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}

.dmx-platforms li:hover {
    color: var(--x-ink);
}

/* ---- FAQ --------------------------------------------------------------------- */
.dmx-faq {
    border-top: 1px solid var(--x-rule-strong);
}

.dmx-faq details {
    border-bottom: 1px solid var(--x-rule);
}

.dmx-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 28px 0;
    color: var(--x-ink);
    font-family: var(--x-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.dmx-faq summary::-webkit-details-marker {
    display: none;
}

.dmx-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--x-blue);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s ease;
}

.dmx-faq details[open] summary::after {
    transform: rotate(45deg);
}

.dmx-faq details p {
    margin: -6px 0 0;
    padding: 0 80px 30px 0;
    color: var(--x-ink-2);
    font-size: 16px;
    line-height: 1.75;
}

/* ---- closing ----------------------------------------------------------------- */
.dmx-close {
    padding: 80px 0;
    border-top: 1px solid var(--x-rule);
    background: var(--x-bg-2);
}

.dmx-close-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
}

.dmx-close .dmx-title {
    font-size: clamp(36px, 4.6vw, 64px);
}

.dmx-close-side {
    padding-left: 40px;
    border-left: 1px solid var(--x-rule-strong);
}

.dmx-close-side .dmx-actions {
    margin-top: 28px;
}

.dmx-contact {
    margin-top: 28px;
    color: var(--x-ink-3);
    font-size: 14px;
}

.dmx-contact a {
    color: var(--x-ink);
    font-weight: 600;
}

/* ---- reveal (subtle; JS arms it, so no-JS sees everything) ------------------ */
.dmx.is-armed [data-x-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dmx.is-armed [data-x-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .dmx-index > li {
        grid-template-columns: 60px minmax(0, 3fr) minmax(0, 5fr);
    }

    /* tags drop under the description as one inline line */
    .dmx-index-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 20px;
        grid-column: 3;
        margin-top: -16px;
    }
}

@media (max-width: 991px) {
    .dmx-section {
        padding: 60px 0;
    }

    .dmx-hero {
        padding: 140px 0 56px;
    }

    .dmx-head,
    .dmx-hero-grid,
    .dmx-hero-row,
    .dmx-planner,
    .dmx-close-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .dmx-head {
        margin-bottom: 52px;
    }

    .dmx-hero-grid {
        gap: 56px;
    }

    .dmx-columns,
    .dmx-factors,
    .dmx-phases,
    .dmx-grid3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmx-columns > div,
    .dmx-columns > div + div,
    .dmx-factors > div,
    .dmx-factors > div + div,
    .dmx-phase,
    .dmx-phase + .dmx-phase {
        padding: 28px 0;
        border-left: 0;
        border-top: 1px solid var(--x-rule);
    }

    .dmx-columns > div:first-child,
    .dmx-factors > div:first-child,
    .dmx-phase:first-child {
        border-top: 0;
    }

    .dmx-glossary,
    .dmx-standards {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmx-close-side {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .dmx-section {
        padding: 48px 0;
    }

    .dmx-lede,
    .dmx-intro {
        font-size: 16.5px;
    }

    .dmx-index > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 28px 0;
    }

    .dmx-index-tags {
        grid-column: auto;
        margin-top: 0;
    }

    .dmx-ratings li,
    .dmx-ratings li + li {
        margin-right: 0;
        padding: 20px 24px 0 0;
        border-left: 0;
    }

    .dmx-formula {
        padding: 28px 24px;
    }

    .dmx-planner-inputs,
    .dmx-planner-results,
    .dmx-split > div,
    .dmx-plan {
        padding: 32px 24px;
    }

    .dmx-split,
    .dmx-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmx-split > div + div,
    .dmx-plan + .dmx-plan {
        border-left: 0;
        border-top: 1px solid var(--x-rule-strong);
    }

    .dmx-sequence li {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .dmx-faq summary {
        font-size: 17px;
    }

    .dmx-faq details p {
        padding-right: 0;
    }

    .dmx-platforms {
        justify-content: flex-start;
    }

    .dmx-close {
        padding: 60px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmx.is-armed [data-x-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   FAQ — the logo design page's accordion

   /google-ads and /email-marketing use the site's .faqfull accordion markup,
   but they do not load the legacy maine5bf.css / custome5bf.css theme sheets
   the service pages get, and they load Bootstrap's JS without its CSS. Left
   alone the FAQ fell through to the layout's hardcoded dark rules (black
   card, 16px text, padding-left:0 jamming the question against the edge) and
   every answer rendered open, because nothing defined .collapse.

   Values are measured from /services/logo-design so the two match.

   Dark is the BASE here and light is the override, which is the convention
   the rest of the site follows (html[data-tk-theme="light"] appears ~1200
   times in these stylesheets against a dozen uses of ="dark"). Writing it the
   other way round left the question bar white-on-white in dark mode.
   ========================================================================== */
.dmx [data-service-section="faq"] {
    padding: 48px 0 56px;
    background: #1d1c1c;
}

.dmx [data-service-section="faq"] .main-title {
    color: #fff;
}

.dmx [data-service-section="faq"] .faqfull .accordion-item {
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: #131313;
    box-shadow: 0 0 9px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.dmx [data-service-section="faq"] .faqfull .accordion-button,
.dmx [data-service-section="faq"] .faqfull .accordion-button:not(.collapsed) {
    gap: 16px;
    padding: 16px 24px;
    border: 0;
    background: #131313;
    box-shadow: none;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

/* Bootstrap swaps in its own chevron once an item opens; this accordion
   brings its own .faq-toggle-icon, so the built-in one is removed. */
.dmx [data-service-section="faq"] .faqfull .accordion-button::after {
    display: none;
}

.dmx [data-service-section="faq"] .faqfull .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.dmx [data-service-section="faq"] .faqfull .faq-toggle-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: none;
    color: #fff;
}

.dmx [data-service-section="faq"] .faqfull .faq-toggle-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmx [data-service-section="faq"] .faqfull .accordion-body {
    padding: 4px 24px 18px;
    background: #131313;
    color: #ccc;
    font-size: 14px;
    line-height: 1.7;
}

/* ---- light theme --------------------------------------------------------- */
html[data-tk-theme="light"] .dmx [data-service-section="faq"] {
    background: #edf1f4;
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .main-title {
    color: #0a0d0f;
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-item {
    border-color: rgba(15, 23, 42, .1);
    background: #fff;
    box-shadow: 0 0 9px rgba(0, 0, 0, .08);
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-button,
html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-button:not(.collapsed) {
    background: #fff;
    color: #0a0d0f;
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .faq-toggle-icon {
    color: #2b3138;
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-body {
    background: #fff;
    color: #2b3138;
}

/* ---- collapse behaviour --------------------------------------------------
   Bootstrap's JS is loaded on these pages but its CSS is not, so .collapse
   had no display rule and every answer rendered open. Its collapse states
   are restated here, scoped to this FAQ.
   -------------------------------------------------------------------------- */
.dmx [data-service-section="faq"] .accordion-collapse {
    display: none;
}

.dmx [data-service-section="faq"] .accordion-collapse.show,
.dmx [data-service-section="faq"] .accordion-collapse.collapsing {
    display: block;
}

.dmx [data-service-section="faq"] .accordion-collapse.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}

/* one chevron at a time: down when closed, up when open */
.dmx [data-service-section="faq"] .faq-icon-collapsed,
.dmx [data-service-section="faq"] .faq-icon-expanded {
    display: none;
}

.dmx [data-service-section="faq"] .accordion-button.collapsed .faq-icon-collapsed,
.dmx [data-service-section="faq"] .accordion-button:not(.collapsed) .faq-icon-expanded {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .dmx [data-service-section="faq"] .accordion-collapse.collapsing {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .dmx [data-service-section="faq"] .faqfull .accordion-button {
        padding: 14px 16px;
        font-size: 16px;
    }

    .dmx [data-service-section="faq"] .faqfull .accordion-body {
        padding: 2px 16px 16px;
    }
}

/* ---- Bootstrap accordion variables ---------------------------------------
   The accordion's colours come from --bs-accordion-* custom properties, and
   several sheets in the cascade also set .accordion-button directly, some
   with !important. Overriding each of those rules is a losing game, so the
   variables are set here on the accordion itself: every Bootstrap rule then
   resolves to the right colour whichever one wins.
   -------------------------------------------------------------------------- */
.dmx [data-service-section="faq"] .accordion {
    --bs-accordion-bg: #131313;
    --bs-accordion-color: #ccc;
    --bs-accordion-border-color: rgba(255, 255, 255, .06);
    --bs-accordion-btn-bg: #131313;
    --bs-accordion-btn-color: #fff;
    --bs-accordion-active-bg: #131313;
    --bs-accordion-active-color: #fff;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .accordion {
    --bs-accordion-bg: #fff;
    --bs-accordion-color: #2b3138;
    --bs-accordion-border-color: rgba(15, 23, 42, .1);
    --bs-accordion-btn-bg: #fff;
    --bs-accordion-btn-color: #0a0d0f;
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: #0a0d0f;
}

/* the page-level sheets reach .accordion-button with !important in light
   mode; match that weight so the question bar stays on the card colour */
html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-button,
html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-button:not(.collapsed) {
    background: #fff !important;
    color: #0a0d0f !important;
}

/* Literal colours, not var(), for this last pair: Bootstrap also defines
   --bs-accordion-* on .accordion-item, which sits closer to the button than
   the .accordion where the overrides above are set, so a var() here resolved
   to the dark value even in light mode. */
.dmx [data-service-section="faq"] .faqfull .accordion-button,
.dmx [data-service-section="faq"] .faqfull .accordion-button:not(.collapsed) {
    background: #131313 !important;
    color: #fff !important;
}

html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-button,
html[data-tk-theme="light"] .dmx [data-service-section="faq"] .faqfull .accordion-button:not(.collapsed) {
    background: #fff !important;
    color: #0a0d0f !important;
}