/* Crypto Token Marketing Agency — loaded AFTER defi-tokenization-development.css, which
   supplies the shared tx-* / rw-* / dtk-* components (the <main> carries both .defi-tk-page and
   .ctm-page). This file only adds what that sheet lacks: the numbered demand rows, the
   launch-phase timeline, the Web3-model band, the measurement columns, the role and step
   lists, and the cost table. Hero, services, strategy rows, consultants, FAQ and buttons all
   reuse the base. */

/* two-paragraph section intros: the shared `.tx-heading p { margin: auto }` removes the gap */
.ctm-page .tx-heading p + p { margin-top: 12px; }

/* ── Section banding ──────────────────────────────────────────────────────────────────────
   Sections alternate tinted / plain the whole way down, as on /crypto-marketing-agency/.
   The contact block sits outside <main>, so it cannot be reached through .ctm-page and is
   scoped by id instead; only the tint is dropped, keeping its padding and positioning. */
#item-1.section-service-alt { background: transparent; }

/* ── Why token projects struggle ──────────────────────────────────────────────────────────
   Read as a board, not a list: one column per failure mode, a rule across the top of each,
   the index set large in the page gradient, then the name and the explanation under it.
   Five across also means the set divides exactly, with no orphan row at the widest size —
   and it is the only five-column rhythm on the page, so it reads as its own thing. */
.ctm-page .ctm-problems {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 34px 0;
}

/* Column gap is 0 and the gutter comes from padding-right instead, so the cells' top borders
   butt together into one unbroken rule across the section. Each column then drops a short
   connector off that rule down to its own node. */
.ctm-page .ctm-problem {
    position: relative;
    padding: 38px 26px 0 0;
    border-top: 1px solid var(--tx-line);
}

/* Connector and node are both centred on x=0, the column's own left edge. The connector is
   2px rather than a hairline and stays visible along its whole length: at 1px with a fade
   that started near-transparent it dropped out of some columns at fractional device scales. */
.ctm-page .ctm-problem::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 20px;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(245, 210, 85, .35), var(--tx-gold));
}

.ctm-page .ctm-problem::after {
    content: "";
    position: absolute;
    top: 17px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rw-grad);
    box-shadow: 0 0 0 4px rgba(78, 31, 163, .3);
}

.ctm-page .ctm-problem-num {
    display: block;
    margin-bottom: 16px;
    font-family: "Exo 2", sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    background: var(--tx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctm-page .ctm-problem h3 {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rw-text-hi);
}

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

/* ── Hero visual: the base sheet floats and tilts it; this page shows it still. ──
   The base glow is inset inside the art box, so the artwork covers it. Here it is pushed
   out past the edges and strengthened, which puts the ambient halo around the subject
   instead of behind it. Colours are the page violet and teal — no new hue. */
.ctm-page .tx-hero-art img { animation: none; transition: none; }
.ctm-page .tx-hero-art:hover img { transform: none; filter: none; }

.ctm-page .tx-hero-art::before {
    inset: -16% -12%;
    background:
        radial-gradient(closest-side, rgba(116, 78, 255, .85), rgba(78, 31, 163, .42) 52%, transparent 76%),
        radial-gradient(closest-side at 48% 74%, rgba(54, 231, 196, .30), transparent 62%);
    filter: blur(44px);
    animation: none;
}

/* ── Strategy pillars ─────────────────────────────────────────────────────────────────────
   Centred heading over a vertical rail: the pillar names stack on the left, the selected
   one's copy fills the panel on the right. Only the arrangement is borrowed — the rail marker
   is the page teal and the panel reuses the same surface as the stage card below it. */
/* the shared .tx-heading caps at 1100px, which breaks this title onto a third line; it is the
   longest h2 on the page, so it gets the room to stay on one line and a step down in size. */
.ctm-page .ctm-strat-head { max-width: none; }

.ctm-page .ctm-strat-head h2 {
    font-size: clamp(26px, 2.5vw, 38px);
    white-space: nowrap;
}

.ctm-page .ctm-strat-head p { max-width: 720px; margin-inline: auto; }

/* stretch, not start: the rail and the panel share the row height, so the boxed cards on the
   left finish exactly level with the panel on the right whichever of the two is taller */
.ctm-page .ctm-strat {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    max-width: 1140px;
    margin-inline: auto;
}

/* grid, not flex: `1fr` rows force every card to the same height, whereas flex would only
   share the leftover space and leave a two-line label taller than its neighbours */
.ctm-page .ctm-strat-rail {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 12px;
}

.ctm-page .ctm-strat-tab {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    background: rgba(28, 29, 37, .45);
    font-family: "Exo 2", sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    color: var(--rw-text-mid);
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
}

.ctm-page .ctm-strat-tab:hover { border-color: rgba(54, 231, 196, .45); color: var(--rw-text-hi); }

.ctm-page .ctm-strat-tab.is-active {
    border-color: var(--tx-teal);
    background: rgba(54, 231, 196, .07);
    color: #fff;
}

/* the viewer fills the row so the panel can stretch to the rail's height */
.ctm-page .ctm-strat-viewer { display: flex; }

/* column + centre: the copy sits in the middle of the panel rather than banked at the top
   with the leftover height showing as dead space underneath */
.ctm-page .ctm-strat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 48px;
    border: 1px solid var(--tx-line);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(78, 31, 163, .12), rgba(54, 231, 196, .025));
    animation: ctmPanelFade .35s cubic-bezier(.4, 0, .2, 1);
}

