/* ============================================================================================
   TradeShowLink public premium system (tdx-*) — event pages, claimed exhibitor pages, pricing.
   Same visual language as the ClientUI event picker: glass cards on a gradient hero, calendar
   tiles, pulsing live status, soft white panels. Exhibitor theme + accent arrive as CSS
   variables (--tdx-accent, .tdx-theme-*), so every ClientUI choice restyles the whole page.
   ============================================================================================ */
/* The site theme shrinks the ROOT font at mobile breakpoints (14px <=991, 12px <=767, see
   responsive.min.css), which scales every tdx rem value (type AND spacing) 12-25% smaller
   than designed on phone/tablet — the owner-visible "small fonts on mobile". This file loads
   ONLY on tdx pages (via _DirectoryHead), so normalizing the base here affects the tdx
   design system and nothing else; old-theme pages keep their own scale. */
@media (max-width: 991.98px) {
    html { font-size: 16px; }
}


.tdx {
    --tdx-accent: var(--base-color, #3c2fc0);
    --tdx-accent-2: #7c3aed;
    --tdx-ink: #0f172a;
    --tdx-text: #334155;
    --tdx-muted: #64748b;
    --tdx-faint: #94a3b8;
    --tdx-line: #e7eaf3;
    --tdx-soft: #f5f7fc;
    --tdx-page: #f7f8fc;
    --tdx-radius: 18px;
    --tdx-radius-sm: 12px;
    --tdx-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06);
    --tdx-shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);
    --tdx-hero: linear-gradient(135deg, #140f3d 0%, #2b1f9c 42%, #3c2fc0 62%, #7c3aed 100%);
    --tdx-sticky-top: 0px;
    background: var(--tdx-page);
    color: var(--tdx-text);
    font-family: var(--primary-font, 'Plus Jakarta Sans', sans-serif);
    display: block;
}
.tdx *, .tdx *::before, .tdx *::after { box-sizing: border-box; }
/* The site theme pads every <section> by 90–130px; tdx sections size themselves. */
.tdx section { padding: 0; }
.tdx a { text-decoration: none; }
.tdx h1, .tdx h2, .tdx h3, .tdx h4, .tdx h5 { font-family: var(--alt-font, 'Plus Jakarta Sans', sans-serif); color: var(--tdx-ink); letter-spacing: -.02em; }

/* Exhibitor themes chosen in ClientUI (Summit / Fresh / Luxe / Light). */
.tdx-theme-summit { --tdx-hero: linear-gradient(135deg, #0b1227 0%, #172554 40%, #1d4ed8 75%, var(--tdx-accent) 100%); --tdx-accent-2: #1d4ed8; }
.tdx-theme-fresh  { --tdx-hero: linear-gradient(135deg, #03261d 0%, #064e3b 40%, #0f766e 72%, #14b8a6 100%); --tdx-accent-2: #0f766e; }
.tdx-theme-luxe   { --tdx-hero: linear-gradient(135deg, #0c0a09 0%, #1c1917 38%, #78350f 74%, #b45309 100%); --tdx-accent-2: #92400e; }
.tdx-theme-light  { --tdx-hero: linear-gradient(135deg, #0b1b2e 0%, #0c4a6e 42%, #0369a1 72%, #0ea5e9 100%); --tdx-accent-2: #0369a1; }

/* ── Buttons ─────────────────────────────────────────────────────────────────────────────── */
.tdx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .65rem 1.25rem;
    border-radius: 999px; border: 1px solid transparent;
    font-size: .92rem; font-weight: 700; line-height: 1.1; white-space: nowrap;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none !important;
}
.tdx-btn i { font-size: 1em; }
.tdx-btn:hover { transform: translateY(-1px); }
.tdx-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .75); outline-offset: 2px; }
.tdx-btn--primary { background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff !important; box-shadow: 0 10px 22px -8px var(--tdx-accent); }
.tdx-btn--primary:hover { box-shadow: 0 16px 30px -10px var(--tdx-accent); }
.tdx-btn--light { background: #fff; color: var(--tdx-ink) !important; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.tdx-btn--light:hover { color: var(--tdx-accent) !important; }
.tdx-btn--ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff !important; backdrop-filter: blur(8px); }
.tdx-btn--ghost:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .6); }
.tdx-btn--outline { background: #fff; border-color: var(--tdx-line); color: var(--tdx-ink) !important; }
.tdx-btn--outline:hover { border-color: var(--tdx-accent); color: var(--tdx-accent) !important; }
.tdx-btn--block { width: 100%; }
.tdx-btn--sm { min-height: 36px; padding: .45rem .9rem; font-size: .82rem; }
.tdx-btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* ── Hero ────────────────────────────────────────────────────────────────────────────────── */
.tdx-hero { position: relative; overflow: hidden; background: var(--tdx-hero); color: #fff; isolation: isolate; }
.tdx-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(700px 380px at -5% 110%, rgba(255, 255, 255, .10), transparent 60%);
}
.tdx-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.tdx-hero-media { position: absolute; inset: 0; z-index: -2; }
.tdx-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tdx-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 10, 30, .92) 0%, rgba(8, 10, 30, .72) 45%, rgba(8, 10, 30, .35) 100%); }
/* Top/bottom only: the side gutter stays the container's, so hero text lines up with every other section. */
.tdx-hero-inner { position: relative; padding-top: 2.1rem; padding-bottom: 2.4rem; }
.tdx-hero--tall .tdx-hero-inner { padding-bottom: 3.1rem; }

.tdx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; margin-bottom: 1.35rem; }
.tdx-crumbs a { color: rgba(255, 255, 255, .78); }
.tdx-crumbs a:hover { color: #fff; }
.tdx-crumbs span { color: rgba(255, 255, 255, .95); }
.tdx-crumbs i { font-size: .72rem; color: rgba(255, 255, 255, .5); }

.tdx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem 2.5rem; align-items: end; }
.tdx-identity { display: flex; gap: 1.35rem; align-items: center; min-width: 0; }
.tdx-identity-text { min-width: 0; }
.tdx-hero h1 {
    color: #fff; margin: .45rem 0 .35rem;
    font-size: clamp(1.75rem, 1.1rem + 2.3vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
.tdx-hero-lead { color: rgba(255, 255, 255, .82); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 720px; }
.tdx-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }

.tdx-logo {
    flex: 0 0 auto; width: 104px; height: 104px; border-radius: 24px;
    background: #fff; padding: 12px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .12);
}
.tdx-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tdx-initial {
    flex: 0 0 auto; width: 104px; height: 104px; border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55);
}

