/* TechDX Core: Package + Course pages. Values from docs/figma-spec-pages.md (1920px frames). */

.tdx-page-body .tdx-page {
    --tdx-green: #42AD60;
    --tdx-bright: #6BF172;
    --tdx-orange: #F26608;
    --tdx-ink: #111111;
    --tdx-grey: #F6F6F6;
    --tdx-line: #DEDEDE;
    --tdx-head: magistral, "Helvetica Neue", Arial, sans-serif;
    --tdx-body: nexa-text, "Helvetica Neue", Arial, sans-serif;
    --tdx-link: Inter, nexa-text, "Helvetica Neue", Arial, sans-serif;
    color: #000;
    font-family: var(--tdx-body);
    overflow-x: hidden;
}
.tdx-page-body .site-main, body:not([class*="elementor-page-"]).tdx-page-body .site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100%; }
.tdx-page-body .tdx-page *, .tdx-page-body .tdx-page *::before, .tdx-page-body .tdx-page *::after { box-sizing: border-box; }
.tdx-page :is(h1, h2, h3, p, ul, dl, dd) { margin: 0; }
.tdx-page :is(ul) { padding: 0; list-style: none; }
.tdx-page :is(a) { text-decoration: none; color: inherit; }
.tdx-page :is(img) { max-width: 100%; height: auto; }
.tdx-page-body .tdx-page__inner { max-width: 1596px; margin: 0 auto; padding: 0 24px; }
.tdx-page-body .tdx-section__title { font: 500 35px/45px var(--tdx-head); color: var(--tdx-ink); text-align: center; }
.tdx-page-body .tdx-section__title--light { color: #fff; }

/* Buttons */
.tdx-page-body .tdx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 16px/25px var(--tdx-head); letter-spacing: .96px; white-space: nowrap; transition: filter .15s, transform .15s; }
.tdx-page-body .tdx-btn:hover { filter: brightness(1.08); }
.tdx-page-body .tdx-btn--primary { min-width: 200px; height: 54px; padding: 0 24px; background: var(--tdx-bright); border: 1px solid var(--tdx-bright); border-radius: 7px; color: #000; }
.tdx-page-body .tdx-btn--ghost { min-width: 229px; height: 55px; padding: 0 20px; background: rgba(0, 0, 0, .6); border: 2px solid var(--tdx-orange); border-radius: 10px; color: #fff; font-size: 15px; letter-spacing: .9px; box-shadow: 0 2px 11px 7px rgba(0, 0, 0, .35); }
.tdx-page-body .tdx-btn__icon { font: 600 1em/1 var(--tdx-link); }

/* Level dots */
.tdx-page-body .tdx-dots { display: inline-flex; align-items: center; gap: 4px; }
.tdx-page-body .tdx-dots__dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.tdx-page-body .tdx-dots__dot.is-on { background: #fff; }

/* Placeholder badge (no image supplied yet) */
.tdx-page-body .tdx-badge-placeholder { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px dashed rgba(107, 241, 114, .5); background: radial-gradient(circle, #0c1f12, #111 70%); }

/* ---------- Hero ---------- */
.tdx-page-body .tdx-hero { position: relative; background: var(--tdx-ink); color: #fff; overflow: hidden; }
.tdx-page-body .tdx-hero__wave { position: absolute; top: 139px; right: 0; width: 1159px; max-width: 70%; height: auto; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
/* The Elementor Pro header is position:fixed (80px): hero top padding = header + 42px crumb offset. */
.tdx-page-body .tdx-hero__inner { position: relative; max-width: 1442px; margin: 0 auto; padding: 139px 24px 72px; min-height: 859px; }
.tdx-page-body .tdx-hero--course .tdx-hero__inner { padding-bottom: 127px; }
.tdx-page-body .tdx-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.tdx-page-body .tdx-hero__crumb { display: flex; gap: 6px; font: 300 14px/20px var(--tdx-body); color: #fff; }
.tdx-page-body .tdx-hero__crumb a { color: #fff; }
.tdx-page-body .tdx-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.tdx-page-body .tdx-hero--course .tdx-hero__tags { margin-top: 50px; }
.tdx-page-body .tdx-tag { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 24px; font: 500 16px/1 var(--tdx-head); letter-spacing: .96px; white-space: nowrap; }
.tdx-page-body .tdx-tag--track { background: rgba(107, 241, 114, .13); color: var(--tdx-bright); }
.tdx-page-body .tdx-tag--offensive { background: rgba(242, 102, 8, .15); color: var(--tdx-orange); }
.tdx-page-body .tdx-tag--level { height: 27px; padding: 0 10px 0 12px; border-radius: 54px; background: rgba(255, 255, 255, .14); color: #fff; font: 400 14px/1 var(--tdx-head); letter-spacing: .84px; }
.tdx-page-body .tdx-tag--outline { height: 29px; padding: 0 12px; gap: 8px; border-radius: 43px; background: #000; border: 1px solid #fff; color: #fff; font: 500 11.1px/1 var(--tdx-head); letter-spacing: .67px; }
.tdx-page-body .tdx-hero__title { margin-top: 19px; font: 500 40px/50px var(--tdx-head); color: #fff; max-width: 893px; }
.tdx-page-body .tdx-hero--package .tdx-hero__title { max-width: 661px; }
.tdx-page-body .tdx-hero__desc { margin-top: 18px; font: 400 20px/30px var(--tdx-body); max-width: 707px; }
.tdx-page-body .tdx-hero__meta { margin-top: 30px; font: 300 14px/20px var(--tdx-body); white-space: pre-wrap; }
.tdx-page-body .tdx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; }

.tdx-page-body .tdx-hero__art { position: relative; flex: none; }
.tdx-page-body .tdx-hero--course .tdx-hero__art { width: 472px; height: 472px; margin: 14px 80px 0 0; }
.tdx-page-body .tdx-hero--package .tdx-hero__art { width: 545px; height: 450px; margin: 0 60px 0 0; }
.tdx-page-body .tdx-hero__art--0 .tdx-badge-placeholder, .tdx-page-body .tdx-hero__art--1 .tdx-hero__badge { width: 100%; height: 100%; object-fit: contain; }
.tdx-page-body .tdx-hero__art--2 .tdx-hero__badge, .tdx-page-body .tdx-hero__art--3 .tdx-hero__badge, .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge { position: absolute; width: 272px; height: 272px; border-radius: 50%; object-fit: cover; }
.tdx-page-body .tdx-hero__badge--1 { z-index: 4; } .tdx-hero__badge--2 { z-index: 3; } .tdx-hero__badge--3 { z-index: 2; } .tdx-hero__badge--4 { z-index: 1; }
.tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--1 { left: 0; top: 2px; }
.tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--2 { left: 178px; top: 0; }
.tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--3 { left: 84px; top: 177px; }
.tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--4 { left: 273px; top: 167px; }
.tdx-page-body .tdx-hero__art--3 .tdx-hero__badge--1 { left: 0; top: 0; }
.tdx-page-body .tdx-hero__art--3 .tdx-hero__badge--2 { left: 200px; top: 0; }
.tdx-page-body .tdx-hero__art--3 .tdx-hero__badge--3 { left: 100px; top: 177px; }
.tdx-page-body .tdx-hero__art--2 .tdx-hero__badge--1 { left: 0; top: 60px; }
.tdx-page-body .tdx-hero__art--2 .tdx-hero__badge--2 { left: 220px; top: 60px; }

.tdx-page-body .tdx-hero__foot { display: grid; grid-template-columns: 517px minmax(0, 1fr); gap: 20px; margin-top: 45px; }
.tdx-page-body .tdx-hero--course .tdx-hero__foot { display: flex; align-items: center; gap: 30px; margin-top: 100px; }
.tdx-page-body .tdx-hero--course .tdx-hero__col--roles { display: flex; align-items: center; gap: 22px; }
.tdx-page-body .tdx-hero__label { font: 500 20px/35px var(--tdx-head); color: #fff; white-space: nowrap; }
.tdx-page-body .tdx-hero__bullets { margin-top: 11px; }
.tdx-page-body .tdx-hero__bullets li { position: relative; padding-left: 17px; font: 500 16px/27px var(--tdx-head); letter-spacing: .96px; }
.tdx-page-body .tdx-hero__bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--tdx-orange); }
.tdx-page-body .tdx-hero__roles { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 15px 9px; }
.tdx-page-body .tdx-hero--course .tdx-hero__roles { margin-top: 0; }
.tdx-page-body .tdx-role { display: inline-flex; align-items: center; height: 33px; padding: 0 14px; border-radius: 48px; background: rgba(255, 255, 255, .14); font: 500 16px/1 var(--tdx-head); letter-spacing: .96px; white-space: nowrap; }
.tdx-page-body .tdx-hero--course .tdx-role { padding: 0 8px; font-size: 18px; letter-spacing: 1.08px; }

/* ---------- Sticky program bar (Figma Group 285 1214:6336 / 1000:2692): 62px black bar under the fixed header, centered title + meta + outline button.
   pages.js sets `top` to the header's bottom edge and toggles .is-visible once the hero has scrolled past it. Desktop/tablet only (no mobile frame). ---------- */
.tdx-page-body .tdx-sticky { position: fixed; left: 0; right: 0; top: 80px; z-index: 90; height: 62px; background: #000; color: #fff; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.tdx-page-body .tdx-sticky.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform .25s ease, opacity .25s ease; }
.tdx-page-body .tdx-sticky__inner { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 24px; }
.tdx-page-body .tdx-sticky__title { font: 500 18px/28px var(--tdx-head); color: #fff; white-space: nowrap; }
.tdx-page-body .tdx-sticky__meta { display: inline-flex; align-items: center; gap: 8px; margin-left: 80px; font: 400 14px/20px var(--tdx-body); color: #9C9C9C; white-space: nowrap; }
.tdx-page-body .tdx-sticky__detail { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/25px var(--tdx-head); letter-spacing: .84px; }
.tdx-page-body .tdx-sticky__btn { display: inline-flex; align-items: center; justify-content: center; width: 114px; height: 31px; margin-left: 101px; border: 1px solid var(--tdx-bright); border-radius: 4px; font: 500 9.12px/1 var(--tdx-head); letter-spacing: .55px; color: var(--tdx-bright); white-space: nowrap; transition: background .15s; }
.tdx-page-body .tdx-sticky__btn:hover { background: rgba(107, 241, 114, .13); }
@media (max-width: 767px) { .tdx-page-body .tdx-sticky { display: none; } }

/* ---------- Grey box (What's inside / Program structure) ---------- */
.tdx-page-body .tdx-box { padding: 71px 24px 0; }
.tdx-page-body .tdx-box__inner { max-width: 1596px; margin: 0 auto; position: relative; overflow: hidden; background: var(--tdx-grey); border-radius: 20px; display: grid; grid-template-columns: 537px minmax(0, 1fr); gap: 122px; padding: 50px 92px 50px 57px; }
.tdx-page-body .tdx-box--structure .tdx-box__inner { gap: 195px; padding: 84px 149px 90px 106px; }
.tdx-page-body .tdx-box__title { font: 500 35px/45px var(--tdx-head); color: var(--tdx-ink); }
.tdx-page-body .tdx-box__intro { margin-top: 20px; font: 400 18px/30px var(--tdx-body); color: #000; }
.tdx-page-body .tdx-box__text { position: relative; }
.tdx-page-body .tdx-box__list { position: relative; display: grid; gap: 12px; align-content: start; margin-left: 44px; /* room for the half-outside badge */ }
/* The list doubles as a slider (programs.js mechanism): the track is transparent to the desktop grid, dots only exist on mobile */
.tdx-page-body .tdx-box__list .tdx-slider__track { display: contents; }
.tdx-page-body .tdx-box__list .tdx-slider__dots { display: none; }

/* Program row */
.tdx-page-body .tdx-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 109px; background: #fff; border: 2px solid var(--tdx-line); border-radius: 12px; padding: 15px 33px 15px 53px; color: #000; }
.tdx-page-body .tdx-row__badge { position: absolute; left: -44px; top: 50%; width: 88px; height: 88px; transform: translateY(-50%); border-radius: 50%; overflow: hidden; }
.tdx-page-body .tdx-row__badge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tdx-page-body .tdx-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.tdx-page-body .tdx-chip { display: inline-flex; align-items: center; gap: 8px; height: 21px; padding: 0 8px; border-radius: 17px; font: 500 11.1px/1 var(--tdx-head); letter-spacing: .67px; white-space: nowrap; }
.tdx-page-body .tdx-chip--track { background: rgba(107, 241, 114, .13); color: var(--tdx-green); }
.tdx-page-body .tdx-chip--offensive { background: rgba(242, 102, 8, .12); color: var(--tdx-orange); }
.tdx-page-body .tdx-chip--level { background: var(--tdx-grey); color: #000; font-weight: 400; padding: 0 10px; border-radius: 43px; }
.tdx-page-body .tdx-chip .tdx-dots { gap: 3px; }
.tdx-page-body .tdx-chip .tdx-dots__dot { width: 7px; height: 7px; background: #D9D9D9; }
.tdx-page-body .tdx-chip .tdx-dots__dot.is-on { background: #000; }
.tdx-page-body .tdx-row__hours { margin-left: 2px; font: 400 12px/20px var(--tdx-body); color: #000; }
.tdx-page-body .tdx-row__title { margin-top: 6px; font: 500 15.4px/21px var(--tdx-head); letter-spacing: .92px; color: #000; }
.tdx-page-body .tdx-row__teaser { margin-top: 3px; max-width: 593px; font: 400 12px/20px var(--tdx-body); color: #000; }
.tdx-page-body .tdx-row__btn { display: inline-flex; align-items: center; justify-content: center; width: 113px; height: 35px; margin-left: 20px; background: #fff; border: 1px solid var(--tdx-green); border-radius: 4px; font: 500 10.3px/1 var(--tdx-head); letter-spacing: .62px; color: #000; white-space: nowrap; transition: background .15s; }
.tdx-page-body .tdx-row__btn:hover { background: rgba(107, 241, 114, .13); }

/* Accordion */
.tdx-page-body .tdx-accordion { display: grid; gap: 22px; align-content: start; }
.tdx-page-body .tdx-acc { position: relative; padding: 0 24px 0 112px; background: #000; border: 2px solid #000; border-radius: 12px; color: #fff; }
.tdx-page-body .tdx-acc::before { content: ""; position: absolute; left: 48px; top: 8px; bottom: 8px; width: 1px; background: var(--tdx-green); }
.tdx-page-body .tdx-acc.is-open { background: #fff; border-color: var(--tdx-green); color: #000; }
.tdx-page-body .tdx-acc.is-open::before { background: var(--tdx-line); }
.tdx-page-body .tdx-acc__num { position: absolute; left: 53px; top: 50%; width: 20px; transform: translateY(-50%); font: 500 20px/1 var(--tdx-head); letter-spacing: .4px; color: var(--tdx-bright); text-align: center; }
.tdx-page-body .tdx-acc.is-open .tdx-acc__num { color: var(--tdx-green); }
.tdx-page-body .tdx-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 67px; padding: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.tdx-page-body .tdx-acc.is-open .tdx-acc__head { min-height: 0; padding-top: 19px; align-items: flex-start; }
.tdx-page-body .tdx-acc__title { font: 500 20px/25px var(--tdx-head); letter-spacing: .4px; }
.tdx-page-body .tdx-acc__chev { flex: none; color: #fff; transition: transform .2s; }
.tdx-page-body .tdx-acc.is-open .tdx-acc__chev { margin-top: 9px; color: #BFBFBF; transform: rotate(180deg); }
.tdx-page-body .tdx-acc__panel { padding: 10px 0 28px; }
.tdx-page-body .tdx-acc__panel:empty { padding-bottom: 19px; }
.tdx-page-body .tdx-acc__panel p { max-width: 391px; font: 400 16px/25px var(--tdx-body); color: #000; }

/* ---------- Validation ---------- */
.tdx-page-body .tdx-validation { position: relative; padding: 95px 0 116px; background: radial-gradient(45% 55% at 92% 105%, rgba(107, 241, 114, .22), transparent 65%), radial-gradient(30% 40% at 100% 85%, rgba(242, 102, 8, .14), transparent 60%), #fff; }
.tdx-page-body .tdx-validation__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 388px); justify-content: center; gap: 15px; margin-top: 107px; }
.tdx-page-body .tdx-vcard { position: relative; min-height: 213px; padding: 54px 22px 30px; background: #fff; border: 2px solid var(--tdx-line); border-radius: 14px; text-align: center; }
.tdx-page-body .tdx-vcard__icon { position: absolute; left: 50%; top: -35px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 10px; border-radius: 8px; background: var(--tdx-green); }
.tdx-page-body .tdx-vcard__icon svg { width: 50px; height: 44px; }
.tdx-page-body .tdx-vcard__title { font: 500 20px/30px var(--tdx-head); letter-spacing: 1.2px; color: #000; }
.tdx-page-body .tdx-vcard__text { max-width: 342px; margin: 6px auto 0; font: 400 18px/30px var(--tdx-body); color: #000; }
.tdx-page-body .tdx-vcard__bar { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 100px; height: 7px; border-radius: 30px; background: var(--tdx-ink); }

/* ---------- TDX "X" mark (assets/img/x-glyph.svg, stroke = currentColor) ---------- */
.tdx-page-body .tdx-glyph { position: absolute; display: block; width: 561px; height: 277px; pointer-events: none; user-select: none; }
.tdx-page-body .tdx-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tdx-page-body .tdx-box__glyph { left: -1px; bottom: -4px; color: #fff; }
.tdx-page-body .tdx-box__glyph path { stroke-width: 2; }
.tdx-page-body .tdx-validation__glyph { top: 332px; right: -79px; z-index: 1; color: var(--tdx-bright); }
.tdx-page-body .tdx-validation__glyph path { stroke-width: 1; }

/* ---------- Dark band (exam, next step, CTA) ---------- */
.tdx-page-body .tdx-dark { position: relative; overflow: hidden; background: #000; /* Figma Rectangle 21: pure black; exam-band-bg.jpg fades to #000 */ color: #fff; border-radius: 40px 40px 0 0; }
.tdx-page-body .tdx-dark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 922px; pointer-events: none; background: url("../img/exam-band-bg.jpg") center top / cover no-repeat; }
.tdx-page-body .tdx-exam { position: relative; padding-top: 92px; }
.tdx-page-body .tdx-exam__grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 896px; margin: 48px auto 0; background-color: #000; background-image: linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)), linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)), linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)); background-repeat: no-repeat; background-size: 1px calc(100% - 92px), 1px calc(100% - 92px), calc(100% - 82px) 1px; background-position: 33.6% 50%, 67.2% 50%, 50% 50%; border: 1px solid rgba(216, 216, 216, .22); border-radius: 20px; overflow: hidden; }
.tdx-page-body .tdx-exam__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 201px; padding: 20px; text-align: center; border-radius: 0; }
.tdx-page-body .tdx-exam__value { font: 700 25px/30px var(--tdx-head); color: #ff862c; }
.tdx-page-body .tdx-exam__label { margin-top: 6px; font: 400 20px/30px var(--tdx-head); color: #fff; }
.tdx-page-body .tdx-exam__text { max-width: 960px; margin: 45px auto 0; text-align: center; font: 400 18px/30px var(--tdx-body); color: #fff; }
.tdx-page-body .tdx-exam__text em { font-style: normal; color: var(--tdx-bright); }

.tdx-page-body .tdx-next { position: relative; padding-top: 152px; }
.tdx-page-body .tdx-next__card { position: relative; max-width: 835px; margin: 45px auto 0; }
.tdx-page-body .tdx-next__card .tdx-row { padding-right: 24px; z-index: 1; }
/* Figma "Vector 42": a full-bleed 0.5px white line crossing behind the card through the badge's centre (card middle on desktop) */
.tdx-page-body .tdx-next__card::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100vw; height: 1px; margin-left: -50vw; background: rgba(255, 255, 255, .5); pointer-events: none; }
.tdx-page-body .tdx-next__all { margin-top: 56px; text-align: center; }

.tdx-page-body .tdx-cta { position: relative; min-height: 692px; margin-top: 71px; padding-top: 132px; overflow: hidden; }
.tdx-page-body .tdx-cta__inner { position: relative; max-width: 1490px; margin: 0 auto; padding: 0 24px; }
.tdx-page-body .tdx-cta__title { font: 500 40px/70px var(--tdx-head); color: var(--tdx-bright); }
.tdx-page-body .tdx-cta__text { max-width: 564px; margin-top: 2px; font: 400 18px/30px var(--tdx-body); color: #fff; }
.tdx-page-body .tdx-cta__text a { color: var(--tdx-bright); }
.tdx-page-body .tdx-cta__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 41px; }
/* Figma "Pros picture" (1214:6150, 1920 frame): the collage sits at x=800, 11px down, 671px tall with a .5px blur, and four black fades lie on top of it —
   top 221px band, bottom 155px band, left fade solid to x=700 and gone at x=1486, right 451px band. The fades are a ::after layer (was a left-only mask). */
.tdx-page-body .tdx-cta__art { position: absolute; inset: 0; pointer-events: none; }
.tdx-page-body .tdx-cta__art img { position: absolute; left: 41.67%; top: 11px; width: auto; max-width: none; height: 671px; /* Figma has a .5px blur; dropped: the asset is already upscaled on 2x screens and it read as out of focus */ }
.tdx-page-body .tdx-cta__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(180deg, #000 19px, rgba(0, 0, 0, 0) 209px),
    linear-gradient(0deg, #000 22px, rgba(0, 0, 0, 0) 156px),
    linear-gradient(90deg, #000 36.46%, rgba(0, 0, 0, 0) 77.4%),
    linear-gradient(270deg, #000 2%, rgba(0, 0, 0, 0) 22.3%); }
.tdx-page-body .tdx-cta__placeholder { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; padding: 20px 20px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.tdx-page-body .tdx-cta__placeholder span { display: block; border-radius: 8px; background: linear-gradient(160deg, #1c1f1c, #0d0f0d); border: 1px solid rgba(107, 241, 114, .12); box-shadow: inset 0 0 40px rgba(66, 173, 96, .08); }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
    .tdx-page-body .tdx-box__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 60px; padding: 50px; }
    .tdx-page-body .tdx-box--structure .tdx-box__inner { gap: 80px; padding: 60px 50px; }
    .tdx-page-body .tdx-hero--course .tdx-hero__art { margin-right: 20px; }
    .tdx-page-body .tdx-hero--package .tdx-hero__art { margin-right: 0; }
    /* Package badge cluster scaled to 400x330 (Figma 545x450 x .734) so the H1 keeps its room on laptops and tablets */
    .tdx-page-body .tdx-hero--package .tdx-hero__art { width: 400px; height: 330px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge { width: 200px; height: 200px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--1 { left: 0; top: 1px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--2 { left: 131px; top: 0; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--3 { left: 62px; top: 130px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--4 { left: 200px; top: 123px; }
    .tdx-page-body .tdx-validation__grid { grid-template-columns: repeat(3, minmax(0, 388px)); }
}
@media (max-width: 1100px) {
    .tdx-page-body .tdx-hero__top { grid-template-columns: 1fr; }
    .tdx-page-body .tdx-hero__art { margin: 30px auto 0 !important; }
    .tdx-page-body .tdx-hero__foot { grid-template-columns: 1fr; }
    .tdx-page-body .tdx-box__inner { grid-template-columns: 1fr; gap: 40px; }
    .tdx-page-body .tdx-validation__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 388px)); gap: 50px 15px; }
    .tdx-page-body .tdx-glyph { display: none; }
    /* CTA below 1100px: one centered column — title, copy, full-width collage (16:9, cover) with fades, centered buttons, 118px above the footer.
       .tdx-cta__inner is unwrapped with display:contents so its children reorder via flex `order` alongside .tdx-cta__art (same technique as .tdx-hero__content). */
    .tdx-page-body .tdx-cta { display: flex; flex-direction: column; text-align: center; min-height: 0; padding: 80px 0 118px; }
    .tdx-page-body .tdx-cta__inner { display: contents; }
    .tdx-page-body .tdx-cta__title { order: 1; padding: 0 24px; }
    .tdx-page-body .tdx-cta__text { order: 2; margin-left: auto; margin-right: auto; padding: 0 24px; }
    .tdx-page-body .tdx-cta__art { order: 3; position: relative; inset: auto; width: 100%; height: auto; margin: 40px 0 0; aspect-ratio: 16 / 9; overflow: hidden; }
    .tdx-page-body .tdx-cta__art img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .tdx-page-body .tdx-cta__art::after { background:
        linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 15.3%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 61.6%, #000 98.9%),
        linear-gradient(90deg, rgba(0, 0, 0, .51) 0%, rgba(0, 0, 0, 0) 40%),
        linear-gradient(270deg, rgba(0, 0, 0, .51) 0%, rgba(0, 0, 0, 0) 40%); }
    .tdx-page-body .tdx-cta__actions { order: 4; justify-content: center; margin-top: 48px; padding: 0 24px; }
    .tdx-page-body .tdx-cta__placeholder { padding: 0 24px; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) {
    .tdx-page-body .tdx-page__inner, .tdx-page-body .tdx-box, .tdx-page-body .tdx-cta__inner { padding-left: 20px; padding-right: 20px; }
    .tdx-page-body .tdx-hero__inner { padding: 108px 20px 48px; min-height: 0; }
    .tdx-page-body .tdx-hero--course .tdx-hero__inner { padding-bottom: 56px; }
    .tdx-page-body .tdx-hero__tags, .tdx-page-body .tdx-hero--course .tdx-hero__tags { margin-top: 22px; gap: 10px; }
    .tdx-page-body .tdx-hero__title { margin-top: 14px; font-size: 30px; line-height: 38px; }
    .tdx-page-body .tdx-hero__desc { margin-top: 14px; font-size: 16px; line-height: 26px; }
    .tdx-page-body .tdx-hero__meta { margin-top: 18px; }
    .tdx-page-body .tdx-hero__actions { margin-top: 24px; }
    /* Wave lines (Figma mob "Designs" 1238:8673): the 1159px asset at native size, 136px from the page top, its right edge 143px past the frame, no fade mask */
    .tdx-page-body .tdx-hero__wave { width: 1159px; max-width: none; left: auto; right: -143px; top: 136px; opacity: .9; -webkit-mask-image: none; mask-image: none; }
    .tdx-page-body .tdx-hero--course .tdx-hero__art { width: 260px; height: 260px; }
    .tdx-page-body .tdx-hero--package .tdx-hero__art { width: 330px; height: 270px; max-width: 100%; }
    .tdx-page-body .tdx-hero__art--2 .tdx-hero__badge, .tdx-page-body .tdx-hero__art--3 .tdx-hero__badge, .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge { width: 160px; height: 160px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--1 { left: 0; top: 1px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--2 { left: 107px; top: 0; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--3 { left: 50px; top: 106px; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--4 { left: 164px; top: 100px; }
    .tdx-page-body .tdx-hero__foot, .tdx-page-body .tdx-hero--course .tdx-hero__foot { margin-top: 36px; gap: 24px; flex-direction: column; align-items: flex-start; }
    .tdx-page-body .tdx-hero--course .tdx-hero__col--roles { flex-direction: column; align-items: flex-start; gap: 10px; }
    /* Entry Point / Outcome Roles (Figma mob 1267:9150 / 1267:9174): 18/30 labels, 16/27 bullets in a 286px column, 29px chips at 14.2px, 10x11 chip gaps */
    .tdx-page-body .tdx-hero__label { font-size: 18px; line-height: 30px; white-space: normal; }
    .tdx-page-body .tdx-hero__bullets { margin-top: 14px; max-width: 303px; }
    .tdx-page-body .tdx-hero__bullets li { font-size: 16px; line-height: 27px; letter-spacing: .96px; }
    .tdx-page-body .tdx-hero__roles { margin-top: 9px; gap: 11px 10px; }
    .tdx-page-body .tdx-role, .tdx-page-body .tdx-hero--course .tdx-role { height: 29px; min-height: 0; padding: 0 10px; border-radius: 43px; font-size: 14.2px; line-height: 1; letter-spacing: .85px; white-space: nowrap; }
    .tdx-page-body .tdx-box { padding-top: 40px; }
    .tdx-page-body .tdx-box__inner, .tdx-page-body .tdx-box--structure .tdx-box__inner { padding: 32px 20px; gap: 28px; border-radius: 16px; }
    .tdx-page-body .tdx-section__title, .tdx-page-body .tdx-box__title { font-size: 28px; line-height: 36px; }
    .tdx-page-body .tdx-box__intro { font-size: 16px; line-height: 26px; margin-top: 14px; }
    .tdx-page-body .tdx-row { grid-template-columns: 74px minmax(0, 1fr); padding: 14px 14px 14px 0; }
    .tdx-page-body .tdx-box__list { margin-left: 0; }
    .tdx-page-body .tdx-row__badge { position: static; top: auto; transform: none; width: 60px; height: 60px; margin-left: 6px; align-self: start; }
    .tdx-page-body .tdx-row__btn { grid-column: 2; justify-self: start; margin: 10px 0 0; }
    .tdx-page-body .tdx-next__card .tdx-row { padding-right: 14px; }
    .tdx-page-body .tdx-next__card::before { top: 44px; left: -20px; margin-left: 0; /* badge centre: 14px padding + 30px; spans the viewport (card inset 20px) */ }
    /* Accordion (Figma mob Group 81/80 1085:5523): 404px cards 15px apart; number at x=13, separator at x=48 (8px top / 11px bottom), title at x=72 (20/25),
       chevron 18px from the right; closed card 82px, open card: title 19px down, text 15px under it, 25px to the bottom */
    .tdx-page-body .tdx-accordion { gap: 15px; }
    .tdx-page-body .tdx-acc { padding: 0 16px 0 70px; }
    .tdx-page-body .tdx-acc::before { left: 46px; top: 6px; bottom: 9px; }
    .tdx-page-body .tdx-acc__num { left: 11px; }
    .tdx-page-body .tdx-acc__head { min-height: 78px; }
    .tdx-page-body .tdx-acc__title { font-size: 20px; line-height: 25px; }
    .tdx-page-body .tdx-acc__panel { padding: 15px 0 23px; }
    .tdx-page-body .tdx-validation { padding: 60px 0 70px; }
    .tdx-page-body .tdx-validation__grid { margin-top: 70px; gap: 60px 15px; }
    .tdx-page-body .tdx-vcard__text { font-size: 16px; line-height: 26px; }
    .tdx-page-body .tdx-dark { border-radius: 24px 24px 0 0; }
    .tdx-page-body .tdx-exam { padding-top: 60px; }
    .tdx-page-body .tdx-exam__grid { grid-template-columns: repeat(2, 1fr); margin-top: 30px; border-radius: 16px; background-image: none; }
    .tdx-page-body .tdx-exam__cell { min-height: 140px; padding: 16px 10px; border-left: 1px solid rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .12); }
    .tdx-page-body .tdx-exam__cell:nth-child(3n+1) { border-left: 1px solid rgba(255, 255, 255, .12); }
    .tdx-page-body .tdx-exam__cell:nth-child(2n+1) { border-left: 0; }
    .tdx-page-body .tdx-exam__cell:nth-child(-n+2) { border-top: 0; }
    .tdx-page-body .tdx-exam__value { font-size: 20px; }
    .tdx-page-body .tdx-exam__label, .tdx-page-body .tdx-exam__text { font-size: 16px; line-height: 26px; }
    .tdx-page-body .tdx-exam__text { margin-top: 28px; }
    .tdx-page-body .tdx-next { padding-top: 70px; }
    .tdx-page-body .tdx-next__card { margin-top: 28px; }
    .tdx-page-body .tdx-next__all { margin-top: 32px; }
    .tdx-page-body .tdx-cta { margin-top: 40px; padding-top: 60px; }
    .tdx-page-body .tdx-cta__title { font-size: 30px; line-height: 40px; }
    .tdx-page-body .tdx-cta__text { margin-top: 12px; font-size: 16px; line-height: 26px; }
    .tdx-page-body .tdx-cta__actions { margin-top: 24px; }
    .tdx-page-body .tdx-cta__art { margin-top: 36px; }
}

/* ---------- Mobile (Figma "Package page - mob" 1238:8664, 440px frame) ---------- */
@media (max-width: 640px) {
    /* Hero: crumb, pills, H1, badges, desc, buttons all centered; badges move up between H1 and desc */
    /* Vertical rhythm on the 440 frame: header 80 + 26 -> crumb (14/20), +37 -> pills (30), +16 -> H1 (Bold 30/40, 3 lines), +24 -> badges (133),
       +24 -> desc (18/25), +47 -> buttons (226x54, 14, 229x55), +31 -> Entry/Roles, 60 to the hero bottom. Content inset 18px. */
    .tdx-page-body .tdx-hero__inner { padding: 86px 18px 60px; }
    .tdx-page-body .tdx-hero__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; /* the desktop grid gap (40px) must not add to the margins below */ }
    .tdx-page-body .tdx-hero__content { display: contents; }
    .tdx-page-body .tdx-hero__crumb { order: 1; justify-content: center; }
    .tdx-page-body .tdx-hero__tags { order: 2; justify-content: center; margin-top: 37px; gap: 10px; }
    .tdx-page-body .tdx-hero__title { order: 3; margin-top: 16px; font-weight: 700; font-size: 30px; line-height: 40px; letter-spacing: 3px; text-align: center; max-width: 100%; }
    .tdx-page-body .tdx-hero__art { order: 4; margin: 24px auto 0 !important; }
    .tdx-page-body .tdx-hero__desc { order: 5; margin-top: 24px; font-size: 18px; line-height: 25px; text-align: center; max-width: 100%; }
    .tdx-page-body .tdx-hero__meta { display: none; }
    .tdx-page-body .tdx-hero__actions { order: 7; flex-direction: column; align-items: center; gap: 14px; margin-top: 47px; }
    .tdx-page-body .tdx-hero__actions .tdx-btn--primary { width: 226px; min-width: 0; }
    .tdx-page-body .tdx-hero__actions .tdx-btn--ghost { width: 229px; min-width: 0; }
    /* Entry/Roles block sits 24px further in than the hero copy (chips at x=42, label + bullets at x=49 on the 440 frame) */
    .tdx-page-body .tdx-hero__foot { margin-top: 31px; gap: 25px; padding: 0 24px; }
    .tdx-page-body .tdx-hero__label, .tdx-page-body .tdx-hero__bullets { margin-left: 7px; }
    .tdx-page-body .tdx-tag--track { padding: 0 12px; font-size: 14px; letter-spacing: .84px; }

    /* Badge cluster: one overlapping row under the H1 (was a diagonal stack under the buttons) */
    .tdx-page-body .tdx-hero--package .tdx-hero__art--4 { width: 405px; max-width: 100%; height: auto; aspect-ratio: 405 / 133; }
    .tdx-page-body .tdx-hero__art--2 .tdx-hero__badge, .tdx-page-body .tdx-hero__art--3 .tdx-hero__badge, .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge { width: 133px; height: 133px; }
    /* 4-badge row (Group 367: 133px circles at 0 / 87 / 180 / 272 of 405) scales with the viewport below 441px instead of clipping the last badge */
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge { width: 32.84%; height: auto; aspect-ratio: 1 / 1; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--1 { left: 0; top: 0; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--2 { left: 21.48%; top: 0; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--3 { left: 44.44%; top: 0; }
    .tdx-page-body .tdx-hero__art--4 .tdx-hero__badge--4 { left: 67.16%; top: 0; }
    .tdx-page-body .tdx-hero__art--3 { width: 315px; height: 133px; max-width: 100%; }
    .tdx-page-body .tdx-hero__art--3 .tdx-hero__badge--1 { left: 0; top: 0; }
    .tdx-page-body .tdx-hero__art--3 .tdx-hero__badge--2 { left: 91px; top: 0; }
    .tdx-page-body .tdx-hero__art--3 .tdx-hero__badge--3 { left: 182px; top: 0; }
    .tdx-page-body .tdx-hero__art--2 { width: 224px; height: 133px; max-width: 100%; }
    .tdx-page-body .tdx-hero__art--2 .tdx-hero__badge--1 { left: 0; top: 0; }
    .tdx-page-body .tdx-hero__art--2 .tdx-hero__badge--2 { left: 91px; top: 0; }

    /* Section titles: line-height correction (28/38, not 28/36) */
    .tdx-page-body .tdx-section__title, .tdx-page-body .tdx-box__title { line-height: 38px; }

    /* Grey box (Rectangle 83): full-bleed, 60px under the hero, 42px top / 45px bottom / 24px sides; title -> intro 19px, intro -> slider 36px */
    .tdx-page-body .tdx-box__inner, .tdx-page-body .tdx-box--structure .tdx-box__inner { border-radius: 12px; }
    .tdx-page-body .tdx-box--inside { padding: 60px 0 0; }
    .tdx-page-body .tdx-box--inside .tdx-box__inner { padding: 42px 24px 45px; gap: 36px; }
    .tdx-page-body .tdx-box__text { text-align: center; }
    .tdx-page-body .tdx-box__intro { margin-top: 19px; font-size: 18px; line-height: 28px; }
    /* Program Structure (Figma mob Rectangle 83 1085:5520): full-bleed #F6F6F6 with square corners, 73px under the hero;
       32px top, title -> intro 25px (intro inset 13px more), intro -> accordion 41px, 62px bottom, 18px sides */
    .tdx-page-body .tdx-box--structure { padding: 73px 0 0; }
    .tdx-page-body .tdx-box--structure .tdx-box__inner { padding: 32px 18px 62px; gap: 41px; border-radius: 0; }
    .tdx-page-body .tdx-box--structure .tdx-box__intro { margin-top: 25px; padding: 0 13px; }

    /* Program card (Group 283: 371x236 on the 440 frame): 88px badge overlapping the left edge at top 10px, chips / hours / title / teaser stacked, button bottom-right */
    .tdx-page-body .tdx-row { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 236px; padding: 15px 22px 26px 52px; /* + 2px border = Figma 17 / 24 / 28 / 54 */ }
    .tdx-page-body .tdx-row__badge { position: absolute; left: -45px; top: 8px; width: 88px; height: 88px; margin-left: 0; transform: none; align-self: auto; }
    .tdx-page-body .tdx-row__tags { gap: 9px; }
    .tdx-page-body .tdx-row__hours { flex: 0 0 100%; }
    .tdx-page-body .tdx-row__title { margin-top: 18px; }
    .tdx-page-body .tdx-row__teaser { margin-top: 5px; max-width: 295px; }
    .tdx-page-body .tdx-row__btn { grid-column: 1; justify-self: end; margin: 21px 1px 0 0; }
    /* Next-step card (Figma mob 1238:8823): card left edge 54px from the viewport (20px inner padding + 34px) so the 88px badge at x=10 is fully visible;
       badge 41px below the card top; card 193px tall with 21px under the button. */
    .tdx-page-body .tdx-next__card { margin-left: 34px; }
    .tdx-page-body .tdx-next__card .tdx-row { min-height: 193px; padding-bottom: 21px; }
    .tdx-page-body .tdx-next__card .tdx-row__badge { top: 41px; }
    .tdx-page-body .tdx-next__card::before { top: 85px; left: -54px; margin-left: 0; /* Figma mob Vector 42 at y=4013 = card top 3928 + 85 (badge centre); spans the viewport (card inset 54px) */ }
    /* "View all programs" (Group 280): 229x55, centered — not full width */
    .tdx-page-body .tdx-next__all .tdx-btn { width: 229px; min-width: 0; }

    /* "What's inside" slider (Frame 73): the [tdx_programs] scroll-snap + drag + dots mechanism (programs.js). Track full-bleed in the box;
       card = track width - 2px inset - 43px badge room - 24px right inset (371px on the 440 frame), 35px between cards -> 449px pitch, no peek. */
    .tdx-page-body .tdx-box--inside .tdx-box__list { display: block; margin: 0 -24px; padding: 0; }
    .tdx-page-body .tdx-box__list .tdx-slider__track { display: flex; gap: 35px; padding: 0 24px 0 2px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: none; -ms-overflow-style: none; }
    .tdx-page-body .tdx-box__list .tdx-slider__track::-webkit-scrollbar { display: none; }
    .tdx-page-body .tdx-box__list .tdx-slider__track > .tdx-row { flex: 0 0 auto; width: calc(100% - 43px); margin-left: 43px; scroll-snap-align: start; scroll-margin-left: 43px; }
    .tdx-page-body .tdx-box__list.is-scrollable .tdx-slider__track { cursor: grab; }
    .tdx-page-body .tdx-box__list.is-dragging .tdx-slider__track { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; -webkit-user-select: none; user-select: none; }
    .tdx-page-body .tdx-box__list.is-dragging .tdx-slider__track > .tdx-row { pointer-events: none; }
    /* Dots (Group 376): 4 x 11px, 4px apart, 33px under the cards; active #42AD60, rest #D9D9D9 */
    .tdx-page-body .tdx-box__list .tdx-slider__dots { display: flex; justify-content: center; gap: 4px; margin: 33px 0 0; padding: 0; }
    .tdx-page-body .tdx-box__list .tdx-slider__dot { -webkit-appearance: none; appearance: none; position: relative; width: 11px; height: 11px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #D9D9D9; box-shadow: none; cursor: pointer; }
    .tdx-page-body .tdx-box__list .tdx-slider__dot::before { content: ""; position: absolute; inset: -7px; /* 25px touch target */ }
    .tdx-page-body .tdx-box__list .tdx-slider__dot:focus { border: 0; background: #D9D9D9; }
    .tdx-page-body .tdx-box__list .tdx-slider__dot.is-active, .tdx-page-body .tdx-box__list .tdx-slider__dot:hover { background: var(--tdx-green); }
    .tdx-page-body .tdx-box__list .tdx-slider__dot:focus-visible { outline: 2px solid var(--tdx-orange); outline-offset: 3px; }

    /* Validation card title (18px, was unset -> inherited 20px) */
    .tdx-page-body .tdx-vcard__title { font-size: 18px; letter-spacing: 1.08px; }

    /* Exam grid: values/labels stay desktop-size (25px/20px); only the paragraph shrinks */
    .tdx-page-body .tdx-exam__value { font-size: 25px; line-height: 30px; }
    .tdx-page-body .tdx-exam__label { font-size: 20px; line-height: 30px; }
    .tdx-page-body .tdx-exam__text { font-size: 18px; line-height: 28px; margin-top: 45px; }

    /* CTA band (Figma mob 1238:8664): image drops into normal flow between the paragraph and the buttons —
       .tdx-cta__inner is unwrapped with display:contents so its children reorder via flex `order`
       alongside .tdx-cta__art, same technique as .tdx-hero__content above. Centered copy, bigger stacked fixed-width buttons. */
    /* Structure (column + order) comes from the 1100px block; here only the 440-frame values. Buttons (Group 323) end at y=5237, footer at 5355 -> 118px. */
    .tdx-page-body .tdx-cta__title { font-size: 28px; line-height: 38px; padding: 0 20px; }
    .tdx-page-body .tdx-cta__text { font-size: 18px; line-height: 28px; padding: 0 20px; }
    .tdx-page-body .tdx-cta__art { margin-top: 37px; aspect-ratio: 440 / 419; }
    /* Figma mob crop (1238:8944): the 1569x887 collage is rendered 1424px wide and offset -739px/-35px inside the 440x419 mask, with a .5px blur.
       Percentages (of the 440px-wide box) keep that exact crop at any viewport width. */
    .tdx-page-body .tdx-cta__art img { left: -167.95%; top: -8.35%; width: 323.64%; height: auto; object-fit: fill; }
    /* Figma mob overlays (Rectangles 59/60/58 = 1238:8947/8945/8946): black fades in from the top (96px band), the bottom (181px band) and the left edge. */
    .tdx-page-body .tdx-cta__art::after { background:
        linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 15.3%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 61.6%, #000 98.9%),
        linear-gradient(90deg, rgba(0, 0, 0, .51) 0%, rgba(0, 0, 0, 0) 91.1%); }
    .tdx-page-body .tdx-cta__actions { flex-direction: column; align-items: center; gap: 25px; margin-top: 63px; }
    .tdx-page-body .tdx-cta__actions .tdx-btn--primary { width: 271px; height: 64px; font-size: 19px; letter-spacing: 1.14px; }
    .tdx-page-body .tdx-cta__actions .tdx-btn--ghost { width: 271px; height: 65px; font-size: 14px; letter-spacing: .83px; }
}

/* Neutralize Elementor kit / theme defaults inside the pages */
.tdx-page-body .tdx-page h1, .tdx-page-body .tdx-page h2, .tdx-page-body .tdx-page h3 { padding: 0; }
.tdx-page-body .tdx-page a, .tdx-page-body .tdx-page a:hover, .tdx-page-body .tdx-page a:focus { text-decoration: none; }
.tdx-page-body .tdx-row__title a { color: inherit; }
.tdx-page-body .tdx-acc__head, .tdx-page-body .tdx-acc__head:hover, .tdx-page-body .tdx-acc__head:focus { background: none; color: inherit; padding: 0; border: 0; border-radius: 0; box-shadow: none; font: inherit; text-decoration: none; text-transform: none; letter-spacing: 0; line-height: inherit; }
.tdx-page-body .tdx-acc.is-open .tdx-acc__head { padding-top: 19px; }
.tdx-page-body .tdx-acc__head:focus-visible { outline: 2px solid var(--tdx-green); outline-offset: 2px; }

/* Keep grid children shrinkable (accordion button min-content overflowed at 390px) */
.tdx-page-body .tdx-box__inner > *, .tdx-page-body .tdx-accordion, .tdx-page-body .tdx-acc, .tdx-page-body .tdx-row__body { min-width: 0; }
.tdx-page-body .tdx-acc__head, .tdx-page-body .tdx-acc__title { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .tdx-page-body .tdx-box__inner { grid-template-columns: minmax(0, 1fr); } }