.ctm-page .ctm-strat-panel h3 {
    margin-bottom: 16px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rw-text-hi);
}

.ctm-page .ctm-strat-panel p {
    font-size: 16.5px !important;
    line-height: 1.7;
    color: var(--rw-text-mid);
}

/* ── Launch phases ────────────────────────────────────────────────────────────────────────
   A rail of rectangular step boxes selects one phase card: the lead column carries the stage
   label, its name, the summary and the outcome; the deliverables sit opposite as their own
   tiles. The rail ships `hidden` and the script reveals it, so with no JavaScript every phase
   renders stacked and nothing is hidden from crawlers. */
.ctm-page .ctm-stage-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.ctm-page .ctm-stage-tabs button {
    padding: 18px 12px;
    border: 1px solid var(--tx-line);
    border-radius: 10px;
    background: rgba(28, 29, 37, .45);
    font-family: "Exo 2", sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rw-text-mid);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}

.ctm-page .ctm-stage-tabs button:hover { border-color: rgba(54, 231, 196, .45); color: var(--rw-text-hi); }

.ctm-page .ctm-stage-tabs button[aria-selected="true"] {
    border-color: transparent;
    background: var(--tx-gradient);
    color: #040914;
}

.ctm-page .ctm-stages {
    display: grid;
    gap: 24px;
}

/* min-height is the tallest phase (stage 2 carries five deliverables) so the card keeps one
   size as the steps are clicked, instead of the page jumping under the pointer. */
.ctm-page .ctm-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 56px;
    align-items: center;
    min-height: 352px;
    padding: 44px 48px;
    border: 1px solid var(--tx-line);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(78, 31, 163, .12), rgba(54, 231, 196, .025));
    animation: ctmPanelFade .35s cubic-bezier(.4, 0, .2, 1);
}

.ctm-page .ctm-stage-lead { min-width: 0; }

/* the stage label sits above its name, small and in the page gold */
.ctm-page .ctm-stage-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tx-gold);
}

.ctm-page .ctm-stage h3 {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rw-text-hi);
}

.ctm-page .ctm-stage-lead p { color: var(--rw-text-mid); }

.ctm-page .ctm-stage-list {
    display: grid;
    align-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* each deliverable is its own tile, marked with an accent edge rather than a bullet */
.ctm-page .ctm-stage-list li {
    padding: 14px 18px;
    border: 1px solid var(--tx-line);
    border-left: 3px solid var(--tx-teal);
    border-radius: 10px;
    background: rgba(13, 23, 46, .6);
    font-family: Epilogue, sans-serif;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--tx-text);
    transition: border-color .25s, background .25s;
}

.ctm-page .ctm-stage-list li:hover { background: rgba(17, 34, 66, .7); border-top-color: rgba(54, 231, 196, .3); }

.ctm-page .ctm-stage-outcome {
    margin: 22px 0 0;
    padding: 16px 20px;
    border: 1px solid rgba(54, 231, 196, .3);
    border-radius: 12px;
    background: rgba(54, 231, 196, .05);
    color: var(--rw-text-hi);
}

.ctm-page .ctm-stage-outcome strong { color: var(--tx-teal); font-weight: 600; }

/* Closing prompt under the phases: prompt left, button right, inside a gradient-edged box.
   The padding-box colour is the .tx-alt surface (#040914 under white at .045) so the inner
   fill matches the section behind it exactly. */
.ctm-page .ctm-cta-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    margin-top: 28px;
    padding: 22px 28px;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(#0f141f, #0f141f) padding-box,
        var(--tx-gradient) border-box;
}

.ctm-page .ctm-cta-box p {
    margin: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.5;
    color: var(--rw-text-hi);
}

.ctm-page .ctm-cta-box .tx-actions { margin: 0; }

/* ── Inline SVG icons inside the shared .rw-icon-wrap. The base sheet sizes `.rw-icon-wrap img`
      but has no rule for an svg, and the wrap sets no colour — so without these an inline icon
      renders unsized and inherits the body grey. Applies to the services cards as well as the
      Web3-model cards below; the colour is the page accent, so no new colour is introduced. ── */
.ctm-page .rw-icon-wrap svg {
    width: 30px;
    height: 30px;
    color: var(--tx-teal);
}

/* ── Services cards ───────────────────────────────────────────────────────────────────────
   Icon and title share a row, the copy runs full width beneath. Interior spacing follows the
   bento cards on /white-label-tokenization-platform-development/: 28/22 padding, a 12px step
   to the copy, and copy set well below the page's 18px body size — at 18px in a quarter-width
   card it ran six loose lines and the card stopped reading as a unit. */