/* Glass chips (hero) and soft tags (panels) */
.tdx-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tdx-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff;
    backdrop-filter: blur(6px);
}
.tdx-chip i { font-size: .85em; }
.tdx-chip--gold { background: linear-gradient(135deg, #f59e0b, #f97316); border-color: transparent; }
.tdx-chip--verified { background: rgba(16, 185, 129, .22); border-color: rgba(110, 231, 183, .55); }
.tdx-chip--free { background: #d1fae5; border-color: transparent; color: #065f46; }
.tdx-chip--solid { background: #fff; border-color: transparent; color: var(--tdx-ink); }

.tdx-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .75rem; border-radius: 999px; background: var(--tdx-soft); border: 1px solid var(--tdx-line); color: var(--tdx-text); font-size: .8rem; font-weight: 600; }
.tdx-tag--accent { background: color-mix(in srgb, var(--tdx-accent) 9%, #fff); border-color: color-mix(in srgb, var(--tdx-accent) 22%, #fff); color: var(--tdx-accent); }
.tdx-tags { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Status pill — live pulses like the picker */
.tdx-status { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; background: rgba(255, 255, 255, .95); color: var(--tdx-ink); }
.tdx-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tdx-status.is-live { color: #047857; }
.tdx-status.is-live::before { background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .7); animation: tdx-pulse 1.6s infinite; }
.tdx-status.is-upcoming { color: #1d4ed8; }
.tdx-status.is-ended { color: #475569; }
.tdx-status.is-undated { color: #b45309; }
@keyframes tdx-pulse { 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* Calendar tile */
.tdx-evtile {
    --evtile: #2563eb;
    flex: 0 0 auto; width: 54px; height: 60px; border-radius: 12px;
    background: #fff; color: var(--tdx-ink); overflow: hidden; position: relative;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}
.tdx-evtile small { position: absolute; inset: 0 0 auto 0; background: var(--evtile); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-align: center; line-height: 19px; }
.tdx-evtile strong { font-size: 1.35rem; font-weight: 800; line-height: 1; margin-top: 17px; }
.tdx-evtile i { font-size: 1.4rem; color: var(--evtile); }
.tdx-evtile.is-live { --evtile: #059669; }
.tdx-evtile.is-upcoming { --evtile: #2563eb; }
.tdx-evtile.is-ended { --evtile: #64748b; }
.tdx-evtile.is-undated { --evtile: #d97706; }
.tdx-evtile--sm { width: 44px; height: 48px; border-radius: 10px; }
.tdx-evtile--sm small { font-size: .56rem; line-height: 16px; }
.tdx-evtile--sm strong { font-size: 1.05rem; margin-top: 14px; }

/* Hero fact cards (event / dates / venue / stand) */
.tdx-facts-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.tdx-fact {
    display: flex; align-items: center; gap: .75rem; min-width: 0;
    padding: .6rem .95rem .6rem .6rem; border-radius: 14px;
    background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px); color: #fff; max-width: 100%;
}
a.tdx-fact:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: #fff; }
.tdx-fact-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); font-size: 1.1rem; }
.tdx-fact-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tdx-fact-text small { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.tdx-fact-text strong { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdx-fact-text span { font-size: .8rem; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdx-fact--stand .tdx-fact-text strong { font-size: 1.2rem; letter-spacing: -.01em; }

/* Hero stat tiles */
.tdx-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-top: 1.6rem; }
.tdx-hero-stat { padding: .9rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); }
.tdx-hero-stat strong { display: block; color: #fff; font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tdx-hero-stat span { display: flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .78); font-size: .78rem; font-weight: 600; }

/* ── Section nav (sticky pills with scrollspy) ───────────────────────────────────────────── */
.tdx-nav { position: sticky; top: var(--tdx-sticky-top); z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--tdx-line); box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .3); transition: top .2s ease; }
.tdx-nav-inner { display: flex; align-items: center; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding: .6rem 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); }
.tdx-nav-inner::-webkit-scrollbar { display: none; }
.tdx-nav a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--tdx-muted);
    transition: background-color .15s ease, color .15s ease;
}
.tdx-nav a:first-child { margin-left: 8px; }
.tdx-nav a:hover { color: var(--tdx-ink); background: var(--tdx-soft); }
.tdx-nav a.is-active { color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); box-shadow: 0 8px 18px -10px var(--tdx-accent); }
.tdx-nav-count { font-size: .7rem; font-weight: 800; padding: .08rem .45rem; border-radius: 999px; background: rgba(15, 23, 42, .07); }
.tdx-nav a.is-active .tdx-nav-count { background: rgba(255, 255, 255, .25); }

/* ── Body layout ─────────────────────────────────────────────────────────────────────────── */
.tdx-body { padding-top: 1.75rem; padding-bottom: 3.5rem; } /* keeps the container's side gutter */
.tdx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
.tdx-main, .tdx-rail { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.tdx-anchor { scroll-margin-top: calc(var(--tdx-sticky-top) + 84px); }
.tdx-block { margin-top: 2.5rem; }

/* Panels */
.tdx-panel { background: #fff; border: 1px solid var(--tdx-line); border-radius: var(--tdx-radius); box-shadow: var(--tdx-shadow); overflow: hidden; }
.tdx-panel-head { display: flex; align-items: center; gap: .85rem; padding: 1.2rem 1.4rem 0; }
.tdx-panel-head--split { justify-content: space-between; flex-wrap: wrap; }
.tdx-panel-head h2, .tdx-panel-head h3 { font-size: 1.2rem; font-weight: 800; margin: 0; line-height: 1.25; }
.tdx-panel-head p { margin: .1rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--tdx-muted); }
.tdx-panel-body { padding: 1.1rem 1.4rem 1.4rem; }
.tdx-panel-body > :last-child { margin-bottom: 0; }
.tdx-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: color-mix(in srgb, var(--tdx-accent) 11%, #fff); color: var(--tdx-accent);
}
.tdx-icon--solid { background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff; box-shadow: 0 10px 22px -12px var(--tdx-accent); }
.tdx-icon--sm { width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; }
.tdx-subhead { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tdx-faint); margin: 1.4rem 0 .6rem; }
.tdx-subhead:first-child { margin-top: 0; }

.tdx-prose { font-size: 1rem; line-height: 1.75; color: var(--tdx-text); overflow-wrap: anywhere; }
.tdx-prose p { margin: 0 0 1rem; }
.tdx-prose ul, .tdx-prose ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.tdx-prose li { margin-bottom: .35rem; }
.tdx-prose h2, .tdx-prose h3, .tdx-prose h4 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.tdx-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.tdx-prose a { color: var(--tdx-accent); font-weight: 600; }
.tdx-prose--pre { white-space: pre-line; }

/* Inline pill tabs inside a panel (overview) */
.tdx-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem 1.4rem 0; margin: 0; list-style: none; border: 0; }
.tdx-tabs .nav-link {
    border: 1px solid var(--tdx-line) !important; border-radius: 999px !important; background: #fff; color: var(--tdx-muted);
    padding: .45rem .95rem; font-size: .84rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem;
}
.tdx-tabs .nav-link:hover { color: var(--tdx-ink); border-color: #cfd6e6 !important; }
.tdx-tabs .nav-link.active { color: #fff !important; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)) !important; border-color: transparent !important; }

/* ── Action tiles (book / card / callback / enquiry) ─────────────────────────────────────── */
.tdx-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; }
.tdx-actions:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdx-action {
    position: relative; display: flex; align-items: center; gap: .85rem; width: 100%;
    padding: 1rem 1.05rem; border-radius: 16px; background: #fff; border: 1px solid var(--tdx-line);
    box-shadow: var(--tdx-shadow); text-align: left; cursor: pointer; font-family: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tdx-action:hover, .tdx-action:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tdx-accent) 45%, #fff); box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .35); outline: none; }
.tdx-action-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tdx-action-text strong { color: var(--tdx-ink); font-size: .95rem; font-weight: 800; }
.tdx-action-text span { color: var(--tdx-muted); font-size: .8rem; }
.tdx-action-go { margin-left: auto; color: var(--tdx-faint); transition: transform .15s ease, color .15s ease; }
.tdx-action:hover .tdx-action-go { color: var(--tdx-accent); transform: translateX(3px); }
.tdx-action--primary { background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); border-color: transparent; }
.tdx-action--primary .tdx-action-text strong, .tdx-action--primary .tdx-action-text span, .tdx-action--primary .tdx-action-go { color: #fff; }
.tdx-action--primary .tdx-icon { background: rgba(255, 255, 255, .2); color: #fff; }

/* ── Key facts list (rail) ───────────────────────────────────────────────────────────────── */
.tdx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.tdx-facts li { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.tdx-facts-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.tdx-facts-text small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tdx-faint); }
.tdx-facts-text strong, .tdx-facts-text a { font-size: .93rem; font-weight: 700; color: var(--tdx-ink); overflow-wrap: anywhere; }
.tdx-facts-text a:hover { color: var(--tdx-accent); }
.tdx-facts-text span { font-size: .84rem; color: var(--tdx-muted); }
.tdx-stand { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tdx-accent) 10%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--tdx-accent) 20%, #fff); margin-bottom: 1.1rem; }
.tdx-stand small { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tdx-muted); }
.tdx-stand strong { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.05; color: var(--tdx-ink); letter-spacing: -.02em; }
.tdx-stand > div > span { font-size: .84rem; color: var(--tdx-muted); }

.tdx-divider { height: 1px; background: var(--tdx-line); margin: 1.1rem 0; border: 0; }
.tdx-social { display: flex; flex-wrap: wrap; gap: .45rem; }
.tdx-social a { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tdx-soft); border: 1px solid var(--tdx-line); color: var(--tdx-text); font-size: 1rem; transition: all .15s ease; }
.tdx-social a:hover { background: var(--tdx-accent); border-color: var(--tdx-accent); color: #fff; transform: translateY(-1px); }

.tdx-countdown { text-align: center; padding: 1.4rem; background: var(--tdx-hero); color: #fff; }
.tdx-countdown strong { display: block; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.tdx-countdown span { display: block; margin: .35rem 0 1rem; font-weight: 700; opacity: .88; }
.tdx-alert { display: flex; gap: .75rem; align-items: center; padding: .9rem 1.1rem; border-radius: 14px; font-size: .88rem; font-weight: 600; }
.tdx-alert--warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.tdx-alert--gold { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.tdx-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px dashed var(--tdx-line); }
.tdx-price-row:last-of-type { border-bottom: 0; }
.tdx-price-row span { color: var(--tdx-muted); font-size: .86rem; font-weight: 600; }
.tdx-price-row strong { color: var(--tdx-ink); font-size: 1.05rem; font-weight: 800; }

/* ── Card grids ──────────────────────────────────────────────────────────────────────────── */
.tdx-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tdx-grid--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tdx-grid--tight { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.tdx-card { position: relative; background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.1rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-width: 0; }
.tdx-card--hover:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(15, 23, 42, .4); border-color: color-mix(in srgb, var(--tdx-accent) 35%, #fff); }
.tdx-card h3, .tdx-card h4 { font-size: 1rem; font-weight: 800; margin: 0 0 .25rem; }
.tdx-card p { font-size: .86rem; color: var(--tdx-muted); line-height: 1.55; margin: 0; }
.tdx-card-link { position: static; color: inherit; }
.tdx-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.tdx-card-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: var(--tdx-accent); margin-top: .75rem; }

/* People (team + speakers) */
.tdx-person { text-align: center; padding: 1.4rem 1.1rem 1.2rem; }
.tdx-person-photo, .tdx-person-initial { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto .9rem; display: block; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--tdx-accent) 25%, #fff); }
.tdx-person-initial { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); }
.tdx-person-role { display: block; font-size: .78rem; font-weight: 700; color: var(--tdx-accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; }
.tdx-person-org { display: block; font-size: .84rem; color: var(--tdx-muted); margin-bottom: .45rem; }
.tdx-person-session { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--tdx-line); font-size: .8rem; color: var(--tdx-text); display: flex; gap: .4rem; text-align: left; }
.tdx-person-links { display: flex; justify-content: center; gap: .4rem; margin-top: .8rem; position: relative; z-index: 2; }
.tdx-person-links a { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tdx-soft); color: var(--tdx-text); }
.tdx-person-links a:hover { background: var(--tdx-accent); color: #fff; }

/* Products */
.tdx-product { display: flex; flex-direction: column; gap: .4rem; height: 100%; }
.tdx-product .tdx-icon { margin-bottom: .35rem; }

/* Documents */
.tdx-doc { display: flex; align-items: center; gap: .85rem; }
.tdx-doc-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tdx-doc-text strong { font-size: .92rem; font-weight: 700; color: var(--tdx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdx-doc-text span { font-size: .78rem; color: var(--tdx-muted); }
.tdx-doc-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--tdx-accent) 11%, #fff); color: var(--tdx-accent); display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; position: relative; z-index: 2; }
.tdx-doc-btn:hover { background: var(--tdx-accent); color: #fff; }

/* Gallery */
.tdx-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tdx-gallery figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tdx-soft); }
.tdx-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tdx-gallery figure:hover img { transform: scale(1.05); }
.tdx-gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 1.2rem .8rem .6rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font-size: .78rem; font-weight: 600; }

/* FAQ (bootstrap accordion, restyled) */
.tdx-faq .accordion-item { border: 1px solid var(--tdx-line) !important; border-radius: 14px !important; overflow: hidden; margin-bottom: .6rem; background: #fff; }
.tdx-faq .accordion-button { font-weight: 700; font-size: .95rem; color: var(--tdx-ink); background: #fff; box-shadow: none !important; padding: 1rem 1.15rem; }
.tdx-faq .accordion-button:not(.collapsed) { color: var(--tdx-accent); background: color-mix(in srgb, var(--tdx-accent) 5%, #fff); }
.tdx-faq .accordion-body { padding: 0 1.15rem 1.1rem; color: var(--tdx-text); font-size: .92rem; line-height: 1.65; }

/* Exhibitor cards */
.tdx-exh { display: flex; flex-direction: column; gap: .65rem; height: 100%; }
.tdx-exh-top { display: flex; gap: .8rem; align-items: center; min-width: 0; }
.tdx-exh-logo, .tdx-exh-initial { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; }
.tdx-exh-logo { object-fit: contain; padding: 6px; background: #fff; border: 1px solid var(--tdx-line); }
.tdx-exh-initial { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); }
.tdx-exh-initial.g1 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.tdx-exh-initial.g2 { background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.tdx-exh-initial.g3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.tdx-exh-initial.g4 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.tdx-exh-initial.g5 { background: linear-gradient(135deg, #10b981, #3b82f6); }
.tdx-exh-name { min-width: 0; }
.tdx-exh-name h3 { font-size: .98rem; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tdx-exh-badge ~ .tdx-exh-top { padding-right: 4.6rem; }
.tdx-exh-name span { display: block; font-size: .78rem; color: var(--tdx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdx-exh p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tdx-exh-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .78rem; color: var(--tdx-muted); margin-top: auto; }
.tdx-exh-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.tdx-exh-badge { position: absolute; top: .85rem; right: .85rem; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.tdx-exh-badge.is-featured { background: #fef3c7; color: #92400e; }
.tdx-exh-badge.is-verified { background: #d1fae5; color: #047857; }
.tdx-exh--featured { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb 0%, #fff 55%); }
.tdx-exh--verified { border-color: color-mix(in srgb, var(--tdx-accent) 22%, #fff); }
.tdx-exh-banner { margin: -1.1rem -1.1rem .2rem; height: 86px; overflow: hidden; border-radius: 16px 16px 0 0; }
.tdx-exh-banner img { width: 100%; height: 100%; object-fit: cover; }
.tdx-exh-links { display: flex; gap: .35rem; position: relative; z-index: 2; }
.tdx-exh-links a { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--tdx-soft); color: var(--tdx-muted); font-size: .85rem; }
.tdx-exh-links a:hover { background: var(--tdx-accent); color: #fff; }
.tdx-group-title { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tdx-muted); margin: 1.5rem 0 .8rem; }
.tdx-group-title:first-child { margin-top: 0; }
.tdx-group[hidden], .tdx-item[hidden] { display: none !important; }

/* Toolbar (search + filters) */
.tdx-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .85rem; border-radius: 16px; background: #fff; border: 1px solid var(--tdx-line); box-shadow: var(--tdx-shadow); margin-bottom: 1.25rem; }
.tdx-search { position: relative; flex: 1 1 260px; min-width: 0; }
.tdx-search i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--tdx-faint); pointer-events: none; }
.tdx-search input, .tdx-select {
    width: 100%; min-height: 44px; border: 1px solid var(--tdx-line); border-radius: 12px; background: var(--tdx-soft);
    font-size: .9rem; color: var(--tdx-ink); padding: .55rem .9rem; font-family: inherit;
}
.tdx-search input { padding-left: 2.5rem; }
.tdx-select { flex: 0 1 190px; width: auto; min-width: 150px; cursor: pointer; }
.tdx-search input:focus, .tdx-select:focus { outline: none; border-color: var(--tdx-accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdx-accent) 18%, transparent); }
.tdx-toolbar-meta { display: flex; align-items: center; gap: .75rem; font-size: .84rem; color: var(--tdx-muted); font-weight: 600; margin-left: auto; }
.tdx-link-btn { background: none; border: 0; padding: 0; color: var(--tdx-accent); font-weight: 700; font-size: .84rem; cursor: pointer; }
.tdx-link-btn[hidden] { display: none; }

/* Empty state */
.tdx-empty { text-align: center; padding: 2.4rem 1.2rem; color: var(--tdx-muted); }
.tdx-empty .tdx-icon { width: 56px; height: 56px; font-size: 1.4rem; border-radius: 16px; margin-bottom: .8rem; }
.tdx-empty span { font-size: .9rem; line-height: 1.55; }
.tdx-empty strong { display: block; color: var(--tdx-ink); font-size: 1.02rem; margin-bottom: .25rem; }
.tdx-empty[hidden] { display: none; }

/* Related events */
.tdx-related { display: flex; gap: .9rem; align-items: flex-start; }
.tdx-related .tdx-evtile { box-shadow: 0 6px 14px rgba(15, 23, 42, .1); border: 1px solid var(--tdx-line); }
.tdx-related-text { min-width: 0; }
.tdx-related-text h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tdx-related-text span { display: block; font-size: .8rem; color: var(--tdx-muted); }

/* Sponsors */
.tdx-sponsor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; text-align: center; min-height: 150px; }
.tdx-sponsor img { max-width: 150px; max-height: 64px; object-fit: contain; }
.tdx-sponsor strong { font-size: .92rem; color: var(--tdx-ink); }

/* Reviews */
.tdx-rating { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tdx-rating-score { font-size: 2.6rem; font-weight: 800; color: var(--tdx-ink); line-height: 1; letter-spacing: -.03em; }
.tdx-stars { color: #f59e0b; display: inline-flex; gap: .15rem; }
.tdx-stars .far { color: #e2e8f0; }
.tdx-review { padding: 1.1rem 0; border-top: 1px solid var(--tdx-line); }
.tdx-review:first-child { border-top: 0; padding-top: 0; }
.tdx-review-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .45rem; }
.tdx-review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); flex: 0 0 auto; }
.tdx-review-head strong { display: block; color: var(--tdx-ink); font-size: .92rem; }
.tdx-review-head span { font-size: .78rem; color: var(--tdx-muted); }
.tdx-review h4 { font-size: .95rem; margin: .2rem 0 .3rem; }
.tdx-review p { margin: 0; color: var(--tdx-text); font-size: .9rem; line-height: 1.6; }

/* Forms (reviews, brochure, modals) */
.tdx-form label { display: block; font-size: .8rem; font-weight: 700; color: var(--tdx-ink); margin-bottom: .35rem; }
.tdx-form .form-control, .tdx-form .form-select, .tdx-modal .form-control, .tdx-modal .form-select {
    min-height: 46px; border-radius: 12px; border: 1px solid var(--tdx-line); background: var(--tdx-soft);
    font-size: .92rem; padding: .6rem .9rem; color: var(--tdx-ink);
}
.tdx-form textarea.form-control, .tdx-modal textarea.form-control { min-height: 110px; }
.tdx-form .form-control:focus, .tdx-modal .form-control:focus, .tdx-modal .form-select:focus { border-color: var(--tdx-accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdx-accent) 18%, transparent); }
.tdx-star-input { display: inline-flex; gap: .3rem; }
.tdx-star-input i { font-size: 1.7rem; cursor: pointer; transition: transform .1s ease; }
.tdx-star-input i:hover { transform: scale(1.12); }
.tdx-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Modals */
.tdx-modal .modal-content { border: 0; border-radius: 22px; box-shadow: var(--tdx-shadow-lg); overflow: hidden; }
.tdx-modal .modal-header { border: 0; padding: 1.3rem 1.4rem .4rem; align-items: flex-start; }
.tdx-modal .modal-title { font-size: 1.15rem; font-weight: 800; color: var(--tdx-ink); margin: 0; }
.tdx-modal .modal-header p { margin: .15rem 0 0; font-size: .84rem; color: var(--tdx-muted); }
.tdx-modal .modal-body { padding: .9rem 1.4rem 1.4rem; }
.tdx-modal-head { display: flex; gap: .85rem; align-items: center; }
.tdx-success { text-align: center; padding: 1.6rem .5rem; }
.tdx-success i { font-size: 2.6rem; color: #10b981; display: block; margin-bottom: .6rem; }
.tdx-success strong { display: block; font-size: 1.05rem; color: var(--tdx-ink); }
.tdx-success span { font-size: .88rem; color: var(--tdx-muted); }

/* Invitation welcome card (sits over the hero edge) */
.tdx-invite { position: relative; z-index: 3; margin-top: -1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--tdx-line); box-shadow: var(--tdx-shadow-lg); }
.tdx-invite-text { flex: 1 1 320px; min-width: 0; }
.tdx-invite-text strong { display: block; color: var(--tdx-ink); font-size: 1.05rem; }
.tdx-invite-text span { color: var(--tdx-muted); font-size: .9rem; }
.tdx-invite-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tdx-pill-ok { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; font-weight: 800; font-size: .85rem; background: #d1fae5; color: #047857; }
.tdx-pill-muted { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; font-weight: 800; font-size: .85rem; background: #f1f5f9; color: #475569; }

/* Claim (unclaimed profile) */
.tdx-claim { position: relative; padding: 2rem 1.6rem; text-align: center; background: radial-gradient(600px 240px at 50% -20%, color-mix(in srgb, var(--tdx-accent) 16%, transparent), transparent 70%), #fff; }
.tdx-claim h2 { font-size: 1.55rem; font-weight: 800; margin: .8rem 0 .4rem; }
.tdx-claim > p { max-width: 520px; margin: 0 auto 1.3rem; color: var(--tdx-muted); }
.tdx-claim-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-top: 1.6rem; text-align: left; }
.tdx-claim-point { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem; border-radius: 14px; background: var(--tdx-soft); border: 1px solid var(--tdx-line); }
.tdx-claim-point strong { display: block; font-size: .88rem; color: var(--tdx-ink); }
.tdx-claim-point span { display: block; font-size: .8rem; line-height: 1.45; color: var(--tdx-muted); }
.tdx-lock { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--tdx-muted); margin-top: .8rem; }

/* Map + media */
.tdx-map { height: 240px; border-radius: 14px; overflow: hidden; z-index: 1; border: 1px solid var(--tdx-line); }
.tdx-media { width: 100%; border-radius: 14px; display: block; object-fit: cover; }
.tdx-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0f172a; }
.tdx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tdx-section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem; margin-bottom: 1.1rem; }
.tdx-section-head h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); font-weight: 800; margin: 0; }
.tdx-section-head p { margin: .2rem 0 0; color: var(--tdx-muted); font-size: .92rem; }
.tdx-kicker { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--tdx-accent); margin-bottom: .35rem; }

.tdx-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tdx-copied { color: #047857 !important; }

/* Main-column blocks + review form */
.tdx-main > .tdx-block { margin-top: .5rem; }
.tdx-main > .tdx-block .tdx-section-head h2 { font-size: 1.35rem; }
.tdx-optional { color: var(--tdx-faint); font-weight: 600; font-size: .8rem; }
.tdx-review-form { margin-top: .4rem; padding: 1.2rem; border-radius: 16px; background: var(--tdx-soft); border: 1px solid var(--tdx-line); }
.tdx-review-form .form-control { background: #fff; }
.tdx-review + .collapse .tdx-review-form, .tdx-review + .collapsing .tdx-review-form { margin-top: 1rem; }
.tdx-empty--inline { padding: .6rem 0 .2rem; text-align: left; }
.tdx-empty--inline span { font-size: .9rem; line-height: 1.5; }
.tdx-empty--inline strong { display: inline; font-size: .95rem; margin-right: .35rem; }
.collapse.show + .tdx-empty--inline { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .tdx-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 991.98px) {
    .tdx-hero-grid { grid-template-columns: 1fr; }
    .tdx-hero-actions { justify-content: flex-start; }
    .tdx-layout { grid-template-columns: 1fr; }
    .tdx-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
}
@media (max-width: 767.98px) {
    .tdx .container { padding-left: 15px !important; padding-right: 15px !important; } /* = theme gutter */
    .tdx-hero-inner { padding-top: 1.5rem; padding-bottom: 1.9rem; }
    .tdx-logo, .tdx-initial { width: 76px; height: 76px; border-radius: 18px; padding: 8px; font-size: 1.9rem; }
    .tdx-identity { gap: 1rem; align-items: flex-start; }
    .tdx-facts-row { gap: .55rem; }
    .tdx-fact { flex: 1 1 100%; }
    .tdx-hero-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; }
    .tdx-hero-stat { padding: .7rem .75rem; }
    .tdx-hero-stat span { font-size: .7rem; }
    .tdx-hero-actions .tdx-btn { flex: 1 1 auto; }
    .tdx-panel-head { padding: 1.05rem 1.1rem 0; }
    .tdx-panel-body { padding: 1rem 1.1rem 1.2rem; }
    .tdx-tabs { padding: .9rem 1.1rem 0; }
    .tdx-body { padding-top: 1.2rem; }
    .tdx-select { flex: 1 1 calc(50% - .3rem); min-width: 0; }
    .tdx-toolbar-meta { margin-left: 0; width: 100%; justify-content: space-between; }
    .tdx-invite { margin-top: -1rem; }
}
@media (max-width: 575.98px) {
    .tdx-actions { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .tdx-action { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem; }
    .tdx-action-text span { display: none; }
    .tdx-action-go { display: none; }
    .tdx-rail { grid-template-columns: 1fr; }
    .tdx-grid, .tdx-grid--wide { grid-template-columns: 1fr; }
    .tdx-grid--tight, .tdx-gallery { grid-template-columns: 1fr 1fr; }
    .tdx-hero-stat strong { font-size: 1.3rem; }
    .tdx-crumbs { font-size: .74rem; margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .tdx-status.is-live::before { animation: none; }
    .tdx-btn, .tdx-card, .tdx-action, .tdx-gallery img { transition: none; }
}

/* Theme paragraphs run at 32px line-height; keep tdx copy compact. */
.tdx p { line-height: 1.6; }
.tdx .tdx-prose p { line-height: 1.75; }

/* ── Events directory ────────────────────────────────────────────────────────────────────── */
.tdx-dir-hero { text-align: center; padding-top: 3rem; padding-bottom: 3.2rem; }
.tdx-dir-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem); margin: .8rem 0 .5rem; }
.tdx-dir-hero .tdx-hero-lead { max-width: 620px; }
.tdx-dir-search { position: relative; max-width: 680px; margin: 1.6rem auto 0; display: flex; align-items: center; gap: .5rem; padding: .45rem .45rem .45rem 1.1rem; border-radius: 999px; background: #fff; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); }
.tdx-dir-search > i { color: var(--tdx-faint); font-size: 1.1rem; }
.tdx-dir-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: 1rem; color: var(--tdx-ink); padding: .55rem .2rem; font-family: inherit; }
.tdx-dir-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 30; text-align: left; background: #fff; border-radius: 18px; border: 1px solid var(--tdx-line); box-shadow: var(--tdx-shadow-lg); padding: .4rem; max-height: 360px; overflow-y: auto; }
.tdx-dir-suggestion { display: flex; gap: .75rem; align-items: center; padding: .65rem .75rem; border-radius: 12px; color: var(--tdx-ink); }
.tdx-dir-suggestion:hover { background: var(--tdx-soft); color: var(--tdx-ink); }
.tdx-dir-suggestion i { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tdx-accent) 11%, #fff); color: var(--tdx-accent); flex: 0 0 auto; }
.tdx-dir-suggestion strong { display: block; font-size: .92rem; }
.tdx-dir-suggestion small { display: block; font-size: .78rem; color: var(--tdx-muted); }
.tdx-dir-cta { background: var(--tdx-hero); border: 0; }

.tdx-evcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tdx-evcard-media { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b1f9c, #7c3aed); }
.tdx-evcard-media.g1 { background: linear-gradient(135deg, #0c4a6e, #0ea5e9); }
.tdx-evcard-media.g2 { background: linear-gradient(135deg, #064e3b, #14b8a6); }
.tdx-evcard-media.g3 { background: linear-gradient(135deg, #7c2d12, #f97316); }
.tdx-evcard-media.g4 { background: linear-gradient(135deg, #581c87, #ec4899); }
.tdx-evcard-media.g5 { background: linear-gradient(135deg, #1e3a8a, #6366f1); }
.tdx-evcard-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tdx-evcard-logo { max-width: 70%; max-height: 96px; object-fit: contain; padding: 12px 16px; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.tdx-evcard-name { color: #fff; font-weight: 800; font-size: 1.25rem; text-align: center; padding: 0 1.5rem; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tdx-evcard-badges { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .35rem; z-index: 2; }
.tdx-evcard-tile { position: absolute; left: 1rem; bottom: -24px; z-index: 2; }
.tdx-evcard-body { display: flex; flex-direction: column; gap: .35rem; padding: 2rem 1.1rem 1.1rem; flex: 1 1 auto; }
.tdx-evcard-status { position: absolute; right: .75rem; bottom: .75rem; z-index: 2; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
.tdx-evcard-body h3 { font-size: 1.02rem; line-height: 1.3; margin: .2rem 0 .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tdx-evcard-line { display: flex; align-items: flex-start; gap: .4rem; font-size: .84rem; line-height: 1.45; color: var(--tdx-muted); }
.tdx-evcard-line i { margin-top: .2rem; }
.tdx-evcard-mono { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }
.tdx-evcard-line i { color: var(--tdx-accent); }
.tdx-evcard-foot { margin-top: auto; padding-top: .75rem; display: flex; flex-direction: column; gap: .55rem; }
.tdx-evcard--large .tdx-evcard-media { height: 180px; }
.tdx-evcard--large .tdx-evcard-body h3 { font-size: 1.15rem; }

.tdx-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 2rem 0 .5rem; }
.tdx-pager a, .tdx-pager span { min-width: 42px; height: 42px; padding: 0 .75rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--tdx-text); background: #fff; border: 1px solid var(--tdx-line); }
.tdx-pager a:hover { border-color: var(--tdx-accent); color: var(--tdx-accent); }
.tdx-pager a.is-active { background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px var(--tdx-accent); }
.tdx-pager span { border: 0; background: transparent; }
@media (max-width: 575.98px) {
    .tdx-dir-search { padding-left: .9rem; }
    .tdx-dir-search .tdx-btn { padding: .6rem .95rem; }
}

/* ── Home page (Views/Home/Index.cshtml) ───────────────────────────────────────────────────── */
.home-v2 { display: block; background: #fff; }
.home-v2 .page-layout > section { padding-top: 88px !important; padding-bottom: 88px !important; }
.home-v2 .page-layout > section.home-bundles { padding-top: 88px !important; padding-bottom: 88px !important; }
.home-v2 section.home-sec { position: relative; background: #fff; }
.home-v2 section.home-sec--soft { background: var(--tdx-page); }
/* FAQ component follows the white video block: tint it so neighbours never merge. */
.home-v2 .page-layout > section#see-it + section { background: var(--tdx-page, #f7f8fc); }
.home-hero .tdx-hero-inner { padding-top: 3.5rem; padding-bottom: 2.5rem; }
.home-hero-media img { object-position: center 30%; }
.home-hero-media::after { background: linear-gradient(100deg, rgba(10, 8, 40, .94) 0%, rgba(30, 20, 110, .86) 45%, rgba(60, 47, 192, .62) 100%); }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 3rem; align-items: center; }
.home-hero h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem); margin-top: .9rem; }
.home-hero .tdx-hero-lead { max-width: 620px; font-size: 1.08rem; margin-top: 1.1rem; }
.home-hero-trust { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: rgba(255, 255, 255, .85); font-size: .88rem; font-weight: 600; }
.home-hero-trust i { color: #6ee7b7; margin-right: .35rem; }

.home-feed { position: relative; background: #fff; color: var(--tdx-ink); border-radius: 22px; padding: 1.1rem; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.home-feed-head { display: flex; align-items: center; gap: .8rem; padding: .3rem .3rem .9rem; border-bottom: 1px solid var(--tdx-line); }
.home-feed-head div { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.home-feed-head strong { font-size: .92rem; }
.home-feed-head .tdx-status { background: #ecfdf5; align-self: flex-start; }
.home-feed-count { margin-left: auto; font-size: 1.8rem; font-weight: 800; color: var(--tdx-accent); letter-spacing: -.03em; white-space: nowrap; }
.home-feed-example { position: absolute; top: -.65rem; right: 1rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .55rem; border-radius: 999px; background: #fff; color: var(--tdx-faint); border: 1px solid var(--tdx-line); }
.home-feed-list { list-style: none; margin: 0; padding: .4rem 0; }
.home-feed-list li { display: flex; align-items: center; gap: .75rem; padding: .65rem .3rem; border-bottom: 1px dashed var(--tdx-line); }
.home-feed-list li:last-child { border-bottom: 0; }
.home-feed-list li div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.home-feed-list li strong { font-size: .9rem; }
.home-feed-list li span:not(.home-feed-avatar) { font-size: .78rem; color: var(--tdx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-feed-list em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--tdx-faint); white-space: nowrap; }
.home-feed-list li:first-child em { color: #059669; }
.home-feed-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3c2fc0, #7c3aed); }
.home-feed-avatar.g1 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.home-feed-avatar.g2 { background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.home-feed-toast { display: flex; align-items: center; gap: .7rem; margin-top: .4rem; padding: .75rem .85rem; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; }
.home-feed-toast div { display: flex; flex-direction: column; min-width: 0; }
.home-feed-toast strong { font-size: .84rem; }
.home-feed-toast span { font-size: .76rem; color: var(--tdx-muted); }

.home-market { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 2.6rem; }
.home-market-stat { padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: .15rem; }
.home-market-stat strong { color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.home-market-stat span { color: rgba(255, 255, 255, .82); font-size: .82rem; line-height: 1.4; }
.home-market-stat a { color: rgba(255, 255, 255, .55); font-size: .7rem; margin-top: auto; padding-top: .2rem; } /* sources level across tiles */
.home-market-stat a:hover { color: #fff; }

.home-head { max-width: 720px; margin: 0 auto 2.2rem; text-align: center; }
.home-head h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; margin: .1rem 0 .6rem; line-height: 1.15; }
.home-head p { color: var(--tdx-muted); font-size: 1.02rem; line-height: 1.6; margin: 0; }
.home-head--split { max-width: none; text-align: left; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.home-head--split > div { max-width: 640px; }

.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; position: relative; }
.home-steps::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #c7c2f5 0 8px, transparent 8px 16px); z-index: 0; }
.home-step { position: relative; z-index: 1; text-align: center; padding: 0 .5rem; }
.home-step-num { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); box-shadow: 0 14px 30px -12px var(--tdx-accent), 0 0 0 8px #fff; margin-bottom: 1rem; }
.home-step h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .4rem; }
.home-step p { color: var(--tdx-muted); font-size: .9rem; line-height: 1.55; margin: 0; }
.home-inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.2rem; margin: 2.4rem auto 0; padding: .75rem 1.1rem; border-radius: 999px; background: var(--tdx-page); border: 1px solid var(--tdx-line); width: fit-content; max-width: 100%; font-size: .9rem; font-weight: 600; color: var(--tdx-text); }
.home-inline-cta i { color: var(--tdx-accent); }
.home-inline-cta a { color: var(--tdx-accent); font-weight: 800; }

.home-solution { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; }
.home-solution .tdx-icon { margin-bottom: .6rem; }
.home-solution-eyebrow { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--tdx-accent); }
.home-solution h3 { font-size: 1.12rem; margin: .15rem 0 .25rem !important; }
.home-solution p { margin: 0 !important; }
.home-solution .tdx-card-more { margin-top: .9rem; }
.home-solution h3 a { color: var(--tdx-ink); }
.home-solution p { font-size: .9rem; }

.home-video { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.home-video-copy h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); font-weight: 800; margin: .1rem 0 .6rem; line-height: 1.15; }
.home-video-copy p { color: var(--tdx-muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.home-video-frame { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: radial-gradient(600px 300px at 80% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(135deg, #140f3d 0%, #2b1f9c 45%, #3c2fc0 70%, #7c3aed 100%); box-shadow: 0 40px 80px -36px rgba(60, 47, 192, .7); }
.home-video-play { width: 86px; height: 86px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--tdx-accent); font-size: 1.8rem; box-shadow: 0 0 0 12px rgba(255, 255, 255, .15), 0 20px 40px -12px rgba(0, 0, 0, .5); transition: transform .2s ease; }
.home-video-frame:hover .home-video-play { transform: scale(1.06); }
.home-video-caption { position: absolute; left: 1.4rem; bottom: 1.2rem; color: rgba(255, 255, 255, .9); font-weight: 700; font-size: .95rem; }

@media (max-width: 1199.98px) {
    .home-market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .home-hero-grid, .home-video { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .home-feed { max-width: 520px; }
    /* A bare 1fr track has an automatic minimum of min-content: the .home-feed card's
       min-content (376px) forced the hero track past the viewport and .tdx-hero's
       overflow:hidden clipped the copy, both CTAs and the card off the right edge of
       every phone. min-width:0 on the grid items restores the designed shrink (the
       feed rows already carry white-space:nowrap + text-overflow:ellipsis). */
    .home-hero-grid > .home-hero-copy, .home-hero-grid > .home-feed { min-width: 0; }
    .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .home-steps::before { display: none; }
    .home-v2 .page-layout > section,
    .home-v2 .page-layout > section.home-bundles { padding-top: 64px !important; padding-bottom: 64px !important; }
}
@media (max-width: 575.98px) {
    .home-hero .tdx-hero-inner { padding-top: 2.2rem; padding-bottom: 1.8rem; }
    .home-market { grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.8rem; }
    .home-market-stat { padding: .8rem; }
    .home-market-stat strong { font-size: 1.3rem; }
    .home-steps { grid-template-columns: 1fr; }
    .home-step { text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; padding: 0; }
    .home-step-num { grid-row: span 2; margin: 0; }
    .home-v2 .page-layout > section,
    .home-v2 .page-layout > section.home-bundles { padding-top: 48px !important; padding-bottom: 48px !important; }
    .home-inline-cta { border-radius: 18px; }
}

/* ── Cost-wedge band (Views/Shared/Components/CostComparison) ─────────────────────────────── */
section.cost-band { background: radial-gradient(700px 360px at 90% 0%, rgba(124, 58, 237, .28), transparent 60%), #16163a !important; color: #fff; }
.cost-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.cost-band-kicker { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #c4b5fd; margin-bottom: .6rem; }
.cost-band-copy h2 { color: #fff; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 1rem; }
.cost-band-copy p { color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.65; margin: 0 0 1.6rem; max-width: 560px; }
.cost-band-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .7rem 1.35rem; border-radius: 999px; background: #fff; color: #16163a !important; font-weight: 800; font-size: .92rem; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); transition: transform .15s ease; }
.cost-band-btn:hover { transform: translateY(-1px); color: #3c2fc0 !important; }
.cost-band-card { background: #fff; border-radius: 22px; padding: 1.4rem 1.6rem; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); color: #0f172a; }
.cost-band-row { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid #edf0f6; }
.cost-band-row span { display: flex; flex-direction: column; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.cost-band-row small { font-weight: 500; font-size: .8rem; color: #64748b; margin-top: .15rem; }
.cost-band-row strong { font-size: 1.05rem; font-weight: 800; white-space: nowrap; text-align: right; }
.cost-band-row--head { padding-top: .2rem; font-size: .72rem; }
.cost-band-row--head span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
.cost-band-row--us { border-bottom: 0; margin-top: .5rem; padding: .9rem 1rem; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.cost-band-row--us span, .cost-band-row--us strong { color: #3c2fc0; font-weight: 800; }
.cost-band-note { font-size: .74rem; line-height: 1.5; color: #94a3b8; margin: .9rem 0 0; }
@media (max-width: 991.98px) { .cost-band-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 575.98px) { .cost-band-card { padding: 1rem 1.1rem; } .cost-band-row strong { font-size: .95rem; } }

/* ── FAQ band (Views/Shared/Components/Faq) ───────────────────────────────────────────────── */
section.faq-band { background: #f7f8fc; }
.faq-band-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; }
.faq-band-kicker { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #3c2fc0; margin-bottom: .4rem; }
.faq-band-intro h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; color: #0f172a; margin: 0 0 .8rem; }
.faq-band-intro p { color: #64748b; font-size: 1rem; line-height: 1.6; margin: 0 0 1.1rem; }
.faq-band-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: #3c2fc0; }
.faq-band-list .accordion-item { border: 1px solid #e7eaf3 !important; border-radius: 16px !important; overflow: hidden; margin-bottom: .7rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.faq-band-list .accordion-button { font-family: inherit; font-weight: 700; font-size: 1rem; color: #0f172a; background: #fff; box-shadow: none !important; padding: 1.1rem 1.25rem; gap: 1rem; }
.faq-band-list .accordion-button:not(.collapsed) { color: #3c2fc0; background: #fbfaff; }
.faq-band-list .accordion-button::after { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background-color: #f1f0fd; background-position: center; background-size: 12px; }
.faq-band-list .accordion-body { padding: 0 1.25rem 1.2rem; color: #475569; font-size: .95rem; line-height: 1.65; background: #fbfaff; }
@media (max-width: 991.98px) { .faq-band-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.home-solution > * { line-height: 1.35; }
.home-solution .tdx-icon { margin-bottom: .4rem; }
.home-solution-eyebrow { line-height: 1.2 !important; }
.home-step h3, .home-step p { line-height: 1.45; }
.home-feed-list li, .home-feed-head, .home-feed-toast { line-height: 1.35; }
.faq-band-list .accordion-button { line-height: 1.4; text-align: left; }

/* ── About page (abt-*): light editorial hero — deliberately different from the dark home hero ────── */
.abt-hero { position: relative; overflow: hidden; background: #fff; padding: 72px 0 80px; border-bottom: 1px solid var(--tdx-line); }
.abt-hero::before, .abt-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.abt-hero::before { width: 960px; height: 960px; right: -280px; top: -520px; background: radial-gradient(circle, rgba(124, 58, 237, .16) 0%, rgba(60, 47, 192, .06) 45%, transparent 70%); }
.abt-hero::after { width: 720px; height: 720px; left: -360px; bottom: -460px; background: radial-gradient(circle, rgba(14, 165, 233, .10) 0%, transparent 65%); }
.abt-hero .container { position: relative; z-index: 1; }
.abt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 4rem; align-items: center; }
.abt-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; border-radius: 999px; background: rgba(60, 47, 192, .08); color: var(--tdx-accent); font-size: .8rem; font-weight: 800; }
.abt-hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.1vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: var(--tdx-ink); margin: 1.1rem 0 1.2rem; }
.abt-grad { background: linear-gradient(135deg, var(--tdx-accent) 10%, var(--tdx-accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abt-lead { font-size: 1.12rem; line-height: 1.65; color: var(--tdx-text); max-width: 580px; margin: 0; }
.abt-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.abt-visual { position: relative; padding: 0 0 28px 28px; }
.abt-photo { border-radius: 28px; overflow: hidden; box-shadow: var(--tdx-shadow-lg); aspect-ratio: 5 / 4; background: var(--tdx-soft); }
.abt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.abt-float { position: absolute; display: flex; align-items: center; gap: .75rem; padding: .8rem 1.05rem; border-radius: 16px; background: #fff; border: 1px solid var(--tdx-line); box-shadow: var(--tdx-shadow-lg); }
.abt-float strong { display: block; font-size: .92rem; font-weight: 800; color: var(--tdx-ink); line-height: 1.2; }
.abt-float small { display: block; font-size: .76rem; color: var(--tdx-muted); line-height: 1.3; }
.abt-float--offices { left: 0; bottom: 0; }
.abt-float--company { right: -16px; top: 28px; }
.abt-float-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); }
.abt-float-icon--green { background: linear-gradient(135deg, #059669, #14b8a6); }

.abt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--tdx-line); border-radius: 20px; box-shadow: var(--tdx-shadow); overflow: hidden; }
.abt-fact { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.abt-fact + .abt-fact { border-left: 1px solid var(--tdx-line); }
.abt-fact strong { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abt-fact span { font-size: .9rem; color: var(--tdx-muted); line-height: 1.45; }

.abt-story { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 3.5rem; align-items: start; margin-top: 4.5rem; }
.abt-story-copy h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.15; margin: .1rem 0 1rem; }
.abt-story-copy p { color: var(--tdx-text); font-size: 1.02rem; line-height: 1.7; margin: 0 0 1rem; }
.abt-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.abt-value { padding: 1.4rem; }
.abt-value .tdx-icon { margin-bottom: .9rem; }
.abt-value h3 { font-size: 1.05rem; }

.abt-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.abt-office { padding: 1.5rem; display: flex; flex-direction: column; }
.abt-office .tdx-icon { margin-bottom: .9rem; }
.abt-office h3 { font-size: 1.1rem; }
.abt-office p { font-size: .95rem; color: var(--tdx-text); line-height: 1.6; }
.abt-office-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: auto; padding-top: 1.1rem; }
.abt-office-links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--tdx-accent); }
.abt-office-links a:hover { color: var(--tdx-accent-2); }
.abt-reg { margin: 1rem 0 0; display: grid; gap: .55rem; }
.abt-reg div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .55rem; border-top: 1px dashed var(--tdx-line); font-size: .86rem; }
.abt-reg dt { font-weight: 600; color: var(--tdx-muted); }
.abt-reg dd { margin: 0; font-weight: 700; color: var(--tdx-ink); text-align: right; }

@media (max-width: 991.98px) {
    .abt-hero { padding: 48px 0 56px; }
    .abt-hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .abt-visual { max-width: 640px; }
    .abt-photo { aspect-ratio: 16 / 10; }
    .abt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abt-fact:nth-child(3) { border-left: 0; }
    .abt-fact:nth-child(n + 3) { border-top: 1px solid var(--tdx-line); }
    .abt-story { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
    .abt-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .abt-office--company { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .abt-hero { padding: 36px 0 44px; }
    .abt-lead { font-size: 1rem; }
    .abt-actions .tdx-btn { flex: 1 1 100%; }
    .abt-visual { padding: 0 0 22px 12px; }
    .abt-float { padding: .65rem .8rem; }
    .abt-float--company { right: -6px; top: 16px; }
    .abt-fact { padding: 1.2rem 1rem; }
    .abt-fact strong { font-size: 1.7rem; }
    .abt-values, .abt-offices { grid-template-columns: 1fr; }
}

/* ── Solutions hub (sol-*): light editorial hero — search-first, own design (not a copy of the home/about heroes) ── */
.sol-hero { position: relative; overflow: hidden; background: #fff; padding: 72px 0 84px; border-bottom: 1px solid var(--tdx-line); }
.sol-hero::before, .sol-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.sol-hero::before { width: 900px; height: 900px; left: -300px; top: -480px; background: radial-gradient(circle, rgba(124, 58, 237, .13) 0%, rgba(60, 47, 192, .05) 45%, transparent 70%); }
.sol-hero::after { width: 760px; height: 760px; right: -300px; bottom: -520px; background: radial-gradient(circle, rgba(14, 165, 233, .10) 0%, transparent 65%); }
.sol-hero .container { position: relative; z-index: 1; }
.sol-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; align-items: center; }
.sol-kicker-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; border-radius: 999px; background: rgba(60, 47, 192, .08); color: var(--tdx-accent); font-size: .8rem; font-weight: 800; }
.sol-kicker-chip i { font-size: .9rem; }
.sol-hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.1vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: var(--tdx-ink); margin: 1.1rem 0 1.1rem; }
.sol-grad { background: linear-gradient(135deg, var(--tdx-accent) 10%, var(--tdx-accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sol-lead { font-size: 1.08rem; line-height: 1.65; color: var(--tdx-text); max-width: 560px; margin: 0 0 1.6rem; }
.sol-searchbar { position: relative; max-width: 560px; }
.sol-searchbar i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--tdx-muted); font-size: 1rem; }
.sol-searchbar input {
    width: 100%; min-height: 54px; padding: .8rem 1.15rem .8rem 2.95rem; font-size: .98rem; color: var(--tdx-ink);
    border: 1px solid var(--tdx-line); border-radius: 14px; background: #fff; box-shadow: var(--tdx-shadow); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sol-searchbar input::placeholder { color: var(--tdx-faint); }
.sol-searchbar input:focus { border-color: var(--tdx-accent); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }
.sol-pills { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.sol-pill {
    min-height: 38px; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--tdx-line);
    background: #fff; color: var(--tdx-text); font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sol-pill:hover { border-color: rgba(124, 58, 237, .4); color: var(--tdx-accent); transform: translateY(-1px); }
.sol-pill.is-active { background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px rgba(124, 58, 237, .55); }
.sol-clear {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .45rem .9rem; border-radius: 999px;
    border: 0; background: rgba(60, 47, 192, .06); color: var(--tdx-accent); font-size: .82rem; font-weight: 700; cursor: pointer;
}
.sol-clear:hover { background: rgba(60, 47, 192, .12); }
.sol-hero-visual { position: relative; padding: 0 0 28px 28px; }
.sol-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--tdx-shadow-lg); aspect-ratio: 16 / 9; border: 1px solid var(--tdx-line); }
.sol-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sol-float { position: absolute; display: flex; align-items: center; gap: .75rem; padding: .8rem 1.05rem; border-radius: 16px; background: #fff; border: 1px solid var(--tdx-line); box-shadow: var(--tdx-shadow-lg); }
.sol-float strong { display: block; font-size: .92rem; font-weight: 800; color: var(--tdx-ink); line-height: 1.2; }
.sol-float small { display: block; font-size: .76rem; color: var(--tdx-muted); line-height: 1.3; }
.sol-float--stages { left: 0; bottom: 0; }
.sol-float--verified { right: -16px; top: 26px; }
.sol-float-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); }
.sol-float-icon--green { background: linear-gradient(135deg, #059669, #14b8a6); }
.sol-group + .sol-group { margin-top: 3.25rem; }
.sol-grid > .tdx-card { position: relative; display: flex; flex-direction: column; gap: .55rem; }
.sol-grid .tdx-icon { margin-bottom: .35rem; }
.sol-grid .tdx-card p { flex: 1 1 auto; }
/* Two-column widths: centre an odd last card instead of leaving it stranded (same treatment as the pricing bundles). */
@media (min-width: 700px) and (max-width: 1199.98px) {
    .sol-grid > .tdx-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - 8px)); }
}
@media (max-width: 991.98px) {
    .sol-hero { padding: 48px 0 60px; }
    .sol-hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .sol-hero-visual { max-width: 640px; }
}
@media (max-width: 575.98px) {
    .sol-hero { padding: 36px 0 48px; }
    .sol-lead { font-size: 1rem; }
    .sol-searchbar input { min-height: 48px; padding-left: 2.7rem; }
    .sol-pill { flex: 1 1 auto; }
    .sol-hero-visual { padding: 0 0 22px 12px; }
    .sol-float { padding: .65rem .8rem; }
    .sol-float--verified { right: -6px; top: 14px; }
    .sol-group + .sol-group { margin-top: 2.4rem; }
    /* Phone type scale: single-column cards need readable copy — matches the system's own mobile lead-paragraph bump (.sol-lead/.abt-lead -> 1rem). */
    .sol-group .tdx-section-head p { font-size: 1rem; }
    .sol-grid .tdx-card h3 { font-size: 1.0625rem; }
    .sol-grid .tdx-card p { font-size: 1rem; line-height: 1.6; }
    .sol-grid .tdx-card-more { font-size: .9rem; margin-top: .9rem; }
}

/* -- Solution pages (mkt-*): the shared _MarketingPage template --------------------------------- */
/* One structure, per-page differences: accent hex (--mkt-accent, site palette only), example
   card, 3 page-specific facts, alternating composition (mkt-hero--flip). */
.mkt-hero { position: relative; overflow: hidden; background: #fff; padding: 72px 0 80px; border-bottom: 1px solid var(--tdx-line); }
.mkt-hero::before, .mkt-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.mkt-hero::before { width: 900px; height: 900px; right: -260px; top: -500px; background: radial-gradient(circle, color-mix(in srgb, var(--mkt-accent) 14%, transparent) 0%, transparent 70%); }
.mkt-hero::after { width: 640px; height: 640px; left: -300px; bottom: -420px; background: radial-gradient(circle, color-mix(in srgb, var(--mkt-accent) 9%, transparent) 0%, transparent 65%); }
.mkt-hero .container { position: relative; z-index: 1; }
.mkt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; align-items: center; }
.mkt-hero--flip .mkt-hero-grid > .mkt-example { order: -1; }
.mkt-hero-grid > *, .mkt-hero-grid--dark > * { min-width: 0; }
/* ============ Live-activity hero (mkt-hero--live, 2026-09-26) ============
   Third hero type (researched 2026 "product-in-motion" pattern - Asana floating UI elements,
   Lovable "the hero is the product", SaaSFrame trends 1/3/4): the light skeleton with the example
   card as the hero product and floating live-event chips ("pings") around it. White ground + soft
   accent glows; no corner circles (light variant's signature), no glass tiles (dark variant's).
   Pings reuse the tdx-icon component; the example card is the untouched shared home-feed partial
   (locked for look). Self-contained block like the other variant blocks. */
.mkt-hero--live {
  border-bottom: none;
  background:
    radial-gradient(820px 480px at 76% 16%, color-mix(in srgb, var(--mkt-accent) 10%, transparent), transparent 62%),
    radial-gradient(720px 440px at 8% 112%, color-mix(in srgb, var(--tdx-accent-2) 8%, transparent), transparent 58%),
    #fff;
}
.mkt-hero--live::before,
.mkt-hero--live::after { display: none; }
.mkt-hero--live .home-feed { box-shadow: 0 28px 64px -28px color-mix(in srgb, var(--mkt-accent) 38%, rgba(15, 23, 42, .3)); }
.mkt-ping {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid var(--tdx-line); border-radius: 14px;
  padding: .55rem .85rem .55rem .6rem;
  box-shadow: 0 14px 32px -14px rgba(15, 23, 42, .3);
  animation: mkt-ping-float 6s ease-in-out infinite;
}
.mkt-ping-text strong { display: block; font-size: .78rem; line-height: 1.25; color: var(--tdx-ink); }
.mkt-ping-text em { display: block; font-style: normal; font-size: .7rem; margin-top: 1px; color: var(--tdx-muted); }
.mkt-pings .mkt-ping:nth-child(1) { top: -20px; left: -36px; }
.mkt-pings .mkt-ping:nth-child(2) { top: 36%; right: -32px; animation-delay: -2s; }
.mkt-pings .mkt-ping:nth-child(3) { bottom: -22px; left: 6%; animation-delay: -4s; }
@keyframes mkt-ping-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .mkt-ping { animation: none; } }
@media (max-width: 991.98px) {
  .mkt-pings .mkt-ping:nth-child(1) { left: -6px; }
  .mkt-pings .mkt-ping:nth-child(2) { right: -6px; }
}
@media (max-width: 575.98px) { .mkt-ping { display: none; } }
.mkt-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--mkt-accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--mkt-accent) 22%, #fff); color: var(--mkt-accent); font-size: .74rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.mkt-chip i { font-size: .85em; }
.mkt-hero h1 { margin: .9rem 0 .35rem; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; color: var(--tdx-ink); }
.mkt-lead { font-size: 1.08rem; line-height: 1.6; color: var(--tdx-muted); max-width: 34em; }
.mkt-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

.mkt-example { position: relative; }

.mkt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.mkt-fact { background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.15rem 1.3rem; box-shadow: var(--tdx-shadow); }
.mkt-fact strong { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--mkt-accent); }
.mkt-fact span { display: block; margin-top: .35rem; font-size: .9rem; line-height: 1.5; color: var(--tdx-muted); }

.mkt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.mkt-step { background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.4rem 1.4rem 1.3rem; box-shadow: var(--tdx-shadow); }
.mkt-step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; font-size: .85rem; font-weight: 800; color: var(--mkt-accent); background: color-mix(in srgb, var(--mkt-accent) 10%, #fff); margin-bottom: .8rem; }
.mkt-step h3 { font-size: 1.02rem; margin-bottom: .4rem; color: var(--tdx-ink); }
.mkt-step p { font-size: .92rem; line-height: 1.6; color: var(--tdx-muted); margin: 0; }

.mkt-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.mkt-feature { display: flex; gap: .9rem; align-items: flex-start; background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.2rem 1.3rem; box-shadow: var(--tdx-shadow); }
.mkt-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--mkt-accent) 10%, #fff); color: var(--mkt-accent); font-size: 1.15rem; }
.mkt-feature h3 { font-size: .98rem; margin-bottom: .3rem; color: var(--tdx-ink); }
.mkt-feature p { font-size: .9rem; line-height: 1.55; color: var(--tdx-muted); margin: 0; }

.mkt-related-cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; font-size: .85rem; font-weight: 700; color: var(--mkt-accent); }

@media (max-width: 991.98px) {
    .mkt-hero { padding: 48px 0 60px; }
    .mkt-hero-grid { grid-template-columns: 1fr; gap: 2.75rem; }
    .mkt-hero--flip .mkt-hero-grid > .mkt-example { order: 0; }
    .mkt-ex { margin-left: 0; }
    .mkt-facts, .mkt-steps { grid-template-columns: 1fr; gap: .8rem; }
    .mkt-facts { margin-bottom: 2.4rem; }
    .mkt-features { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .mkt-hero { padding: 36px 0 48px; }
    .mkt-lead { font-size: 1rem; }
    .mkt-fact strong { font-size: 1.5rem; }
    .mkt-step, .mkt-feature { padding: 1rem 1.1rem; }
    .mkt-ex-list em { display: none; }
    .mkt-ex-list li { padding: .55rem .6rem; }
}

/* Dark premium hero variant (mkt-hero--dark): the tdx-hero gradient family (events/pricing),
   copy + glass tiles + per-page example card. Tiles mirror the .home-market-stat language. */
.mkt-hero--dark h1 { margin-top: .9rem; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem); }
.mkt-hero--dark .tdx-hero-lead { max-width: 620px; font-size: 1.08rem; margin-top: 1.1rem; }
.mkt-hero-grid--dark { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; align-items: center; }
.mkt-hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.6rem; }
.mkt-hero-tile { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); }
.mkt-hero-tile-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); margin-bottom: .45rem; }
.mkt-hero-tile strong { color: #fff; font-size: .95rem; line-height: 1.25; }
.mkt-hero-tile span { color: rgba(255, 255, 255, .8); font-size: .78rem; line-height: 1.45; }

/* Scan-stage example card (smart materials): frame + rows reuse the .home-feed component classes;
   only the head, QR tile and mechanism strip are page-specific. */
.stm-head { display: flex; align-items: center; gap: .8rem; padding: .3rem .3rem .9rem; border-bottom: 1px solid var(--tdx-line); }
.stm-head div { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.stm-head strong { font-size: .92rem; }
.stm-head .tdx-status { background: #ecfdf5; align-self: flex-start; }
.stm-qr { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 10px 20px -8px var(--tdx-accent); }
.stm-material { display: flex; align-items: center; gap: .8rem; margin: .8rem .3rem; padding: .75rem .9rem; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; }
.stm-material > div { display: flex; flex-direction: column; min-width: 0; }
.stm-material strong { font-size: .88rem; }
.stm-material span { font-size: .76rem; color: var(--tdx-muted); }
@media (max-width: 991.98px) {
  .mkt-hero-grid--dark { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 575.98px) {
  .mkt-hero-tiles { grid-template-columns: 1fr; }
  .mkt-hero-tile { flex-direction: row; align-items: center; gap: .6rem; }
  .mkt-hero-tile-icon { margin-bottom: 0; }
}

/* mkt-premium: shared premium body treatment for ALL solution pages (page-scoped via the
   BodyClass hook on <main>). Replaces the smart-materials-only chips+trim block (2026-09-25):
   "How it works" dissolves into the home page's connected timeline
   (.home-steps/.home-step-num language - centred text, dashed connector, 56px gradient number
   nodes with white rings), "What's included" becomes a 1+3 bento (flagship full-width card +
   row of three) with solid gradient icon chips (.tdx-icon--solid language) and hover lift
   (.tdx-card--hover language). Self-contained block, same place as the former stm-premium block. */
.mkt-premium .page-layout > section.home-sec,
.mkt-premium .page-layout > section.faq-band { padding-top: 64px !important; padding-bottom: 64px !important; }
.mkt-premium .mkt-facts { margin-bottom: 2.25rem; }
.mkt-premium .mkt-steps, .mkt-premium .mkt-features { margin-top: 1.5rem; }
/* How it works -> home timeline: cards dissolve, number nodes sit on a dashed connector. */
.mkt-premium .mkt-steps { position: relative; }
.mkt-premium .mkt-steps::before { content: ""; position: absolute; top: 28px; left: 16.7%; right: 16.7%; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--mkt-accent) 45%, #fff) 0 8px, transparent 8px 16px); z-index: 0; }
.mkt-premium .mkt-step { position: relative; z-index: 1; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 .5rem; text-align: center; }
.mkt-premium .mkt-step-num { width: 56px; height: 56px; border-radius: 18px; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--mkt-accent), var(--tdx-accent-2)); box-shadow: 0 14px 30px -12px var(--mkt-accent), 0 0 0 8px #fff; margin: 0 auto 1rem; }
.mkt-premium .mkt-step h3 { font-size: 1.05rem; font-weight: 800; }
.mkt-premium .mkt-step p { font-size: .9rem; line-height: 1.55; }
/* What's included -> 1+3 bento (all four pages have 4 features): flagship wide card + row of three. */
.mkt-premium .mkt-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkt-premium .mkt-feature:first-child { grid-column: 1 / -1; }
.mkt-premium .mkt-feature:first-child h3 { font-size: 1.12rem; }
.mkt-premium .mkt-feature:first-child p { font-size: .95rem; max-width: 640px; }
.mkt-premium .mkt-feature:first-child .mkt-feature-icon { width: 48px; height: 48px; font-size: 1.3rem; }
.mkt-premium .mkt-feature-icon { background: linear-gradient(135deg, var(--mkt-accent), var(--tdx-accent-2)); color: #fff; box-shadow: 0 10px 22px -12px var(--mkt-accent); }
.mkt-premium .mkt-feature { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mkt-premium .mkt-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(15, 23, 42, .4); border-color: color-mix(in srgb, var(--mkt-accent) 35%, #fff); }
@media (max-width: 991.98px) {
  .mkt-premium .mkt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .mkt-premium .mkt-steps::before { display: none; }
  /* 3 steps in 2 columns: span the stranded odd step (site idiom: .sol-grid orphan rule). */
  .mkt-premium .mkt-steps .mkt-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mkt-premium .mkt-features { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .mkt-premium .mkt-steps { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .mkt-premium .mkt-step { text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; padding: 0; }
  .mkt-premium .mkt-step-num { grid-row: span 2; margin: 0; }
  /* Dark-hero CTA stack (carried over from stm-premium; only smart materials has a dark hero). */
  .mkt-premium .mkt-hero-grid--dark > * { min-width: 0; }
  .mkt-premium .tdx-hero-actions { flex-direction: column; align-items: stretch; }
  .mkt-premium .tdx-hero-actions .tdx-btn { width: 100%; min-width: 0; white-space: normal; }
}

/* ============ Contact — form-first hero (ct-*) ============ */
.ct-hero { position: relative; overflow: hidden; background: radial-gradient(900px 460px at 0% 0%, color-mix(in srgb, var(--tdx-accent) 12%, transparent), transparent 62%), #fff; }
.ct-hero .container { padding-top: 3.4rem; padding-bottom: 3.4rem; }
.ct-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro form" "cards form"; gap: 1.1rem 2.75rem; align-items: start; }
.ct-intro { grid-area: intro; }
.ct-cards { grid-area: cards; display: grid; gap: .85rem; }
.ct-form-card { grid-area: form; background: #fff; border: 1px solid var(--tdx-line); border-radius: var(--tdx-radius); box-shadow: var(--tdx-shadow-lg); padding: 1.5rem 1.6rem 1.6rem; }
.ct-intro h1 { font-size: clamp(1.9rem, 1.15rem + 2.3vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--tdx-ink); margin: .35rem 0 .6rem; }
.ct-lead { font-size: 1.05rem; line-height: 1.6; color: var(--tdx-text); max-width: 460px; margin: 0; }
.ct-office { padding: 1rem 1.1rem; }
.ct-office h3 { margin: .45rem 0 .3rem; font-size: 1.02rem; font-weight: 800; color: var(--tdx-ink); }
.ct-office p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--tdx-muted); }
.ct-office-links { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .6rem; }
.ct-office-links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; color: var(--tdx-accent); text-decoration: none; }
.ct-office-links a:hover { text-decoration: underline; }
.ct-office-map { position: relative; height: 240px; margin-top: .8rem; border-radius: 14px; border: 1px solid var(--tdx-line); overflow: hidden; background: var(--tdx-soft); }
.ct-office-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ct-office-map-chip { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--tdx-line); box-shadow: var(--tdx-shadow); font-size: .8rem; font-weight: 700; color: var(--tdx-ink); pointer-events: none; }
.ct-office-map-chip i { color: var(--tdx-accent); }
.ct-alert { border-radius: var(--tdx-radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; line-height: 1.5; }
.ct-alert--ok { background: #d1fae5; color: #047857; }
.ct-alert--err { background: #fef3c7; color: #92400e; }
.ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem 1rem; }
.ct-field { display: flex; flex-direction: column; }
.ct-field--full { grid-column: 1 / -1; }
.ct-note { font-size: .8rem; line-height: 1.5; color: var(--tdx-faint); margin: 1rem 0 1rem; }
.ct-submit { width: 100%; justify-content: center; }
@media (max-width: 1199.98px) {
    .ct-hero-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "cards"; gap: 1.5rem; }
    .ct-lead { max-width: 640px; }
}
@media (max-width: 575.98px) {
    .ct-hero .container { padding-top: 2.2rem; padding-bottom: 2.2rem; }
    .ct-form-card { padding: 1.15rem 1rem 1.25rem; }
    .ct-fields { grid-template-columns: 1fr; }
    .ct-lead { font-size: 1rem; }
}
/* ============ Contact thank-you (cty-*) ============ */
.cty-hero { background: radial-gradient(700px 320px at 50% -20%, color-mix(in srgb, var(--tdx-accent) 12%, transparent), transparent 65%), #fff; text-align: center; }
.cty-hero .container { padding-top: 3.2rem; padding-bottom: 2.6rem; }
.cty-narrow { max-width: 720px; margin: 0 auto; }
.cty-check { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; background: #d1fae5; color: #047857; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.cty-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--tdx-ink); margin: 0 0 .5rem; }
.cty-hero p { font-size: 1.05rem; line-height: 1.6; color: var(--tdx-text); max-width: 560px; margin: 0 auto; }
.cty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.6rem 0 2rem; }
.cty-step { background: #fff; border: 1px solid var(--tdx-line); border-radius: var(--tdx-radius); padding: 1.1rem 1.2rem; box-shadow: var(--tdx-shadow); }
.cty-step b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--tdx-accent); margin-bottom: .4rem; }
.cty-step p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--tdx-text); }
.cty-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
@media (max-width: 767.98px) {
    .cty-steps { grid-template-columns: 1fr; }
    .cty-actions .tdx-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============ hero-lab (hl-*): the owner's picked hero languages (H1 "Command", H2 "Monolith",
   H4 "Live thread" — now also served on the live solution pages, so their rules are SHARED) +
   the remaining lab candidates. Kept for owner review (2026-09-26: /solutions/hero-lab stays
   alive, hidden from SEO/sitemap) — do not delete the lab-only chrome (hl-intro/hl-nav/hl-cand/
   hl-label/hl-for) or the unused candidate blocks (H3/H5-H10) while the lab page exists.
   Reuses: .mkt-hero base, .mkt-chip, .mkt-lead, .mkt-actions, .tdx-btn, .home-feed family,
   .tdx-status, .mkt-hero--dark / --live wrappers, .tdx-icon--solid. No data-anime. */
/* Scope root: the tdx variables + the mkt accent are template-scoped (defined on .tdx / on <main> in
   _MarketingPage); the lab chrome lives outside those wrappers, so the lab root carries the identical
   values (copied from the .tdx block above) and every reused rule resolves. The live transplanted
   stages carry the .tdx class + an inline --mkt-accent (template idiom), so the shared hl-* rules
   resolve there too. */
.hero-lab { --tdx-accent: var(--base-color, #3c2fc0); --tdx-accent-2: #7c3aed; --tdx-ink: #0f172a; --tdx-text: #334155; --tdx-muted: #64748b; --tdx-faint: #94a3b8; --tdx-line: #e7eaf3; --tdx-soft: #f5f7fc; --tdx-page: #f7f8fc; --tdx-radius: 18px; --tdx-radius-sm: 12px; --tdx-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06); --tdx-shadow-lg: 0 24px 60px rgba(15, 23, 42, .14); --tdx-hero: linear-gradient(135deg, #140f3d 0%, #2b1f9c 42%, #3c2fc0 62%, #7c3aed 100%); --mkt-accent: var(--tdx-accent); }
.hero-lab .page-layout > section { padding: 0; }
.hl-intro { padding: 3rem 0 1.4rem; }
.hl-intro h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5rem; }
.hl-intro p { max-width: 720px; color: var(--tdx-muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.hl-nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tdx-line); padding: .6rem 0; }
.hl-nav .container { display: flex; gap: .5rem; overflow-x: auto; }
.hl-nav a { white-space: nowrap; font-size: .8rem; font-weight: 700; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--tdx-line); background: #fff; color: var(--tdx-ink); }
.hl-nav a strong { color: var(--tdx-accent); margin-right: .3rem; }
.hl-nav a:hover { border-color: color-mix(in srgb, var(--tdx-accent) 40%, #fff); }
.hl-cand { padding: 2.8rem 0 3.2rem; border-top: 1px dashed var(--tdx-line); }
.hl-cand:first-of-type { border-top: 0; }
.hl-label { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.hl-num { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff; font-weight: 800; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.hl-label strong { display: block; font-size: 1.05rem; }
.hl-label em { display: block; font-style: normal; font-size: .8rem; color: var(--tdx-muted); margin-top: .1rem; }
.hl-for { margin-left: auto; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tdx-accent); background: color-mix(in srgb, var(--tdx-accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--tdx-accent) 20%, #fff); padding: .32rem .7rem; border-radius: 999px; white-space: nowrap; }
/* Candidate heading: mirrors .mkt-hero h1 exactly (the lab owns the page h1; candidates take h2 —
   the live transplanted stages use the same rule for the page's single h1). */
.hl-h { margin: .9rem 0 .35rem; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; color: var(--tdx-ink); }
.hl-micro { margin-top: 1rem; font-size: .8rem; color: var(--tdx-muted); display: flex; align-items: center; gap: .45rem; }
.hl-micro i { color: #059669; }

/* H1 "Command" — dark gradient wrapper (template dark branch verbatim) + CRM pipeline panel */
.hl-cmd-stage .hl-h { color: #fff; }
.hl-stage-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: .7rem .3rem; }
.hl-stage-chip { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; border-radius: 12px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.hl-stage-chip strong { color: var(--tdx-accent); font-size: .95rem; font-weight: 800; }
.hl-stage-chip span { font-size: .72rem; color: var(--tdx-muted); }

/* H2 "Monolith" — centred single column + growth chart */
.hl-mono-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hl-mono-stage .mkt-lead { margin-left: auto; margin-right: auto; max-width: 620px; }
.hl-mono-stage .mkt-actions { justify-content: center; }
.hl-mono-stage .hl-micro { justify-content: center; }
.hl-chart { max-width: 680px; margin: 2rem auto 0; text-align: left; }
.hl-bars { display: flex; align-items: stretch; gap: .9rem; height: 150px; padding: 1.2rem .4rem 0; }
.hl-barcol { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.hl-bar { width: 38px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--tdx-accent-2), var(--tdx-accent)); }
.hl-barlabs { display: flex; gap: .9rem; padding: 0 .4rem; }
.hl-bar-lab { flex: 1 1 0; min-width: 0; text-align: center; font-size: .74rem; color: var(--tdx-muted); padding-top: .45rem; }
.hl-barlabs .hl-bar-lab:last-child { color: var(--tdx-accent); font-weight: 700; }

/* H3 "Bento" — asymmetric 2x2: stat / live feed / integrations / trust */
.hl-bento-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr); gap: 2.5rem; align-items: center; }
.hl-bento { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: stretch; }
.hl-bcell { background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 20px 44px -26px rgba(15, 23, 42, .35); display: flex; flex-direction: column; gap: .35rem; }
.hl-bcell strong { font-size: .95rem; font-weight: 800; color: var(--tdx-ink); line-height: 1.25; }
.hl-bcell span { font-size: .8rem; color: var(--tdx-muted); line-height: 1.45; }
.hl-logolabel { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tdx-muted); }
.hl-logos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.hl-logo { font-size: .78rem; font-weight: 800; letter-spacing: .02em; padding: .35rem .7rem; border-radius: 999px; background: #f8fafc; border: 1px solid var(--tdx-line); color: var(--tdx-ink); }

/* H4 "Live thread" — template live branch verbatim; panel width discipline only */
.hl-mail .home-feed { max-width: 480px; margin-left: auto; }
.home-feed.hl-mail { max-width: 480px; margin-left: auto; }
/* The live branch's first ping overlaps the feed's head text - reposition (house pattern: the
   ping positions are already re-adjusted at the <=991 breakpoint in the live block). */
.hl-mail-stage .mkt-pings .mkt-ping:nth-child(1) { top: -46px; left: 6%; }

/* H5 "Proof band" — stat rows with the ROI page's real survey data */
.hl-stats-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hl-statrow { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--tdx-line); }
.hl-statrow:last-child { border-bottom: 0; }
.hl-statrow strong { color: var(--tdx-accent); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hl-statrow span { font-size: .86rem; color: var(--tdx-muted); line-height: 1.5; }

/* H6 "Integrations" — tabbed CRM-sync panel (static: first tab active) */
.hl-tabs-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; align-items: center; }
.hl-tabrow { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem .3rem; }
.hl-tab { font-size: .78rem; font-weight: 700; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--tdx-line); background: #f8fafc; color: var(--tdx-muted); }
.hl-tab.is-active { background: color-mix(in srgb, var(--tdx-accent) 10%, #fff); border-color: color-mix(in srgb, var(--tdx-accent) 30%, #fff); color: var(--tdx-accent); }
.hl-tabbody { display: flex; flex-direction: column; gap: .6rem; padding: .7rem .3rem .3rem; }
.hl-tabbody .tdx-status { align-self: flex-start; }
.hl-maprow { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--tdx-line); font-size: .84rem; }
.hl-maprow:last-child { border-bottom: 0; }
.hl-maprow span { color: var(--tdx-muted); }
.hl-maprow strong { color: var(--tdx-ink); }

/* H7 "Code" — developer-proof hero (system monospace stack, no new font) */
.hl-code-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; align-items: center; }
.hl-codewin { background: #0f172a; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .55); }
.hl-codebar { display: flex; align-items: center; gap: 6px; padding: .7rem 1rem; background: rgba(255, 255, 255, .06); }
.hl-codebar span { font-size: .74rem; color: rgba(255, 255, 255, .55); margin-left: auto; }
.hl-dot { width: 10px; height: 10px; border-radius: 50%; }
.hl-dot:nth-child(1) { background: #ef4444; }
.hl-dot:nth-child(2) { background: #f59e0b; }
.hl-dot:nth-child(3) { background: #22c55e; }
.hl-codetext { margin: 0; padding: 1.1rem 1.2rem 1.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.65; color: #e2e8f0; overflow-x: auto; }
.hl-codeacc { color: #a78bfa; }
.hl-codemicro { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.hl-microchip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--tdx-accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--tdx-accent) 22%, #fff); color: var(--tdx-accent); font-size: .74rem; font-weight: 700; }
.hl-microchip i { font-size: .85em; }

/* H8 "Funnel" — full funnel, visits to closed */
.hl-funnel-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; align-items: center; }
.hl-funnel { position: relative; display: flex; flex-direction: column; gap: .7rem; padding-top: .8rem; }
.hl-frow { display: grid; grid-template-columns: 110px 1fr 110px; gap: .8rem; align-items: center; }
.hl-frow span { font-size: .8rem; font-weight: 700; color: var(--tdx-muted); }
.hl-fbar { height: 36px; border-radius: 9px; background: linear-gradient(90deg, var(--tdx-accent), var(--tdx-accent-2)); }
.hl-frow strong { font-size: .86rem; font-weight: 800; text-align: right; color: var(--tdx-ink); }

/* H9 "Journey" — post-show timeline (mkt-premium step language, hl- prefixed) */
.hl-journey-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; align-items: center; }
.hl-jsteps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-top: .5rem; }
/* Connector: centred nodes (the .home-steps house language - approved home rail): each dot
   sits in the middle of its column, so the dashed line runs between the first and last dot
   centres = 12.5% in from each side for 4 equal columns. Accent 45% mix, real dashed border. */
.hl-jsteps::before { content: ""; position: absolute; top: 35px; left: 12.5%; right: 12.5%; border-top: 2px dashed color-mix(in srgb, var(--tdx-accent) 45%, #fff); z-index: 0; }
.hl-jnode { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hl-jdot { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 0 0 8px color-mix(in srgb, var(--tdx-accent) 8%, transparent); }
.hl-jnode h3 { font-size: .95rem; font-weight: 800; margin: .7rem 0 .2rem; }
.hl-jnode p { font-size: .78rem; color: var(--tdx-muted); line-height: 1.5; margin: 0; }

/* H10 "Proof stack" — logos + stars + testimonial + stat chips */
.hl-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hl-proofstack { display: flex; flex-direction: column; gap: .75rem; }
.hl-stars { display: flex; gap: .2rem; color: var(--tdx-accent); font-size: .9rem; margin-top: .3rem; }
.hl-quote p { font-size: .9rem; line-height: 1.55; color: var(--tdx-ink); margin: .6rem 0 .2rem; }
.hl-quoter { font-size: .76rem; color: var(--tdx-muted); }
.hl-statchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hl-statchip { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; border-radius: 12px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.hl-statchip strong { color: var(--tdx-accent); font-size: .95rem; font-weight: 800; }
.hl-statchip span { font-size: .72rem; color: var(--tdx-muted); }

/* hero-lab responsive */
@media (max-width: 991.98px) {
  .hl-bento-grid, .hl-stats-grid, .hl-tabs-grid, .hl-code-grid, .hl-funnel-grid, .hl-journey-grid, .hl-proof-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 575.98px) {
  .hl-for, .sl-for { display: none; }
  .hl-jsteps { grid-template-columns: 1fr 1fr; }
  .hl-jsteps::before { display: none; }
  .hl-frow { grid-template-columns: 84px 1fr 84px; }
  .hl-mono-stage .mkt-actions .tdx-btn { display: block; width: 100%; }
  .hl-mono-stage .mkt-actions .tdx-btn + .tdx-btn { margin-top: .6rem; }
  .sl-label { flex-wrap: wrap; row-gap: .5rem; }
  .sl-copy { margin-left: 0; }
}

/* ============ section-lab (sl-*): the 20 body-section pattern languages (S1-S20) ============ */
/* Wave 3 (2026-09-26): the owner ordered 20 DIFFERENT section patterns for the 13 solution
   pages (any two pages must share <= 2 of their 5 body sections — the 60% mix bar). S1-S11
   reuse EXISTING classes (.mkt-*, .home-*, .hl-* — no new rules here); S12-S20 are new
   top-level rules SHARED with the live solution pages (same arrangement as the hl-* hero
   rules). /solutions/section-lab renders all 20 with EXAMPLE data; the lab root carries the
   identical tdx variable values as .hero-lab (copied from line 1123, renamed) because the
   lab chrome lives outside the .tdx wrappers. Live pages set --mkt-accent inline on <main>.
   No data-anime. Synthetic data is badged EXAMPLE (.home-feed-example). */
.section-lab { --tdx-accent: var(--base-color, #3c2fc0); --tdx-accent-2: #7c3aed; --tdx-ink: #0f172a; --tdx-text: #334155; --tdx-muted: #64748b; --tdx-faint: #94a3b8; --tdx-line: #e7eaf3; --tdx-soft: #f5f7fc; --tdx-page: #f7f8fc; --tdx-radius: 18px; --tdx-radius-sm: 12px; --tdx-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .06); --tdx-shadow-lg: 0 24px 60px rgba(15, 23, 42, .14); --tdx-hero: linear-gradient(135deg, #140f3d 0%, #2b1f9c 42%, #3c2fc0 62%, #7c3aed 100%); --mkt-accent: var(--tdx-accent); }
.section-lab .sl-cand .home-sec { position: relative; background: #fff; }
.section-lab .sl-cand .home-sec--soft { background: var(--tdx-page); }
.sl-intro { padding: 3rem 0 1.4rem; }
.sl-intro h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5rem; }
.sl-intro p { max-width: 720px; color: var(--tdx-muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.sl-nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tdx-line); padding: .6rem 0; }
.sl-nav .container { display: flex; gap: .5rem; overflow-x: auto; }
.sl-nav a { white-space: nowrap; font-size: .8rem; font-weight: 700; padding: .38rem .8rem; border-radius: 999px; border: 1px solid var(--tdx-line); background: #fff; color: var(--tdx-ink); }
.sl-nav a strong { color: var(--tdx-accent); margin-right: .3rem; }
.sl-nav a:hover { border-color: color-mix(in srgb, var(--tdx-accent) 40%, #fff); }
.sl-cand { padding: 2.8rem 0 3.2rem; border-top: 1px dashed var(--tdx-line); scroll-margin-top: 82px; }
.sl-cand:first-of-type { border-top: 0; }
.sl-label { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.sl-num { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--tdx-accent), var(--tdx-accent-2)); color: #fff; font-weight: 800; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.sl-label strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--tdx-ink); letter-spacing: -.01em; }
.sl-label em { display: block; font-style: normal; font-size: .8rem; color: var(--tdx-muted); margin-top: .1rem; }
.sl-for { margin-left: auto; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tdx-accent); background: color-mix(in srgb, var(--tdx-accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--tdx-accent) 20%, #fff); padding: .32rem .7rem; border-radius: 999px; white-space: nowrap; }
.sl-copy { margin-left: .5rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tdx-accent); background: #fff; border: 1px solid color-mix(in srgb, var(--tdx-accent) 35%, #fff); padding: .32rem .7rem; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; transition: background .15s ease; }
.sl-copy:hover { background: color-mix(in srgb, var(--tdx-accent) 6%, #fff); }
.sl-copy.is-copied { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }

/* S12 "Compare table" — two columns: muted "without" vs accent "with" */
.sl-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.sl-cmp-col { background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.25rem 1.4rem; box-shadow: var(--tdx-shadow); }
.sl-cmp-col.is-accent { border-color: color-mix(in srgb, var(--mkt-accent) 40%, #fff); background: color-mix(in srgb, var(--mkt-accent) 4%, #fff); }
.sl-cmp-head { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 800; color: var(--tdx-ink); padding-bottom: .8rem; margin-bottom: .4rem; border-bottom: 1px solid var(--tdx-line); }
.sl-cmp-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; background: #f1f5f9; color: #64748b; }
.sl-cmp-col.is-accent .sl-cmp-ic { background: linear-gradient(135deg, var(--mkt-accent), var(--tdx-accent-2)); color: #fff; }
.sl-cmp-row { display: flex; gap: .6rem; padding: .6rem 0; border-bottom: 1px dashed var(--tdx-line); font-size: .9rem; line-height: 1.55; color: var(--tdx-muted); }
.sl-cmp-row:last-child { border-bottom: 0; }
.sl-cmp-row i { margin-top: .2rem; color: #94a3b8; }
.sl-cmp-col.is-accent .sl-cmp-row { color: var(--tdx-text); }
.sl-cmp-col.is-accent .sl-cmp-row i { color: var(--mkt-accent); }
@media (max-width: 991.98px) { .sl-cmp { grid-template-columns: 1fr; } }

/* S13 "Split showcase" — text list left, windowed mock right */
.sl-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3rem; align-items: center; margin-top: 2rem; }
.sl-split-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.sl-split-list li { display: flex; gap: .8rem; }
.sl-split-list .tdx-icon { flex: 0 0 auto; }
.sl-split-list strong { display: block; font-size: .95rem; color: var(--tdx-ink); }
.sl-split-list p { margin: .1rem 0 0; font-size: .88rem; color: var(--tdx-muted); line-height: 1.55; }
.sl-frame { background: #fff; border: 1px solid var(--tdx-line); border-radius: 20px; box-shadow: 0 30px 70px -30px rgba(15, 23, 42, .28); overflow: hidden; }
.sl-framebar { display: flex; align-items: center; gap: 6px; padding: .7rem 1rem; background: #f8fafc; border-bottom: 1px solid var(--tdx-line); }
.sl-framedot { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.sl-framedot.d1 { background: #fca5a5; } .sl-framedot.d2 { background: #fcd34d; } .sl-framedot.d3 { background: #86efac; }
.sl-framebar span { font-size: .74rem; color: #94a3b8; margin-left: auto; }
.sl-framerow { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px dashed var(--tdx-line); }
.sl-framerow:last-child { border-bottom: 0; }
.sl-frameav { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3c2fc0, #7c3aed); }
.sl-framerow div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sl-framerow strong { font-size: .88rem; color: var(--tdx-ink); }
.sl-framerow em { font-style: normal; font-size: .74rem; color: #94a3b8; }
.sl-framerow span.t { font-size: .8rem; color: var(--tdx-muted); }
@media (max-width: 991.98px) { .sl-split { grid-template-columns: 1fr; gap: 1.8rem; } }

/* S14 "Checklist" — 2-col check list */
.sl-check { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; }
.sl-check li { display: flex; gap: .8rem; align-items: flex-start; }
.sl-check-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--mkt-accent) 10%, #fff); color: var(--mkt-accent); }
.sl-check strong { display: block; font-size: .93rem; color: var(--tdx-ink); }
.sl-check p { margin: .1rem 0 0; font-size: .86rem; color: var(--tdx-muted); line-height: 1.5; }
@media (max-width: 991.98px) { .sl-check { grid-template-columns: 1fr; } }

/* S15 "Tabs switcher" — bootstrap nav-tabs pill variant (bootstrap.bundle.js is loaded
   site-wide in _Layout; the Faq accordion already proves bootstrap collapse works here) */
.sl-tabs { border: 0 !important; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 2rem 0 1.2rem; }
.sl-tabs .nav-link { border: 1px solid var(--tdx-line); border-radius: 999px !important; background: #fff; color: var(--tdx-muted); padding: .5rem 1.05rem; font-size: .85rem; font-weight: 700; }
.sl-tabs .nav-link:hover { color: var(--tdx-ink); border-color: #cfd6e6 !important; }
.sl-tabs .nav-link.active { color: #fff !important; background: linear-gradient(135deg, var(--mkt-accent), var(--tdx-accent-2)) !important; border-color: transparent !important; }
.sl-tabbody { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; padding: 1.1rem 0 .4rem; }
.sl-tabrow-item { background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--tdx-shadow); }
.sl-tabrow-item strong { display: block; font-size: .93rem; color: var(--tdx-ink); margin: .5rem 0 .2rem; }
.sl-tabrow-item p { margin: 0; font-size: .85rem; color: var(--tdx-muted); line-height: 1.5; }
@media (max-width: 991.98px) { .sl-tabbody { grid-template-columns: 1fr; } }

/* S16 "Metric bars" — horizontal % bars (the strong may be non-% text such as "8/8" or
   "20 min"; the fill width is always a %) */
.sl-mbars { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 2rem; max-width: 860px; }
.sl-mbrow { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 64px; gap: 1rem; align-items: center; }
.sl-mblab { font-size: .88rem; font-weight: 600; color: var(--tdx-text); line-height: 1.4; }
.sl-mbtrack { height: 12px; border-radius: 999px; background: var(--tdx-soft); overflow: hidden; }
.sl-mbfill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mkt-accent), var(--tdx-accent-2)); }
.sl-mbrow strong { font-size: 1.05rem; font-weight: 800; color: var(--mkt-accent); text-align: right; letter-spacing: -.02em; }
@media (max-width: 991.98px) { .sl-mbrow { grid-template-columns: minmax(0,1fr) 64px; } .sl-mblab { grid-column: 1 / -1; } }

/* S17 "Tiers" — 3 plan cards, middle featured */
.sl-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2.6rem; }
.sl-tier { position: relative; display: flex; flex-direction: column; gap: .4rem; background: #fff; border: 1px solid var(--tdx-line); border-radius: 18px; padding: 1.3rem 1.3rem 1.4rem; box-shadow: var(--tdx-shadow); }
.sl-tier.is-featured { border-color: color-mix(in srgb, var(--mkt-accent) 45%, #fff); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--mkt-accent) 45%, rgba(15, 23, 42, .4)); }
.sl-tier-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(135deg, var(--mkt-accent), var(--tdx-accent-2)); color: #fff; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }
.sl-tier-name { font-size: .95rem; font-weight: 800; color: var(--tdx-ink); }
.sl-tier-price { font-size: 1.5rem; font-weight: 800; color: var(--mkt-accent); letter-spacing: -.02em; }
.sl-tier > p { margin: 0; font-size: .85rem; color: var(--tdx-muted); line-height: 1.5; }
.sl-tier-list { list-style: none; margin: .6rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.sl-tier-list li { display: flex; gap: .5rem; font-size: .85rem; color: var(--tdx-text); }
.sl-tier-list i { color: var(--mkt-accent); margin-top: .15rem; }
.sl-tier .tdx-btn { margin-top: auto; }
@media (max-width: 991.98px) { .sl-tiers { grid-template-columns: 1fr; } .sl-tier.is-featured { order: -1; } }

/* S18 "Definition grid" — 2x2 term cards */
.sl-defs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.sl-def { background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.15rem 1.3rem; box-shadow: var(--tdx-shadow); }
.sl-def h3 { font-size: 1rem; font-weight: 800; color: var(--mkt-accent); margin: 0 0 .3rem; }
.sl-def p { margin: 0; font-size: .88rem; color: var(--tdx-muted); line-height: 1.55; }
@media (max-width: 991.98px) { .sl-defs { grid-template-columns: 1fr; } }

/* S19 "Quote trio" — 3 testimonial cards (stars reuse the existing .hl-stars class) */
.sl-quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.sl-quote { margin: 0; background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.2rem 1.3rem; box-shadow: var(--tdx-shadow); display: flex; flex-direction: column; gap: .5rem; }
.sl-quote blockquote { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--tdx-ink); }
.sl-quote figcaption { margin-top: auto; font-size: .78rem; color: var(--tdx-muted); }
.sl-quote figcaption strong { display: block; font-size: .84rem; color: var(--tdx-ink); }
@media (max-width: 991.98px) { .sl-quotes { grid-template-columns: 1fr; } }

/* S20 "Next-steps rows" — action rows reusing .tdx-icon / .mkt-related-cta (rows link ONLY
   to real targets: the page's own activation/demo URLs or sibling solution pages) */
.sl-docs { display: flex; flex-direction: column; gap: .8rem; margin-top: 2rem; }
.sl-doc { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1rem 1.2rem; box-shadow: var(--tdx-shadow); transition: transform .18s ease, border-color .18s ease; }
.sl-doc:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mkt-accent) 40%, #fff); }
.sl-doc .tdx-icon { flex: 0 0 auto; }
.sl-doc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sl-doc-text strong { font-size: .92rem; color: var(--tdx-ink); }
.sl-doc-text span { font-size: .78rem; color: var(--tdx-muted); }
.sl-doc .mkt-related-cta { flex: 0 0 auto; margin-top: 0; }

/* ============ Feather glyphs missing from the compiled font (wave-3 fix 2026-09-27) ============
   The feather icon font (wwwroot/fonts/feather.*) has no glyphs for qr-code / scan / id-card /
   calendar-check — those four rendered as empty circles/tiles on the solution pages
   (owner-verified 2026-09-27). Lucide (the feather successor, same 24x24 stroke-2 style)
   SVG paths inlined as masks so the icons inherit currentColor and size with the font.
   No markup change: the existing class names now render. */
.feather.icon-feather-qr-code,
.feather.icon-feather-scan,
.feather.icon-feather-id-card,
.feather.icon-feather-calendar-check {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.feather.icon-feather-qr-code {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1'/%3E%3Crect width='5' height='5' x='16' y='3' rx='1'/%3E%3Crect width='5' height='5' x='3' y='16' rx='1'/%3E%3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 21v.01'/%3E%3Cpath d='M12 7v3a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M12 3h.01'/%3E%3Cpath d='M12 16v.01'/%3E%3Cpath d='M16 12h1'/%3E%3Cpath d='M21 12v.01'/%3E%3Cpath d='M12 21v-1'/%3E%3C/svg%3E");
}
.feather.icon-feather-scan {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E");
}
.feather.icon-feather-id-card {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 19a4 4 0 00-8 0'/%3E%3Cpath d='M16 10h2'/%3E%3Cpath d='M16 14h2'/%3E%3Ccircle cx='9' cy='12' r='3'/%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 19a4 4 0 00-8 0'/%3E%3Cpath d='M16 10h2'/%3E%3Cpath d='M16 14h2'/%3E%3Ccircle cx='9' cy='12' r='3'/%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3C/svg%3E");
}
.feather.icon-feather-calendar-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}

/* ============ S08 stat cards (wave-3 fix 2026-09-27) ============
   Body S08 "at a glance" bands were bare .hl-statrow rows (number + hairline rule) — the
   owner rejected the look 2026-09-27. New .hl-statcard cards: icon chip, big number,
   caption. .hl-statrow itself is untouched (the DM H5 hero still uses it). */
.hl-statcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hl-statcard { display: grid; grid-template-columns: 1fr; gap: .9rem; align-content: start; background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--tdx-shadow); }
.hl-stat-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--mkt-accent, #3c2fc0) 10%, #fff); color: var(--mkt-accent, #3c2fc0); font-size: 1.25rem; }
.hl-statcard strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--tdx-ink); }
.hl-statcard span { font-size: .9rem; line-height: 1.55; color: var(--tdx-muted); }
@media (max-width: 991.98px) { .hl-statcards { grid-template-columns: 1fr; } }

/* ============ S11 works-with grid (wave-3 fix 2026-09-27) ============
   Body S11 sections were 4 bare text pills (.hl-logos/.hl-logo) — the owner ordered
   "completely else" + text. New .sl-integ cards: brand monogram tile, name, description,
   2-way-sync chip. .hl-logos itself is untouched (the VQ H10 hero still uses it). */
.sl-integ { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sl-integ-card { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--tdx-line); border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: var(--tdx-shadow); }
.sl-integ-mark { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand, var(--tdx-accent, #3c2fc0)); color: #fff; font-size: 1.15rem; font-weight: 800; }
.sl-integ-body { min-width: 0; }
.sl-integ-body strong { font-size: 1rem; font-weight: 700; color: var(--tdx-ink); }
.sl-integ-body p { margin: .3rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--tdx-muted); }
.sl-integ-chip { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; padding: .28rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--mkt-accent, #3c2fc0) 9%, #fff); border: 1px solid color-mix(in srgb, var(--mkt-accent, #3c2fc0) 22%, #fff); color: var(--mkt-accent, #3c2fc0); font-size: .74rem; font-weight: 700; }
.sl-integ-chip i { font-size: .85em; }
@media (max-width: 991.98px) { .sl-integ { grid-template-columns: 1fr; } }

/* ============ Lab source link (wave-3 fix 2026-09-27) ============
   Each lab candidate links to the premium site the pattern was built from (owner demand). */
.sl-src { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: var(--tdx-muted); text-decoration: none; }
.sl-src:hover { color: var(--tdx-accent, #3c2fc0); }
.sl-src i { font-size: .85em; }