.ctm-page .rw-glow-grid .rw-glow-card {
    gap: 12px;
    padding: 28px 22px;
}

.ctm-page .ctm-svc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
}

.ctm-page .ctm-svc-head .rw-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

.ctm-page .ctm-svc-head .rw-icon-wrap svg { width: 21px; height: 21px; }

.ctm-page .ctm-svc-head h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
}

.ctm-page .rw-glow-grid .rw-glow-card p {
    font-size: 14px !important;
    line-height: 1.62;
    color: var(--rw-text-mid);
}

/* ── Web3 models ──────────────────────────────────────────────────────────────────────────
   Icon plus the model name on a single line, nothing else. Every cell is the same width at
   every breakpoint, so the seventh simply leaves a gap rather than stretching. Column count
   steps down as the longest label ("Utility & Governance Tokens") stops fitting on one line.
   The centred heading matches the measurement section that follows it. */
/* Eight tracks, two per cell: four across the first row, and the remaining three centred on
   the second by starting it one track in — same cell width on both rows, no trailing gap. */
.ctm-page .ctm-models {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.ctm-page .ctm-models li {
    display: flex;
    align-items: center;
    gap: 14px;
    grid-column: span 2;
    padding: 16px 18px;
    border: 1px solid var(--rw-border);
    border-radius: 14px;
    background: rgba(28, 29, 37, .55);
    transition: border-color .3s, transform .3s, box-shadow .3s;
}

.ctm-page .ctm-models li:nth-child(5) { grid-column: 2 / span 2; }

.ctm-page .ctm-models li:hover {
    border-color: rgba(161, 131, 224, .55);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(78, 31, 163, .25);
}

/* the shared icon box, a size down: these rows are a single line tall */
.ctm-page .ctm-models .rw-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.ctm-page .ctm-models .rw-icon-wrap svg { width: 22px; height: 22px; }

.ctm-page .ctm-model-name {
    min-width: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--rw-text-hi);
    transition: color .3s;
}

.ctm-page .ctm-models li:hover .ctm-model-name {
    background: var(--rw-head-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Measurement ──────────────────────────────────────────────────────────────────────────
   A compact index of the eight signals on the left — name and number only — beside one
   bordered viewer on the right that holds the selected signal's copy, its checkpoints as a
   two-up grid, and the step arrows. Without JavaScript the first panel shows, the rest keep
   `hidden` and the arrows stay hidden, so every signal stays in the DOM. */
/* stretch, not start: the viewer takes the row height from the index beside it, so the card
   is exactly the same size for all eight signals and the arrows never shift as you step */
.ctm-page .ctm-metrics {
    position: relative;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 36px;
    align-items: stretch;
    max-width: 1140px;
    margin-inline: auto;
}

.ctm-page .ctm-metric-stepper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* name left, index right; the marker is a border that is transparent until selected, so the
   labels never shift sideways as the selection moves down the index */
.ctm-page .ctm-step-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .25s, border-color .25s;
}

.ctm-page .ctm-step-item:hover { background: rgba(54, 231, 196, .05); }

.ctm-page .ctm-step-item.is-active {
    border-color: rgba(54, 231, 196, .55);
    background: rgba(54, 231, 196, .07);
}

.ctm-page .ctm-step-name {
    min-width: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rw-text-mid);
    transition: color .2s;
}

.ctm-page .ctm-step-num {
    flex-shrink: 0;
    font-family: "Exo 2", sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #4f5d75;
    transition: color .2s;
}

.ctm-page .ctm-step-item:hover .ctm-step-name { color: var(--rw-text-hi); }
.ctm-page .ctm-step-item.is-active .ctm-step-name { color: var(--tx-teal); }
.ctm-page .ctm-step-item.is-active .ctm-step-num { color: var(--tx-teal); }

/* the viewer is the bordered surface; the panels inside it are plain content, so the arrows
   sit within the same box no matter which signal is showing */
.ctm-page .ctm-metric-viewer {
    display: flex;
    flex-direction: column;
    padding: 34px 36px 26px;
    border: 1px solid rgba(54, 231, 196, .3);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 12%, rgba(54, 231, 196, .07), transparent 45%),
        radial-gradient(circle at 8% 88%, rgba(245, 210, 85, .04), transparent 40%),
        #0a1122;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .45), 0 0 30px rgba(54, 231, 196, .08);
}

/* the panel takes the free height and centres its copy inside it, which leaves the arrows
   parked at the foot of the card so they hold one position as the signals are stepped */
.ctm-page .ctm-metric-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: ctmPanelFade .35s cubic-bezier(.4, 0, .2, 1);
}

/* `display` above outranks the UA's `[hidden]` rule in browsers that do not mark it
   !important, so the hidden panels are switched off explicitly */
.ctm-page .ctm-metric-panel[hidden],
.ctm-page .ctm-strat-panel[hidden],
.ctm-page .ctm-stage[hidden] { display: none; }

@keyframes ctmPanelFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ctm-page .ctm-panel-heading {
    margin: 0 0 12px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--rw-text-hi);
}

.ctm-page .ctm-panel-text {
    margin: 0 0 24px;
    font-size: 16.5px !important;
    line-height: 1.68;
    color: #c4d0e5;
}

/* checkpoints, two up: each its own bordered tile with the dot set on the first line.
   `1fr` rows keep the tiles level when one of them wraps to a second line. */
.ctm-page .ctm-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctm-page .ctm-list li {
    position: relative;
    padding: 16px 18px 16px 38px;
    border: 1px solid rgba(217, 217, 217, .09);
    border-radius: 12px;
    background: rgba(13, 23, 46, .65);
    font-family: Epilogue, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--rw-text-mid);
    transition: border-color .25s, background .25s;
}

.ctm-page .ctm-list li:hover { border-color: rgba(54, 231, 196, .3); background: rgba(17, 34, 66, .7); }

.ctm-page .ctm-list li::before {
    content: "";
    position: absolute;
    top: 1.5em;
    left: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rw-grad);
}

/* step arrows, under the checkpoints and inside the same box */
.ctm-page .ctm-metric-nav {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.ctm-page .ctm-metric-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--tx-line);
    border-radius: 50%;
    background: transparent;
    color: var(--tx-text);
    cursor: pointer;
    transition: border-color .25s, background .25s, color .25s;
}

.ctm-page .ctm-metric-arrow:hover:not(:disabled) {
    border-color: rgba(54, 231, 196, .5);
    background: rgba(54, 231, 196, .08);
    color: #fff;
}

.ctm-page .ctm-metric-arrow:disabled { opacity: .35; cursor: not-allowed; }

/* ── Why BlockchainX: check-marked points beside the section copy ──────────────────────────
   stretch, not the base sheet's centre: the points start level with the heading instead of
   floating down the middle, and the two columns finish the same height. */
.ctm-page #why-blockchainx .dtk-split { align-items: stretch; }

/* `1fr` rows divide the column height between the points, so the stack fills the same height
   as the copy beside it however many lines each point runs to */
.ctm-page .ctm-points {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ctm-page .ctm-points li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid var(--tx-line);
    border-radius: 12px;
    background: rgba(28, 29, 37, .45);
    font-family: Epilogue, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--rw-text-mid);
    transition: border-color .25s, background .25s;
}

.ctm-page .ctm-points li:hover { border-color: rgba(54, 231, 196, .4); background: rgba(17, 34, 66, .6); }

.ctm-page .ctm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid rgba(54, 231, 196, .35);
    border-radius: 7px;
    background: rgba(54, 231, 196, .1);
    color: var(--tx-teal);
}

.ctm-page .ctm-check svg { width: 13px; height: 13px; }

/* ── Team: the shared dtk-people cards, then the supporting roles ── */
/* the base card is name + role + LinkedIn only; these two carry a bio line as well */
.ctm-page .dtk-person { align-items: flex-start; }
.ctm-page .dtk-person-photo { margin-top: 4px; }

.ctm-page .dtk-person-info p {
    margin-bottom: 12px;
    font-size: 14px !important;
    line-height: 1.55;
    color: var(--rw-text-mid);
}

/* ── Key team members ─────────────────────────────────────────────────────────────────────
   Heading centred over the six roles, which stagger two-up below it so the eye zigzags down
   them. Built from this page's own tokens — only the arrangement comes from the reference. */
.ctm-page .ctm-team {
    margin-top: 56px;
    padding-top: 44px;
    border-top: 1px solid var(--tx-line);
}

/* centred heading: the rule under it centres with the text rather than hanging off the left */
.ctm-page .ctm-team-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 44px;
    text-align: center;
}

.ctm-page .ctm-team-intro h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.28;
    color: var(--rw-text-hi);
}

.ctm-page .ctm-team-intro h3 span {
    background: var(--rw-head-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* the mind map sits centred under the heading rather than filling the row */
.ctm-page .ctm-roles {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 940px;
    /* start, not stretch: the offset card would otherwise pull its row-mate tall and hollow */
    align-items: start;
    gap: 20px 56px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* the stagger: every second card drops, so the pair reads as a zigzag rather than a table */
.ctm-page .ctm-roles li:nth-child(even) { margin-top: 42px; }

.ctm-page .ctm-roles li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 20px 18px;
    border: 1px solid var(--rw-border);
    border-radius: 14px;
    background: rgba(28, 29, 37, .55);
    font-family: Epilogue, sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--rw-text-mid);
    transition: border-color .3s, transform .3s, box-shadow .3s;
}

/* Connectors: a rail down the middle of the column gap, with a stub and a node from each
   card's inner edge. The gap is widened to 56px so the stubs have somewhere to run. Drawn
   entirely with pseudo-elements — nothing extra in the markup — and switched off below 992px
   where the grid collapses to one column. */
.ctm-page .ctm-roles::after {
    content: "";
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(54, 231, 196, .3) 12%, rgba(161, 131, 224, .3) 88%, transparent);
}

.ctm-page .ctm-roles li::after,
.ctm-page .ctm-roles li::before {
    content: "";
    position: absolute;
    top: 34px;
}

/* the stub */
.ctm-page .ctm-roles li::after {
    width: 27px;
    height: 1px;
    background: rgba(161, 131, 224, .38);
}

/* the node where the stub meets the rail */
.ctm-page .ctm-roles li::before {
    z-index: 1;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--rw-grad);
    box-shadow: 0 0 0 3px rgba(78, 31, 163, .5);
    transition: box-shadow .3s;
}

.ctm-page .ctm-roles li:nth-child(odd)::after { right: -28px; }
.ctm-page .ctm-roles li:nth-child(odd)::before { right: -31px; }
.ctm-page .ctm-roles li:nth-child(even)::after { left: -28px; }
.ctm-page .ctm-roles li:nth-child(even)::before { left: -31px; }

.ctm-page .ctm-roles li:hover::before { box-shadow: 0 0 0 4px rgba(54, 231, 196, .3); }

.ctm-page .ctm-roles li:hover {
    border-color: rgba(161, 131, 224, .5);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(78, 31, 163, .25);
}

.ctm-page .ctm-role-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(161, 131, 224, .22);
    border-radius: 13px;
    background: rgba(78, 31, 163, .2);
    color: var(--tx-teal);
    transition: border-color .3s, box-shadow .3s;
}

.ctm-page .ctm-roles li:hover .ctm-role-icon {
    border-color: rgba(245, 210, 85, .35);
    box-shadow: 0 8px 22px rgba(245, 210, 85, .14);
}

.ctm-page .ctm-role-icon svg { width: 22px; height: 22px; }

.ctm-page .ctm-role-body { min-width: 0; }

.ctm-page .ctm-role-num {
    display: inline-flex;
    align-items: center;
    margin-bottom: 7px;
    padding: 2px 9px;
    border: 1px solid rgba(54, 231, 196, .3);
    border-radius: 20px;
    background: rgba(54, 231, 196, .08);
    font-family: "Exo 2", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tx-teal);
}

.ctm-page .ctm-roles strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Exo 2", sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rw-text-hi);
}

/* ── Engagement process ───────────────────────────────────────────────────────────────────
   One phase on screen at a time: meta row, name and copy on the left, the index set large
   and faint on the right, arrows and dots at the foot of the panel. Panels ship visible and
   the nav ships `hidden`; the script hides the inactive panels and reveals the nav, so with
   no JavaScript all seven phases read straight down the page. */
.ctm-page .ctm-proc { position: relative; }

.ctm-page .ctm-proc-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 48px;
    align-items: start;
    min-height: 268px;
    padding: 36px 40px 34px;
    border: 1px solid var(--tx-line);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(78, 31, 163, .12), rgba(54, 231, 196, .025));
}

/* stacked when the script is not running; only the gap between them needs restoring */
.ctm-page .ctm-proc-stage + .ctm-proc-stage { margin-top: 20px; }

.ctm-page .ctm-proc-body { grid-row: 1 / 3; min-width: 0; }

.ctm-page .ctm-proc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ctm-page .ctm-proc-phase {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid rgba(245, 210, 85, .4);
    border-radius: 6px;
    background: rgba(245, 210, 85, .08);
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-gold);
}

/* hairline divider between the counter and the phase label */
.ctm-page .ctm-proc-kicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 15px;
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx-teal);
}

.ctm-page .ctm-proc-kicker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 13px;
    transform: translateY(-50%);
    background: var(--tx-line);
}

.ctm-page .ctm-proc-kicker::after {
    content: "";
    order: -1;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tx-teal);
}

.ctm-page .ctm-proc-stage h3 {
    margin-bottom: 14px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--rw-text-hi);
}

.ctm-page .ctm-proc-body p { max-width: 640px; color: var(--rw-text-mid); }

.ctm-page .ctm-proc-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.ctm-page .ctm-proc-ghost {
    font-family: "Exo 2", sans-serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
}

.ctm-page .ctm-proc-seq {
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(168, 179, 204, .55);
}

/* the nav sits inside the panel, under the index column */
.ctm-page .ctm-proc-nav {
    position: absolute;
    right: 40px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ctm-page .ctm-proc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: 1px solid var(--tx-line);
    border-radius: 7px;
    background: transparent;
    font-size: 15px;
    line-height: 1;
    color: var(--tx-text);
    transition: border-color .25s, background .25s, color .25s;
}

.ctm-page .ctm-proc-arrow:hover {
    border-color: var(--tx-teal);
    background: rgba(54, 231, 196, .1);
    color: var(--tx-teal);
}

/* WCAG 2.5.8 touch targets: the button is padded out to 24x24 and left transparent, while
   the dot people actually see is drawn by the pseudo-element at its original 7px. Size and
   colour of the dot are unchanged; only the spacing between them opens up, which is what
   gives each target its own 24px of room. */
.ctm-page .ctm-proc-dots { display: flex; align-items: center; }

.ctm-page .ctm-proc-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ctm-page .ctm-proc-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(217, 217, 217, .22);
    transition: background .25s, transform .25s;
}

.ctm-page .ctm-proc-dot:hover::before { background: rgba(217, 217, 217, .45); }

.ctm-page .ctm-proc-dot.is-active::before {
    background: var(--tx-gold);
    transform: scale(1.25);
}

/* ── Cost table: same treatment as the comparison table on /crypto-seo-agency/ ── */
.ctm-page .ctm-table-wrap {
    max-width: 1040px;
    margin-inline: auto;
    overflow-x: auto;
    border: 1px solid rgba(54, 231, 196, .22);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(14, 26, 52, .8) 0%, rgba(8, 16, 32, .9) 100%);
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, .55);
}

.ctm-page .ctm-table-wrap::-webkit-scrollbar { height: 6px; }
.ctm-page .ctm-table-wrap::-webkit-scrollbar-thumb { background: rgba(54, 231, 196, .35); border-radius: 10px; }

.ctm-page .ctm-table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.ctm-page .ctm-table thead th {
    padding: 20px 26px;
    border-bottom: 1px solid rgba(54, 231, 196, .18);
    background: rgba(10, 20, 42, .7);
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tx-gold);
    white-space: nowrap;
}

.ctm-page .ctm-table thead th.ctm-col-hl { color: var(--tx-teal); }

.ctm-page .ctm-table tbody tr { transition: background .28s; }
.ctm-page .ctm-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
.ctm-page .ctm-table tbody tr:hover { background: linear-gradient(90deg, rgba(54, 231, 196, .09) 0%, rgba(78, 31, 163, .16) 100%); }

.ctm-page .ctm-table tbody th,
.ctm-page .ctm-table tbody td {
    padding: 18px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-family: Epilogue, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    vertical-align: top;
}

.ctm-page .ctm-table tbody th { font-weight: 400; color: #fff; }
.ctm-page .ctm-table tbody td { color: rgba(243, 246, 255, .82); background: rgba(54, 231, 196, .06); }
.ctm-page .ctm-table tbody tr:last-child th,
.ctm-page .ctm-table tbody tr:last-child td { border-bottom: none; }

/* ── Closing CTA lines: one under the launch phases, one under the cost table ── */
.ctm-page .ctm-cta-band {
    margin-top: 60px;
    padding-top: 44px;
    border-top: 1px solid var(--tx-line);
    text-align: center;
}

.ctm-page .ctm-cta-band h3 {
    margin-bottom: 10px;
    font-size: var(--tx-h2);
    line-height: 1.3;
    font-weight: 600;
    background: var(--tx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctm-page .ctm-cta-band p {
    max-width: 640px;
    margin-inline: auto;
    color: var(--rw-text-mid);
}

/* the band under the launch phases is a single prompting line, with no heading above it */
.ctm-page .ctm-cta-band > p:first-child {
    font-family: "Exo 2", sans-serif;
    font-weight: 500;
    color: var(--rw-text-hi);
}

/* Inline variant: prompt and button share a row, the pair centred under the rule. Used where
   the CTA follows a two-column block and would otherwise sit stranded in the left column. */
.ctm-page .ctm-cta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: left;
}

/* the stacked band caps its copy at 640px; the inline one must not, or nowrap gets clipped */
.ctm-page .ctm-cta-inline > p:first-child {
    flex: 0 1 auto;
    max-width: none;
    margin: 0;
    font-size: 17px !important;
    line-height: 1.45;
}

.ctm-page .ctm-cta-inline .tx-actions {
    flex: none;
    margin-top: 0;
}

/* ── Responsive for the three ported layouts ─────────────────────────────────────────────── */

/* ── Responsive ───────────────────────────────────────────────────────────────────────────
   One block per breakpoint, widest first. Rule order inside each block is unchanged. ── */

@media (max-width: 1399px) {
    /* three up: the longest label no longer clears one line in a quarter-width cell.
       3 + 3 + 1, with the lone seventh centred the same way. */
    .ctm-page .ctm-models { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ctm-page .ctm-models li:nth-child(5) { grid-column: span 2; }
    .ctm-page .ctm-models li:nth-child(7) { grid-column: 3 / span 2; }
}

@media (max-width: 1199px) {
    /* the title no longer clears the container on one line, so it wraps again */
    .ctm-page .ctm-strat-head h2 { white-space: normal; }
    .ctm-page .ctm-strat { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; }
    .ctm-page .ctm-strat-rail { gap: 10px; }
    .ctm-page .ctm-strat-tab { padding: 14px 16px; font-size: 14.5px; }
    .ctm-page .ctm-strat-panel { padding: 34px 32px; }
    .ctm-page .ctm-strat-panel h3 { font-size: 22px; }
    .ctm-page .ctm-team-intro h3 { font-size: 25px; }
    .ctm-page .ctm-roles { gap: 16px 44px; }
    .ctm-page .ctm-roles li:nth-child(even) { margin-top: 32px; }
    .ctm-page .ctm-roles li::after { width: 21px; }
    .ctm-page .ctm-roles li:nth-child(odd)::after { right: -22px; }
    .ctm-page .ctm-roles li:nth-child(odd)::before { right: -25px; }
    .ctm-page .ctm-roles li:nth-child(even)::after { left: -22px; }
    .ctm-page .ctm-roles li:nth-child(even)::before { left: -25px; }
    /* three up: 3 + 2, the shorter second row centred under the first */
    .ctm-page .ctm-problems { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 24px; }
    .ctm-page .ctm-problem { grid-column: span 2; }
    .ctm-page .ctm-problem:nth-child(4) { grid-column: 2 / span 2; }

    /* stepper rail loses its fixed 360px column before the panel gets too narrow */
    .ctm-page .ctm-metrics { grid-template-columns: 300px 1fr; gap: 28px; }
    .ctm-page .ctm-stage { padding: 36px 34px; gap: 26px 40px; min-height: 434px; }
}

@media (max-width: 991px) {
    /* rail above the panel: the same boxes reflow into a row, still all one height */
    .ctm-page .ctm-strat { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ctm-page .ctm-strat-rail { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
    .ctm-page .ctm-strat-tab { justify-content: center; text-align: center; }
    .ctm-page .ctm-strat-panel { padding: 28px 26px; }

    /* one column from here down: no rail, no stubs, no nodes */
    .ctm-page .ctm-roles::after,
    .ctm-page .ctm-roles li::after,
    .ctm-page .ctm-roles li::before { display: none; }
    .ctm-page .ctm-roles { gap: 16px; }
    /* heading back above the cards; the stagger needs the width it no longer has */
    .ctm-page .ctm-team { margin-top: 40px; padding-top: 32px; }
    .ctm-page .ctm-team-intro h3 { font-size: 22px; }
    .ctm-page .ctm-roles li:nth-child(even) { margin-top: 0; }
    .ctm-page .ctm-stage h3 { font-size: 21px; }
    /* two up: 2 + 2 + 2 + 1, the lone seventh centred */
    .ctm-page .ctm-models { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; gap: 14px; }
    .ctm-page .ctm-models li:nth-child(7) { grid-column: 2 / span 2; }

    /* rail above the panel, and the panel stops sticking so it cannot outrun the rail */
    .ctm-page .ctm-metrics { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ctm-page .ctm-metric-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .ctm-page .ctm-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; align-items: start; }
    .ctm-page .ctm-stage-list { align-content: start; }
    .ctm-page .ctm-stage h3 { font-size: 21px; margin-bottom: 12px; }

    .ctm-page .ctm-stage-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .ctm-page .ctm-stage-tabs button { padding: 13px 10px; font-size: 14px; }

    .ctm-page .ctm-proc-stage { padding: 30px 26px 28px; min-height: 250px; }
    .ctm-page .ctm-proc-stage h3 { font-size: 25px; }
    .ctm-page .ctm-proc-ghost { font-size: 54px; }
    .ctm-page .ctm-proc-nav { right: 26px; bottom: 26px; }
}

@media (max-width: 767px) {
    /* stack and centre once the row no longer fits */
    .ctm-page .ctm-cta-inline { gap: 16px; text-align: center; }
    .ctm-page .ctm-cta-inline > p:first-child { font-size: 14px !important; max-width: none; }
    .ctm-page .ctm-cta-inline .tx-actions { width: 100%; }
    /* two up: 2 + 2 + 1, the lone fifth centred */
    .ctm-page .ctm-problems { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
    .ctm-page .ctm-problem,
    .ctm-page .ctm-problem:nth-child(4) { grid-column: span 2; }
    .ctm-page .ctm-problem:nth-child(5) { grid-column: 2 / span 2; }
    .ctm-page .ctm-problem { padding-top: 34px; }
    .ctm-page .ctm-problem-num { font-size: 24px; margin-bottom: 10px; }
    .ctm-page .ctm-problem h3 { font-size: 15px; margin-bottom: 6px; }
    .ctm-page .ctm-problem p { font-size: 13px !important; }
    .ctm-page .ctm-roles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ctm-page .ctm-roles li { padding: 16px; border-radius: 12px; gap: 13px; }
    .ctm-page .ctm-role-icon { width: 38px; height: 38px; border-radius: 11px; }
    .ctm-page .ctm-role-icon svg { width: 19px; height: 19px; }
    .ctm-page .ctm-roles strong { font-size: 14.5px; margin-bottom: 5px; }
    /* single column: clear the spans, or they would spill into implicit tracks */
    .ctm-page .ctm-models { grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 10px; }
    .ctm-page .ctm-models li,
    .ctm-page .ctm-models li:nth-child(5),
    .ctm-page .ctm-models li:nth-child(7) { grid-column: auto; }
    .ctm-page .ctm-models li { padding: 12px 14px; gap: 12px; }
    .ctm-page .ctm-models .rw-icon-wrap { width: 36px; height: 36px; border-radius: 10px; }
    .ctm-page .ctm-models .rw-icon-wrap svg { width: 19px; height: 19px; }
    .ctm-page .ctm-model-name { font-size: 14.5px; }
    .ctm-page .rw-icon-wrap svg { width: 26px; height: 26px; }
    .ctm-page .ctm-points li { padding: 13px 0; gap: 12px; }
    .ctm-page .ctm-team-intro h3 { font-size: 18px; }
    .ctm-page .ctm-table thead th { padding: 14px 16px; font-size: 11.5px; }
    .ctm-page .ctm-table tbody th,
    .ctm-page .ctm-table tbody td { padding: 13px 16px; font-size: 13.5px; }
    .ctm-page .ctm-cta-band { margin-top: 34px; padding-top: 28px; }

    .ctm-page .ctm-stages { gap: 16px; }
    .ctm-page .ctm-stage { padding: 24px 20px; border-radius: 14px; gap: 18px; min-height: 0; }
    .ctm-page .ctm-stage h3 { font-size: 17px; margin-bottom: 8px; }
    .ctm-page .ctm-stage-list { gap: 10px; }
    .ctm-page .ctm-stage-list li { align-items: flex-start; gap: 9px; }
    .ctm-page .ctm-stage-outcome { padding: 10px 14px; }
    .ctm-page .ctm-metric-stepper { gap: 8px; }
    .ctm-page .ctm-step-item { padding: 11px 14px; gap: 10px; }
    .ctm-page .ctm-step-name { font-size: 13px; }
    .ctm-page .ctm-metric-panel { padding: 18px 16px; border-radius: 14px; }
    .ctm-page .ctm-panel-heading { font-size: 19px; margin-bottom: 10px; }
    .ctm-page .ctm-panel-text { font-size: 14px !important; margin-bottom: 16px; }
    .ctm-page .ctm-list li { font-size: 13.5px; padding-left: 18px; }

    /* index row above the copy, nav on its own line under it */
    .ctm-page .ctm-proc-stage {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        min-height: 0;
        padding: 22px 18px 74px;
        border-radius: 14px;
    }
    .ctm-page .ctm-proc-stage + .ctm-proc-stage { margin-top: 14px; }
    .ctm-page .ctm-proc-body { grid-row: 2; }
    .ctm-page .ctm-proc-aside { grid-row: 1; flex-direction: row; align-items: baseline; gap: 10px; }
    .ctm-page .ctm-proc-ghost { font-size: 34px; }
    .ctm-page .ctm-proc-seq { font-size: 9px; letter-spacing: .18em; }
    .ctm-page .ctm-proc-meta { gap: 10px; margin-bottom: 14px; }
    .ctm-page .ctm-proc-phase,
    .ctm-page .ctm-proc-kicker { font-size: 9.5px; letter-spacing: .1em; }
    .ctm-page .ctm-proc-stage h3 { font-size: 19px; margin-bottom: 10px; }
    .ctm-page .ctm-proc-nav { right: 0; left: 0; bottom: 22px; justify-content: center; gap: 12px; }
    .ctm-page .ctm-proc-arrow { width: 34px; height: 30px; font-size: 14px; }

    .ctm-page .rw-glow-grid .rw-glow-card { padding: 22px 18px; gap: 10px; }
    .ctm-page .ctm-svc-head { gap: 10px; min-height: 38px; }
    .ctm-page .ctm-svc-head .rw-icon-wrap { width: 38px; height: 38px; border-radius: 10px; }
    .ctm-page .ctm-svc-head .rw-icon-wrap svg { width: 19px; height: 19px; }
    .ctm-page .ctm-svc-head h3 { font-size: 15px; }
    .ctm-page .rw-glow-grid .rw-glow-card p { font-size: 13px !important; }
}

@media (max-width: 575px) {
    .ctm-page .ctm-problems { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ctm-page .ctm-problem,
    .ctm-page .ctm-problem:nth-child(4),
    .ctm-page .ctm-problem:nth-child(5) { grid-column: auto; }
    /* only two short columns, so let them wrap in place rather than scroll off the screen */
    .ctm-page .ctm-table { min-width: 0; }
    .ctm-page .ctm-table thead th { padding: 12px 12px; }
    .ctm-page .ctm-table tbody th,
    .ctm-page .ctm-table tbody td { padding: 12px; font-size: 13px; }

    .ctm-page .ctm-stage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
    .ctm-page .ctm-stage-tabs button { padding: 11px 8px; font-size: 12.5px; border-radius: 8px; }
}

@media (min-width: 1200px) {
    /* one line: the prompt stops shrinking so nowrap cannot clip it, and 1140px of container
       clears its full 760px plus the 28px gap and the 208px button */
    .ctm-page .ctm-cta-inline > p:first-child { flex: 0 0 auto; white-space: nowrap; }
}