/* ===== _fx.css ===== */
/* ==========================================================================
   EASFX showpieces (app/js/fx.js): orbit3d, point-sphere, flow-field, aurora,
   tilt. Underscore prefix so this file sorts first in the pages.css bundle.
   Page CSS only positions the hosts; everything the effects need is here.
   ========================================================================== */

/* ---------- canvases ------------------------------------------------------ */
.fx-canvas { display: block; }
/* background canvases: fill the nearest positioned ancestor, never catch the pointer */
.fx-canvas-bg {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%;
    pointer-events: none;
}
.fx-canvas-aurora { opacity: 0.55; }
.fx-canvas-flow { opacity: 0.42; }
/* film grain over an aurora (inline SVG turbulence, no request) */
.fx-grain {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    opacity: 0.045;
    mix-blend-mode: screen;
}

/* ---------- orbit3d -------------------------------------------------------- */
.fx-orbit {
    --fx-r: 200px;
    --fx-persp: 900px;
    position: relative;
    width: 100%;
    height: clamp(300px, 30vw, 420px);
    perspective: var(--fx-persp);
    perspective-origin: 50% 46%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    overflow: visible;
    isolation: isolate;
}
.fx-orbit.is-dragging { cursor: grabbing; }
.fx-orbit-stage {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.fx-orbit-ring {
    position: absolute; left: 50%; top: 50%;
    width: calc(var(--fx-r) * 2); height: calc(var(--fx-r) * 2);
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 0, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 107, 0, 0.04), inset 0 0 40px rgba(255, 107, 0, 0.06);
    transform: translate(-50%, -50%) rotateX(90deg);
    pointer-events: none;
}
.fx-orbit-core {
    position: absolute; left: 50%; top: 50%; z-index: 0;
    width: clamp(92px, 24%, 164px); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle, rgba(255, 140, 58, 0.55), rgba(255, 107, 0, 0.18) 45%, transparent 72%);
    pointer-events: none;
}
.fx-orbit-core::before {
    content: ''; position: absolute; inset: -60%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.22), transparent 62%);
    filter: blur(14px);
    animation: fx-breathe 4.2s ease-in-out infinite;
}
.fx-orbit-core img {
    position: relative; width: 62%; height: 62%; border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 18px 40px -10px rgba(255, 107, 0, 0.55);
}
@keyframes fx-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 1; } }
.fx-chip {
    position: absolute; left: 50%; top: 50%;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid rgba(244, 239, 231, 0.18);
    background: rgba(13, 11, 9, 0.88);
    color: var(--e-bone, #f4efe7);
    font: 600 0.84rem/1 var(--e-display, 'Chakra Petch', sans-serif);
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    transition: border-color 200ms, box-shadow 200ms, background 200ms;
}
.fx-chip.is-front { border-color: rgba(255, 107, 0, 0.55); box-shadow: 0 0 0 1px rgba(255, 107, 0, 0.12), 0 18px 34px -14px rgba(255, 107, 0, 0.5); }
.fx-chip img { width: 18px; height: 18px; border-radius: 4px; }
a.fx-chip:hover { border-color: var(--e-ember, #ff6b00); }
.fx-chip-zoho { color: var(--e-ember-hot, #ff8c3a); border-color: rgba(255, 107, 0, 0.4); }
.fx-chip-zoho::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--e-ember, #ff6b00); box-shadow: 0 0 8px rgba(255, 107, 0, 0.8); }
.fx-orbit:not(.is-fx) .fx-chip { position: static; transform: none; margin: 4px; }
.fx-orbit:not(.is-fx) { height: auto; display: flex; flex-wrap: wrap; justify-content: center; }
@media (max-width: 759px) {
    .fx-orbit { height: clamp(250px, 70vw, 340px); }
    .fx-chip { padding: 7px 12px; font-size: 0.74rem; }
}
/* phones: a lighter ring (optional chips drop out, orbit3d re-spaces the rest) */
@media (max-width: 559px) {
    .fx-orbit.is-fx .fx-chip-opt { display: none; }
}

/* ---------- tilt ----------------------------------------------------------- */
.fx-tilt { position: relative; transform-style: preserve-3d; }
.fx-glare {
    position: absolute; inset: 0; z-index: 3; border-radius: inherit;
    pointer-events: none; opacity: 0;
    transition: opacity 320ms ease;
    mix-blend-mode: screen;
}

/* ---------- home: "Beyond Zoho" section ----------------------------------- */
#section-beyond .x-beyond { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { #section-beyond .x-beyond { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
#section-beyond .x-beyond-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--e-line); }
#section-beyond .x-beyond-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; align-items: start;
    padding: 22px 0; border-bottom: 1px solid var(--e-line);
}
#section-beyond .x-beyond-row i {
    grid-row: 1 / span 2;
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line);
    color: var(--e-ember-hot);
}
#section-beyond .x-beyond-row i svg { width: 20px; height: 20px; }
#section-beyond .x-beyond-row h3 { font-size: var(--e-fs-md); line-height: 1.2; }
#section-beyond .x-beyond-row p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; max-width: 46ch; }
#section-beyond .x-beyond-foot { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; margin-top: clamp(28px, 4vw, 44px); color: var(--e-smoke); font-size: var(--e-fs-sm); }
#section-beyond .x-beyond-row:hover i { border-color: var(--e-ember-45); background: var(--e-ember-12); }
#section-beyond .x-beyond-row i { transition: border-color var(--e-t-std), background var(--e-t-std); }
#section-beyond .x-beyond-visual { position: relative; min-width: 0; }
#section-beyond .x-beyond-visual::before {
    content: ''; position: absolute; inset: 10% 0; z-index: -1; border-radius: 50%;
    background: radial-gradient(60% 55% at 50% 50%, rgba(255, 107, 0, 0.14), transparent 70%);
    filter: blur(30px); pointer-events: none;
}
#section-beyond .x-beyond-hint { margin-top: 10px; text-align: center; font-size: var(--e-fs-xs); color: var(--e-dust); }
@media (hover: none) { #section-beyond .x-beyond-hint span:first-child { display: none; } }
@media (hover: hover) { #section-beyond .x-beyond-hint span:last-child { display: none; } }

/* ---------- reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fx-orbit-core::before { animation: none; }
    .fx-orbit { cursor: default; }
    .fx-glare { display: none; }
    .fx-canvas-flow { opacity: 0.3; }
}


/* ===== about.css ===== */
/* ==========================================================================
   About page (#modal-about) — built on the eas.css design system.
   Scoped: every rule lives under #modal-about. Mobile first.
   Motion: transform and opacity only; counters reserve their final width.
   ========================================================================== */

/* ---------- base ---------------------------------------------------------- */
#modal-about {
    --ab-top: var(--sticky-top, 92px); /* clearance under the sticky page header */
    color: var(--e-bone);
    font-family: var(--e-body);
    font-size: var(--e-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--e-black);
}
@media (min-width: 1100px) and (max-width: 1599px) { #modal-about { --ab-top: var(--sticky-top, 146px); } } /* + section bar */
#modal-about h1, #modal-about h2, #modal-about h3 {
    font-family: var(--e-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.04;
    text-wrap: balance;
    margin: 0;
    color: var(--e-bone);
}
#modal-about h1 { font-size: var(--e-fs-hero); line-height: 0.98; letter-spacing: -0.03em; }
#modal-about h2 { font-size: var(--e-fs-2xl); }
#modal-about h3 { font-size: var(--e-fs-lg); }
#modal-about p { margin: 0; }
#modal-about a { color: inherit; }
#modal-about img { display: block; max-width: 100%; height: auto; }
#modal-about ::selection { background: var(--e-ember); color: #000; }
#modal-about .x-lede strong { color: var(--e-bone); font-weight: 500; }
#modal-about section[id] { scroll-margin-top: var(--ab-top); }
#modal-about svg { flex: none; }

/* ---------- counters (JS wraps each number: ghost reserves the final width) */
#modal-about .ab-num { display: inline-grid; }
#modal-about .ab-num > span { grid-area: 1 / 1; }
#modal-about .ab-num-ghost { visibility: hidden; }
#modal-about .ab-num-live { justify-self: start; }
#modal-about .ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- intro --------------------------------------------------------- */
#modal-about .ab-hero { padding-top: clamp(48px, 8vw, 112px); overflow: clip; isolation: isolate; }
#modal-about .ab-hero::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: -12%; top: -30%; width: min(60vw, 720px); height: min(60vw, 720px); border-radius: 50%;
    background: radial-gradient(circle, var(--e-ember-12) 0%, transparent 62%);
}
#modal-about .ab-hero-grid { display: grid; gap: 44px; }
#modal-about .ab-hero-copy { max-width: 760px; }
#modal-about .ab-hero-lede { font-size: var(--e-fs-lg); line-height: 1.5; color: var(--e-smoke); max-width: 54ch; margin: 24px 0 32px; }
#modal-about .ab-hero-lede strong { color: var(--e-bone); font-weight: 500; }
#modal-about .ab-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#modal-about .ab-facts { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--e-line); display: flex; flex-wrap: wrap; gap: 10px 22px; }
#modal-about .ab-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--e-fs-sm); color: var(--e-smoke); }
#modal-about .ab-facts svg { width: 16px; height: 16px; color: var(--e-ember-hot); }

#modal-about .ab-kpis-wrap {
    position: relative; min-width: 0;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line-strong); overflow: hidden;
    background: linear-gradient(160deg, var(--e-char), var(--e-coal));
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#modal-about .ab-kpis-title { display: flex; align-items: center; gap: 10px; padding: 16px clamp(16px, 2.6vw, 24px); border-bottom: 1px solid var(--e-line); font-size: var(--e-fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-smoke); }
#modal-about .ab-kpis-title::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--e-ember); }
#modal-about .ab-kpis { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modal-about .ab-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.6vw, 24px); min-width: 0; }
#modal-about .ab-kpi:nth-child(odd) { border-right: 1px solid var(--e-line); }
#modal-about .ab-kpi:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--e-line); }
#modal-about .ab-kpi dt { order: 2; font-size: var(--e-fs-xs); color: var(--e-smoke); line-height: 1.35; }
#modal-about .ab-kpi dt small { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--e-dust); }
#modal-about .ab-kpi dd { order: 1; margin: 0; font-family: var(--e-display); font-weight: 700; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-about .ab-kpi > i {
    position: absolute; left: clamp(16px, 2.6vw, 24px); bottom: 0; width: 36%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--e-ember), rgba(255, 107, 0, 0)); transform-origin: 0 50%;
}
#modal-about .ab-kpis.is-armed:not(.is-counted) .ab-kpi > i { transform: scaleX(0); }
#modal-about .ab-kpis.is-counted .ab-kpi > i { transition: transform 1.3s var(--e-ease-out) 0.2s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(2) > i { transition-delay: 0.3s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(3) > i { transition-delay: 0.4s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(4) > i { transition-delay: 0.5s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(5) > i { transition-delay: 0.6s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(6) > i { transition-delay: 0.7s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(7) > i { transition-delay: 0.8s; }
#modal-about .ab-kpis.is-counted .ab-kpi:nth-child(8) > i { transition-delay: 0.9s; }
@media (min-width: 960px) {
    #modal-about .ab-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 64px; }
}

/* ---------- founder (signature) ------------------------------------------ */
#modal-about .ab-founder { background: linear-gradient(180deg, var(--e-black), var(--e-coal) 22%, var(--e-coal) 78%, var(--e-black)); }
#modal-about .ab-founder-grid { display: grid; gap: 44px; }
#modal-about .ab-portrait { margin: 0; position: relative; perspective: 1100px; --tx: 0; --ty: 0; }
#modal-about .ab-portrait-frame {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 3 / 2; border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line-strong); background: var(--e-char);
    transform: rotateX(calc(var(--ty) * -4deg)) rotateY(calc(var(--tx) * 5deg));
    transition: transform 700ms var(--e-ease-out), box-shadow 700ms var(--e-ease-out);
    box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
}
#modal-about .ab-portrait.is-tilt .ab-portrait-frame { transition: transform 140ms linear, box-shadow 400ms var(--e-ease-out); box-shadow: 0 44px 80px -36px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--e-ember-25); }
#modal-about .ab-portrait-frame img {
    width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
    transform: scale(1.04) translate(calc(var(--tx) * -6px), calc(var(--ty) * -6px));
    transition: transform 700ms var(--e-ease-out);
}
#modal-about .ab-portrait.is-tilt .ab-portrait-frame img { transition: transform 140ms linear; }
#modal-about .ab-glare {
    position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 170, 110, 0.22), rgba(255, 140, 58, 0.06) 22%, transparent 42%);
    mix-blend-mode: screen; opacity: 0;
    transform: translate(calc(var(--tx) * 25%), calc(var(--ty) * 25%));
    transition: opacity 400ms var(--e-ease-out);
}
#modal-about .ab-portrait.is-tilt .ab-glare { opacity: 1; }
#modal-about .ab-portrait-frame::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.92) 100%);
}
#modal-about .ab-portrait figcaption { position: absolute; left: 20px; right: calc(clamp(96px, 28%, 150px) + 34px); bottom: 18px; z-index: 2; display: grid; gap: 2px; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
#modal-about .ab-portrait figcaption b { font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-xl); line-height: 1.05; letter-spacing: -0.02em; }
#modal-about .ab-portrait figcaption span { color: #d9d1c6; font-size: var(--e-fs-sm); }
#modal-about .ab-portrait-badge {
    position: absolute; right: 14px; bottom: 14px; z-index: 3; padding: 0; cursor: zoom-in;
    width: clamp(96px, 28%, 150px); border-radius: 10px; overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.85); background: #fff;
    box-shadow: 0 26px 48px -20px rgba(0, 0, 0, 0.9);
    transform: rotate(-3deg);
    transition: transform 600ms var(--e-ease-out);
}
#modal-about .ab-portrait.is-tilt .ab-portrait-badge { transform: rotate(0deg) translate(calc(var(--tx) * 10px), calc(var(--ty) * 10px - 6px)); transition: transform 180ms var(--e-ease-out); }
#modal-about .ab-cred-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#modal-about .ab-cred-tags li { font-size: var(--e-fs-xs); padding: 7px 11px; border-radius: 8px; border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.04); color: var(--e-smoke); }
#modal-about .ab-founder-intro { margin-top: 18px; color: var(--e-smoke); max-width: 58ch; }
@media (min-width: 960px) {
    #modal-about .ab-founder-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
    #modal-about .ab-founder-media { position: sticky; top: calc(var(--ab-top) + 8px); align-self: start; }
    #modal-about .ab-portrait-frame { aspect-ratio: 4 / 5; }
    #modal-about .ab-portrait-frame img { object-position: 26% 50%; }
}
@media (min-width: 960px) and (max-height: 820px) { #modal-about .ab-portrait-frame { aspect-ratio: 1 / 1; } }

/* milestone timeline: the ember line draws as you scroll, nodes ignite as it passes */
#modal-about .ab-timeline {
    --ab-p: 0;
    list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0 0 0 46px;
    position: relative; display: grid; gap: clamp(26px, 4vw, 40px);
}
#modal-about .ab-timeline::before, #modal-about .ab-timeline::after {
    content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
}
#modal-about .ab-timeline::before { background: var(--e-line-strong); }
#modal-about .ab-timeline::after { background: linear-gradient(180deg, var(--e-ember-hot), var(--e-ember)); box-shadow: 0 0 12px rgba(255, 107, 0, 0.45); transform-origin: top; transform: scaleY(var(--ab-p)); transition: transform 140ms linear; }
#modal-about .ab-timeline li { position: relative; }
#modal-about .ab-tl-dot {
    position: absolute; left: -46px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--e-line-strong); background: var(--e-coal);
    display: grid; place-items: center;
    transition: border-color var(--e-t-std), box-shadow var(--e-t-std);
}
#modal-about .ab-tl-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--e-dust); transition: background var(--e-t-std), transform var(--e-t-std) var(--e-ease-out); }
#modal-about .ab-tl-k { display: block; margin-bottom: 6px; font-family: var(--e-display); font-size: var(--e-fs-xs); letter-spacing: 0.08em; color: var(--e-dust); transition: color var(--e-t-std); }
#modal-about .ab-timeline h3 { font-size: var(--e-fs-lg); margin-bottom: 8px; color: var(--e-smoke); transition: color var(--e-t-std); }
#modal-about .ab-timeline p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; max-width: 54ch; }
#modal-about .ab-timeline li.is-lit .ab-tl-dot, #modal-about .ab-timeline:not(.is-live) .ab-tl-dot { border-color: var(--e-ember); box-shadow: 0 0 0 5px var(--e-ember-12); }
#modal-about .ab-timeline li.is-lit .ab-tl-dot::after, #modal-about .ab-timeline:not(.is-live) .ab-tl-dot::after { background: var(--e-ember); transform: scale(1.25); }
#modal-about .ab-timeline li.is-lit .ab-tl-k, #modal-about .ab-timeline:not(.is-live) .ab-tl-k { color: var(--e-ember); }
#modal-about .ab-timeline li.is-lit h3, #modal-about .ab-timeline:not(.is-live) h3 { color: var(--e-bone); }
/* no JS or reduced motion: everything lit, line fully drawn */
#modal-about .ab-timeline:not(.is-live) { --ab-p: 1; }

#modal-about .ab-quote {
    position: relative; margin: clamp(36px, 5vw, 56px) 0 0; padding: 28px 30px 26px 30px;
    border-radius: var(--e-r-md); border: 1px solid var(--e-ember-25);
    background: linear-gradient(160deg, var(--e-char), var(--e-coal));
}
#modal-about .ab-quote::before { content: '\201C'; position: absolute; right: 22px; top: -6px; font: 700 5rem/1 var(--e-display); color: var(--e-ember); opacity: 0.25; pointer-events: none; }
#modal-about .ab-quote p { font-family: var(--e-display); font-weight: 600; font-size: var(--e-fs-lg); line-height: 1.35; color: var(--e-bone); }
#modal-about .ab-quote footer { margin-top: 14px; font-size: var(--e-fs-sm); color: var(--e-smoke); }

/* ---------- team ---------------------------------------------------------- */
#modal-about .ab-team-grid { display: grid; gap: 14px; }
#modal-about .ab-team-photo { margin: 0; position: relative; overflow: hidden; border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--e-char); aspect-ratio: 16 / 9; }
#modal-about .ab-team-photo img { width: 100%; height: 100%; object-fit: cover; }
#modal-about .ab-team-photo figcaption {
    position: absolute; left: 16px; bottom: 14px;
    padding: 8px 14px; border-radius: var(--e-r-pill);
    background: rgba(0, 0, 0, 0.66); border: 1px solid var(--e-line);
    font-size: var(--e-fs-xs); color: var(--e-bone);
}
#modal-about .ab-team-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#modal-about .ab-team-stats li {
    display: grid; grid-template-columns: calc(var(--e-fs-2xl) * 2.7) minmax(0, 1fr); gap: 2px 18px; align-items: center;
    padding: 20px 22px; border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: var(--e-coal);
    transition: border-color var(--e-t-std);
}
#modal-about .ab-team-stats li:hover { border-color: var(--e-line-strong); }
#modal-about .ab-team-stats b { grid-row: span 2; font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-2xl); line-height: 1; color: var(--e-ember); font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-about .ab-team-stats li > span { font-weight: 600; }
#modal-about .ab-team-stats small { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.45; }
@media (min-width: 900px) {
    #modal-about .ab-team-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
    #modal-about .ab-team-photo { aspect-ratio: auto; min-height: 100%; }
    #modal-about .ab-team-stats { grid-auto-rows: 1fr; }
}

/* ---------- credentials: swipe row on phones, grid from 640px -------------- */
#modal-about .ab-creds {
    list-style: none; margin: 0 calc(-1 * var(--e-gutter)); padding: 4px var(--e-gutter) 14px;
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--e-gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#modal-about .ab-creds::-webkit-scrollbar { display: none; }
#modal-about .ab-cred {
    flex: 0 0 min(80%, 300px); scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 12px; padding: 20px;
    border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: var(--e-coal);
    transition: transform var(--e-t-std) var(--e-ease-out), border-color var(--e-t-std), background var(--e-t-std);
}
#modal-about .ab-cred:hover { transform: translateY(-3px); border-color: var(--e-ember-45); background: var(--e-char); }
#modal-about .ab-cred-plate { position: relative; width: 100%; height: 132px; display: grid; place-items: center; padding: 10px 14px; margin-bottom: 4px; border: 0; border-radius: 12px; background: #fff; cursor: zoom-in; }
#modal-about .ab-cred-plate:focus-visible, #modal-about .ab-portrait-badge:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 3px; }
#modal-about .ab-zoom-ico { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 8, 0, 0.78); color: #fff; opacity: 0.8; transition: opacity var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out); }
#modal-about .ab-zoom-ico svg { width: 16px; height: 16px; }
#modal-about .ab-cred:hover .ab-zoom-ico { opacity: 1; transform: scale(1.08); }
#modal-about .ab-cred-plate img { max-height: 112px; width: auto; max-width: 100%; transition: transform var(--e-t-slow) var(--e-ease-out); }
#modal-about .ab-cred:hover .ab-cred-plate img { transform: scale(1.06); }
#modal-about .ab-cred h3 { font-size: 1.1rem; }
#modal-about .ab-cred p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }
#modal-about .ab-cred-tag { font-family: var(--e-display); font-size: var(--e-fs-xs); letter-spacing: 0.06em; color: var(--e-ember-hot); }
@media (min-width: 640px) {
    #modal-about .ab-creds { margin: 0; padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    #modal-about .ab-cred { flex: none; }
}
@media (min-width: 1024px) { #modal-about .ab-creds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- values (sticky split + accordion) ----------------------------- */
#modal-about .ab-values { display: grid; gap: 36px; }
#modal-about .ab-values-left .x-lede { margin-top: 18px; }
#modal-about .ab-vals { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--e-line); }
#modal-about .ab-val { border-bottom: 1px solid var(--e-line); }
#modal-about .ab-val h3 { margin: 0; font-size: inherit; line-height: inherit; }
#modal-about .ab-val-btn {
    width: 100%; min-height: 64px; display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 18px 0; border: 0; background: none; text-align: left; cursor: pointer;
    color: var(--e-smoke); font: 700 var(--e-fs-xl)/1.15 var(--e-display); letter-spacing: -0.015em;
    transition: color var(--e-t-quick);
}
#modal-about .ab-val-btn:hover, #modal-about .ab-val.is-open .ab-val-btn { color: var(--e-bone); }
#modal-about .ab-val-n { font: 500 var(--e-fs-xs) var(--e-body); letter-spacing: 0.08em; color: var(--e-dust); transition: color var(--e-t-quick); }
#modal-about .ab-val.is-open .ab-val-n { color: var(--e-ember); }
#modal-about .ab-val-t { display: inline-block; transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-about .ab-val-btn:hover .ab-val-t { transform: translateX(4px); }
#modal-about .ab-val-icon {
    position: relative; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--e-line-strong); color: var(--e-bone);
    transition: background var(--e-t-std), border-color var(--e-t-std), color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-about .ab-val-icon::before, #modal-about .ab-val-icon::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
    transition: transform var(--e-t-std) var(--e-ease-out);
}
#modal-about .ab-val-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
#modal-about .ab-val-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
#modal-about .ab-val-btn:hover .ab-val-icon { border-color: var(--e-ember-45); }
#modal-about .ab-val.is-open .ab-val-icon { background: var(--e-ember); border-color: transparent; color: #100800; transform: rotate(180deg); }
#modal-about .ab-val.is-open .ab-val-icon::after { transform: translate(-50%, -50%) scaleY(0); }
#modal-about .ab-val-panel {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows 420ms var(--e-ease-out), visibility 0s linear 420ms;
}
#modal-about .ab-val.is-open .ab-val-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 420ms var(--e-ease-out); }
#modal-about .ab-val-panel > div { overflow: hidden; min-height: 0; }
#modal-about .ab-val-panel p {
    padding: 0 0 24px calc(3ch + 16px); color: var(--e-smoke); max-width: 56ch; line-height: 1.6;
    opacity: 0; transform: translateY(-6px); transition: opacity 300ms var(--e-ease-out), transform 420ms var(--e-ease-out);
}
#modal-about .ab-val.is-open .ab-val-panel p { opacity: 1; transform: none; transition-delay: 80ms; }
@media (max-width: 479px) { #modal-about .ab-val-panel p { padding-left: 0; } }
@media (min-width: 960px) {
    #modal-about .ab-values { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
    #modal-about .ab-values-left { position: sticky; top: calc(var(--ab-top) + 8px); align-self: start; }
}

/* ---------- proof --------------------------------------------------------- */
#modal-about .ab-proof { display: grid; gap: 40px; }
#modal-about .ab-proof-copy .x-lede { margin-top: 18px; max-width: 56ch; }
#modal-about .ab-proof-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#modal-about .ab-browser {
    border-radius: var(--e-r-lg); overflow: hidden;
    border: 1px solid var(--e-line-strong);
    background: linear-gradient(160deg, var(--e-char), var(--e-coal));
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#modal-about .ab-browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--e-line); }
#modal-about .ab-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--e-ash); flex: none; }
#modal-about .ab-browser-url { margin-left: 8px; flex: 1; min-width: 0; padding: 7px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line); font-size: var(--e-fs-xs); color: var(--e-smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-about .ab-browser-body { padding: clamp(18px, 3vw, 28px); display: grid; }
#modal-about .ab-wire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#modal-about .ab-wire > div {
    display: grid; gap: 6px; justify-items: center; text-align: center;
    padding: 14px 8px; border-radius: 12px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.35);
}
#modal-about .ab-wire img { width: 32px; height: 32px; margin-bottom: 4px; }
#modal-about .ab-wire span { font-size: var(--e-fs-xs); font-weight: 600; color: var(--e-bone); }
#modal-about .ab-wire small { font-size: 0.68rem; color: var(--e-smoke); line-height: 1.3; }
#modal-about .ab-wire-join {
    position: relative; height: 34px; margin: 0 16.6%;
    border-left: 2px solid var(--e-ember-45); border-right: 2px solid var(--e-ember-45); border-bottom: 2px solid var(--e-ember-45);
    border-radius: 0 0 10px 10px;
}
#modal-about .ab-wire-join::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--e-ember-45); }
/* data pulses flowing from each service into the page */
#modal-about .ab-wire-join i {
    position: absolute; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    background: var(--e-ember-hot); box-shadow: 0 0 10px var(--e-ember);
    opacity: 0; animation: ab-pulse 2.6s var(--e-ease-std) infinite;
}
#modal-about .ab-wire-join i:nth-child(1) { left: -1px; }
#modal-about .ab-wire-join i:nth-child(2) { left: 50%; animation-delay: 0.85s; }
#modal-about .ab-wire-join i:nth-child(3) { left: calc(100% + 1px); animation-delay: 1.7s; }
@keyframes ab-pulse { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(36px); } }
#modal-about .ab-wire-page {
    margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 14px 16px; border-radius: 14px; border: 1px solid var(--e-ember-45); background: var(--e-ember-12);
}
#modal-about .ab-wire-page img { width: 40px; height: 40px; border-radius: 50%; }
#modal-about .ab-wire-page b { display: block; font-family: var(--e-display); font-size: 0.95rem; }
#modal-about .ab-wire-page small { display: block; color: var(--e-smoke); font-size: 0.72rem; line-height: 1.3; }
@media (min-width: 960px) { #modal-about .ab-proof { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: center; } }

/* ---------- cta ----------------------------------------------------------- */
#modal-about .x-cta-actions .x-btn { justify-self: start; }
@media (min-width: 900px) { #modal-about .x-cta-actions .x-btn { justify-self: end; } }
#modal-about #about-cta { padding-bottom: clamp(88px, 10vw, 150px); }
#modal-about #about-cta .x-cta { isolation: isolate; }
#modal-about #about-cta .ab-aurora { opacity: 0.4; border-radius: inherit; }

/* ---------- motion & input preferences ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #modal-about .ab-timeline { --ab-p: 1; }
    #modal-about .ab-timeline::after, #modal-about .ab-kpi > i { transition: none; }
    #modal-about .ab-portrait-frame, #modal-about .ab-portrait-frame img, #modal-about .ab-portrait-badge, #modal-about .ab-cred, #modal-about .ab-cred-plate img, #modal-about .ab-val-t { transition: none; }
    #modal-about .ab-glare { display: none; }
    #modal-about .ab-val-panel, #modal-about .ab-val.is-open .ab-val-panel, #modal-about .ab-val-panel p { transition: none; }
    #modal-about .ab-wire-join i { animation: none; opacity: 0; }
}
@media (hover: none) {
    #modal-about .ab-cred:hover, #modal-about .ab-cred:hover .ab-cred-plate img, #modal-about .ab-val-btn:hover .ab-val-t { transform: none; }
}

/* ---------- certificate lightbox ------------------------------------------ */
#modal-about .ab-lightbox {
    width: min(92vw, 880px); max-height: 90vh; padding: 12px; border: 1px solid var(--e-line-strong); border-radius: var(--e-r-md);
    background: var(--e-coal); color: var(--e-bone); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9); overflow: visible;
}
#modal-about .ab-lightbox[open] { animation: ab-lb-in 320ms var(--e-ease-out) both; }
#modal-about .ab-lightbox::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#modal-about .ab-lightbox img { display: block; width: 100%; height: auto; max-height: calc(90vh - 24px); object-fit: contain; border-radius: 10px; background: #fff; }
#modal-about .ab-lightbox-close {
    position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--e-line-strong); background: var(--e-char); color: var(--e-bone);
    transition: background var(--e-t-quick), color var(--e-t-quick);
}
#modal-about .ab-lightbox-close:hover { background: var(--e-ember); color: #100800; }
#modal-about .ab-lightbox-close svg { width: 18px; height: 18px; }
@keyframes ab-lb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 559px) { #modal-about .ab-lightbox-close { top: 6px; right: 6px; } }

/* tablet: the eight numbers in two rows of four */
@media (min-width: 700px) and (max-width: 959px) {
    #modal-about .ab-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #modal-about .ab-kpi:nth-child(odd) { border-right: 0; }
    #modal-about .ab-kpi:not(:nth-child(4n)) { border-right: 1px solid var(--e-line); }
    #modal-about .ab-kpi:not(:nth-last-child(-n+2)) { border-bottom: 0; }
    #modal-about .ab-kpi:nth-child(-n+4) { border-bottom: 1px solid var(--e-line); }
}
@media (prefers-reduced-motion: reduce) { #modal-about .ab-lightbox[open] { animation: none; } }


/* ===== ai-transformation.css ===== */
/* ==========================================================================
   AI TRANSFORMATION page (#modal-ai-transformation)
   `.ait-*` classes, scoped under the page id. Mobile-first. Only transform, opacity and
   (rarely) filter animate; every auto-changing text box reserves its tallest variant, so
   nothing on this page moves the layout while you scroll.
   ========================================================================== */

/* ---------- base ---------------------------------------------------------- */
#modal-ai-transformation {
    /* h1 32px phone -> 50px max, h2 24px phone -> 34px max */
    --ait-fs-h1: clamp(2rem, 1.15rem + 2.1vw, 3.1rem);
    --ait-fs-h2: clamp(1.5rem, 1.1rem + 1vw, 2.125rem);
    --ait-top: 84px; /* sticky offset under the page header (and the section strip, below) */
    --ait-card: linear-gradient(160deg, var(--e-char), var(--e-coal));
    --ait-ok: #3ddc84;
    --ait-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
    /* AI accent palette (this page only): models, pipelines, graphs and results */
    --ai-violet: #7c5cff;
    --ai-blue: #4f7cff;
    --ai-cyan: #22d3ee;
    --ai-magenta: #ff4fa3;
    --ai-violet-line: rgba(124, 92, 255, 0.45);
    --ai-cyan-line: rgba(34, 211, 238, 0.45);
    --ai-grad: linear-gradient(120deg, var(--ai-blue), var(--ai-violet) 50%, var(--ai-cyan));
    background: var(--e-black);
    color: var(--e-bone);
    font-family: var(--e-body);
    font-size: var(--e-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (min-width: 1100px) and (max-width: 1599px) { #modal-ai-transformation { --ait-top: 136px; } }
#modal-ai-transformation h1, #modal-ai-transformation h2, #modal-ai-transformation h3, #modal-ai-transformation h4 {
    font-family: var(--e-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08;
    margin: 0; color: var(--e-bone); text-wrap: balance;
}
#modal-ai-transformation h2 { font-size: var(--ait-fs-h2); line-height: 1.1; }
#modal-ai-transformation h3 { font-size: var(--e-fs-lg); }
#modal-ai-transformation h4 { font-size: var(--e-fs-md); }
#modal-ai-transformation p { margin: 0; }
#modal-ai-transformation ul, #modal-ai-transformation ol, #modal-ai-transformation dl { margin: 0; padding: 0; }
#modal-ai-transformation img { display: block; max-width: 100%; height: auto; }
#modal-ai-transformation a { color: inherit; }
#modal-ai-transformation button { font: inherit; color: inherit; }
#modal-ai-transformation ::selection { background: var(--e-ember); color: #000; }
#modal-ai-transformation .ait { display: block; }
#modal-ai-transformation .ait-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#modal-ai-transformation .ait-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* icon sprite: every <svg><use> on the page is a line icon */
#modal-ai-transformation svg:has(> use) { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* reserved text: the box keeps the height of its tallest variant */
#modal-ai-transformation .ait-rsv { display: grid !important; }
#modal-ai-transformation .ait-rsv > span { grid-area: 1 / 1; display: block; }
#modal-ai-transformation .ait-rsv-g { visibility: hidden; }
#modal-ai-transformation .ait-k, #modal-ai-transformation .ait-cv-k {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 0.66rem/1.2 var(--e-display); letter-spacing: 0.09em; text-transform: uppercase; color: var(--e-dust);
}
#modal-ai-transformation .ait-cv-k svg { width: 13px; height: 13px; color: var(--e-ember-hot); }

/* ---------- system chips and glyphs --------------------------------------- */
#modal-ai-transformation .ait-mark {
    display: inline-grid; place-items: center; flex: none;
    border-radius: 7px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--e-ember-45);
    font: 700 0.7rem var(--e-display); color: var(--e-ember-hot); line-height: 1;
}
/* generic glyphs: sys = a connected system, build = something we build, mobile = a phone app */
#modal-ai-transformation .ait-glyph, #modal-ai-transformation .ait-sys::before {
    --ait-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E");
}
#modal-ai-transformation [data-kind="build"].ait-glyph, #modal-ai-transformation .ait-sys[data-kind="build"]::before {
    --ait-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 4l-3 16'/%3E%3C/svg%3E");
}
#modal-ai-transformation [data-kind="mobile"].ait-glyph, #modal-ai-transformation .ait-sys[data-kind="mobile"]::before {
    --ait-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}
#modal-ai-transformation .ait-glyph { position: relative; display: inline-block; flex: none; border-radius: 7px; background: rgba(244, 239, 231, 0.06); border: 1px solid var(--e-line-strong); }
#modal-ai-transformation .ait-glyph::after { content: ''; position: absolute; inset: 22%; background: var(--e-smoke); -webkit-mask: var(--ait-glyph) center / contain no-repeat; mask: var(--ait-glyph) center / contain no-repeat; }
#modal-ai-transformation .ait-sys {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 7px;
    border-radius: 8px; border: 1px solid var(--e-line-strong); background: rgba(244, 239, 231, 0.05);
    font: 600 0.72rem/1 var(--e-body); color: var(--e-bone); white-space: nowrap;
}
#modal-ai-transformation .ait-sys::before { content: ''; width: 13px; height: 13px; flex: none; background: var(--e-ember-hot); -webkit-mask: var(--ait-glyph) center / contain no-repeat; mask: var(--ait-glyph) center / contain no-repeat; }

/* ---------- typed text (the ghost reserves the height) --------------------- */
#modal-ai-transformation .ait-type { position: relative; display: block; }
#modal-ai-transformation .ait-type-ghost { visibility: hidden; display: block; }
#modal-ai-transformation .ait-type-live { position: absolute; left: 0; top: 0; right: 0; }
#modal-ai-transformation .ait-type.is-typing .ait-type-live::after {
    content: ''; display: inline-block; width: 0.5em; height: 1.05em; margin-left: 2px; vertical-align: -0.18em;
    background: var(--e-ember-hot); border-radius: 1px; animation: ait-blink 0.9s steps(2, jump-none) infinite;
}
@keyframes ait-blink { 50% { opacity: 0; } }

/* ==========================================================================
   HERO
   ========================================================================== */
#modal-ai-transformation .ait-hero {
    position: relative; isolation: isolate; overflow: clip;
    display: grid; align-items: center;
    padding-block: clamp(36px, 6vh, 88px) clamp(48px, 7vh, 88px);
}
@media (min-width: 1024px) { #modal-ai-transformation .ait-hero { min-height: calc(100svh - 68px); } }
#modal-ai-transformation .ait-hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(55% 50% at 88% 8%, var(--e-ember-12) 0%, transparent 70%), linear-gradient(180deg, #000 0%, var(--e-coal) 55%, #000 100%);
}
#modal-ai-transformation .ait-hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(var(--e-line) 1px, transparent 1px), linear-gradient(90deg, var(--e-line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(70% 70% at 75% 30%, #000 0%, transparent 100%); mask-image: radial-gradient(70% 70% at 75% 30%, #000 0%, transparent 100%);
    opacity: 0.5;
}
#modal-ai-transformation .ait-hero-grid { display: grid; gap: 40px; }
@media (min-width: 1180px) { #modal-ai-transformation .ait-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(40px, 5vw, 80px); } }
#modal-ai-transformation .ait-hero-copy { max-width: 700px; }
#modal-ai-transformation .ait-hero-copy .x-kicker { margin-bottom: 18px; }
#modal-ai-transformation .ait-hero-title { font-size: var(--ait-fs-h1); line-height: 1.03; letter-spacing: -0.03em; margin: 0 0 22px; }
#modal-ai-transformation .ait-word { color: var(--e-ember); white-space: nowrap; position: relative; }
#modal-ai-transformation .ait-word::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0.03em; height: 0.07em;
    background: var(--e-ember); border-radius: 2px; transform: scaleX(0); transform-origin: left;
}
#modal-ai-transformation .ait-hero-title.is-in .ait-word::after { animation: ait-underline 900ms var(--e-ease-out) 700ms forwards; }
@keyframes ait-underline { to { transform: scaleX(1); } }
#modal-ai-transformation .ait-hero-lede { font-size: var(--e-fs-lg); line-height: 1.55; color: var(--e-smoke); max-width: 56ch; margin-bottom: 30px; }
#modal-ai-transformation .ait-hero-lede strong { color: var(--e-bone); font-weight: 500; }
#modal-ai-transformation .ait-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
#modal-ai-transformation .ait-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: var(--e-fs-sm); color: var(--e-smoke); }
#modal-ai-transformation .ait-hero-facts li { display: inline-flex; align-items: baseline; gap: 6px; }
#modal-ai-transformation .ait-hero-facts li + li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--e-ember); align-self: center; margin-right: 10px; }
#modal-ai-transformation .ait-hero-facts b { font-family: var(--e-display); color: var(--e-bone); font-weight: 700; }
@media (max-width: 480px) {
    #modal-ai-transformation .ait-hero-actions .x-btn { width: 100%; }
    #modal-ai-transformation .ait-hero-facts { display: grid; gap: 8px; }
    #modal-ai-transformation .ait-hero-facts li + li::before { display: none; }
}

/* hero "AI core" (EASFX point-sphere): behind the copy on phones, behind the console on desktop */
#modal-ai-transformation .ait-core {
    position: absolute; z-index: -1; pointer-events: none;
    left: 0; right: 0; top: 0; width: 100%; height: min(520px, 60%);
    --fx-cx: 0.82; --fx-cy: 0.3; --fx-radius: 0.5;
    opacity: 0.6;
}
#modal-ai-transformation .ait-core-veil {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.65) 60%);
}
@media (min-width: 1024px) {
    #modal-ai-transformation .ait-core {
        left: auto; top: 0; height: 100%;
        right: max(0px, calc((100% - var(--e-max)) / 2 - 60px));
        width: min(48vw, 700px);
        --fx-cx: 0.5; --fx-cy: 0.5; --fx-radius: 0.44;
        opacity: 0.9;
        -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 50%, #000 70%, transparent 100%);
    }
    #modal-ai-transformation .ait-core-veil { display: none; }
}
@media (prefers-reduced-motion: reduce) { #modal-ai-transformation .ait-core { opacity: 0.45; } }

/* ---------- live agent console -------------------------------------------- */
#modal-ai-transformation .ait-hero-side { position: relative; width: 100%; max-width: 480px; }
@media (min-width: 1180px) { #modal-ai-transformation .ait-hero-side { justify-self: end; } }
#modal-ai-transformation .ait-con {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 22px; border: 1px solid var(--e-line-strong);
    background: linear-gradient(165deg, rgba(28, 22, 17, 0.9), rgba(9, 8, 7, 0.94));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 107, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font-size: 0.8rem; line-height: 1.5;
}
#modal-ai-transformation .ait-con::before {
    content: ''; position: absolute; right: -80px; top: -120px; width: 280px; height: 280px; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 107, 0, 0.2), transparent); pointer-events: none;
}
#modal-ai-transformation .ait-con-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--e-line); }
#modal-ai-transformation .ait-con-dots { display: inline-flex; gap: 5px; }
#modal-ai-transformation .ait-con-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 239, 231, 0.16); }
#modal-ai-transformation .ait-con-dots i:first-child { background: rgba(255, 107, 0, 0.7); }
#modal-ai-transformation .ait-con-title { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
#modal-ai-transformation .ait-con-title b { font: 700 0.84rem var(--e-display); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-con-title small { color: var(--e-dust); font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-con-live { display: inline-flex; align-items: center; gap: 7px; font: 600 0.64rem var(--e-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ait-ok); }
#modal-ai-transformation .ait-con-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ait-ok); }
#modal-ai-transformation .ait-con.is-vis .ait-con-live i { animation: ait-ping 1.8s var(--e-ease-out) infinite; }
@keyframes ait-ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
#modal-ai-transformation .ait-con-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 16px 0; }
#modal-ai-transformation .ait-con-steps li { display: grid; gap: 6px; font: 600 0.6rem var(--e-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-dust); transition: color 0.3s; }
#modal-ai-transformation .ait-con-steps li::before { content: ''; height: 3px; border-radius: 3px; background: rgba(244, 239, 231, 0.09); background-image: linear-gradient(90deg, var(--e-ember), var(--e-ember-hot)); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 0.6s var(--e-ease-out); }
#modal-ai-transformation .ait-con-steps li.is-on, #modal-ai-transformation .ait-con-steps li.is-past { color: var(--e-bone); }
#modal-ai-transformation .ait-con-steps li.is-on::before, #modal-ai-transformation .ait-con-steps li.is-past::before { background-size: 100% 100%; }
#modal-ai-transformation .ait-con-steps li.is-on { color: var(--e-ember-hot); }
#modal-ai-transformation .ait-con-body { display: grid; gap: 12px; padding: 14px 16px 16px; transition: opacity 0.35s var(--e-ease-std); }
#modal-ai-transformation .ait-con-trig {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 9px 12px 9px 9px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38);
    opacity: 0.35; transform: translateY(4px); transition: opacity 0.4s, transform 0.5s var(--e-ease-out), border-color 0.4s;
}
#modal-ai-transformation .ait-con.is-trig .ait-con-trig { opacity: 1; transform: none; border-color: var(--e-ember-25); }
#modal-ai-transformation .ait-con-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--e-ember-12); border: 1px solid var(--e-ember-25); color: var(--e-ember-hot); }
#modal-ai-transformation .ait-con-ic svg { width: 19px; height: 19px; }
#modal-ai-transformation .ait-con-trig-txt { display: grid; min-width: 0; line-height: 1.3; }
#modal-ai-transformation .ait-con-trig-txt b { font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-con-trig-txt small { color: var(--e-dust); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-con-trig em { font: 500 0.68rem var(--ait-mono); font-style: normal; color: var(--e-dust); }
#modal-ai-transformation .ait-con-k { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 600 0.72rem var(--e-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-ember-hot); }
#modal-ai-transformation .ait-con-k svg { width: 12px; height: 12px; }
#modal-ai-transformation .ait-con-think p { color: var(--e-smoke); font-size: 0.8rem; }
#modal-ai-transformation .ait-con-tools { list-style: none; display: grid; gap: 5px; }
#modal-ai-transformation .ait-tool {
    display: grid; grid-template-columns: 14px auto minmax(0, 1fr); align-items: center; gap: 9px;
    padding: 5px 10px; border-radius: 9px; border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.025);
    opacity: 0.3; transition: opacity 0.3s, border-color 0.3s, background 0.3s;
}
#modal-ai-transformation .ait-tool code { font: 500 0.7rem var(--ait-mono); color: var(--e-bone); white-space: nowrap; }
#modal-ai-transformation .ait-tool small { font: 0.68rem var(--ait-mono); color: var(--e-dust); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-tool-st { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--e-dust); box-sizing: border-box; }
#modal-ai-transformation .ait-tool.is-run { opacity: 1; border-color: var(--e-ember-25); background: var(--e-ember-12); }
#modal-ai-transformation .ait-tool.is-run .ait-tool-st { border-color: var(--e-ember-hot); border-top-color: transparent; animation: ait-spin 0.7s linear infinite; }
@keyframes ait-spin { to { transform: rotate(360deg); } }
#modal-ai-transformation .ait-tool.is-ok { opacity: 1; }
#modal-ai-transformation .ait-tool.is-ok .ait-tool-st {
    border: 0; background: var(--ait-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041a0c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 8px no-repeat;
}
#modal-ai-transformation .ait-con-out {
    padding: 10px 12px; border-radius: 14px; border: 1px solid var(--e-ember-25);
    background: linear-gradient(160deg, rgba(255, 107, 0, 0.09), rgba(255, 107, 0, 0.02));
    opacity: 0.35; transition: opacity 0.4s;
}
#modal-ai-transformation .ait-con.is-out .ait-con-out { opacity: 1; }
#modal-ai-transformation .ait-con-out p { color: var(--e-bone); font-size: 0.8rem; }
#modal-ai-transformation .ait-con-foot {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.35s var(--e-ease-std);
}
#modal-ai-transformation .ait-con-need { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--e-smoke); font-size: 0.76rem; opacity: 0.4; transition: opacity 0.3s; }
#modal-ai-transformation .ait-con-need > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-con-need svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(244, 239, 231, 0.08); color: var(--e-bone); box-sizing: border-box; }
#modal-ai-transformation .ait-con-btn {
    flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
    background: rgba(244, 239, 231, 0.08); color: var(--e-smoke); font: 600 0.76rem var(--e-body);
    transition: background 0.3s, color 0.3s, transform 0.18s var(--e-ease-out), box-shadow 0.3s, opacity 0.3s;
}
#modal-ai-transformation .ait-con.is-need .ait-con-need { opacity: 1; }
#modal-ai-transformation .ait-con.is-need .ait-con-btn { background: var(--e-ember); color: #100800; animation: ait-btnpulse 1.2s var(--e-ease-out) infinite; }
@keyframes ait-btnpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(255, 107, 0, 0); } }
#modal-ai-transformation .ait-con.is-press .ait-con-btn { transform: scale(0.9); }
#modal-ai-transformation .ait-con-done {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px;
    font-weight: 600; font-size: 0.8rem; color: var(--e-bone);
    opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.35s, transform 0.45s var(--e-ease-out);
}
#modal-ai-transformation .ait-con-done > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-con-done svg { width: 22px; height: 22px; color: var(--ait-ok); }
#modal-ai-transformation .ait-con-done small { margin-left: auto; flex: none; padding: 4px 9px; border-radius: 999px; background: rgba(61, 220, 132, 0.12); border: 1px solid rgba(61, 220, 132, 0.3); color: var(--ait-ok); font-size: 0.68rem; font-weight: 600; }
#modal-ai-transformation .ait-con.is-done .ait-con-done { opacity: 1; transform: none; }
#modal-ai-transformation .ait-con.is-done .ait-con-need, #modal-ai-transformation .ait-con.is-done .ait-con-btn { opacity: 0; }
#modal-ai-transformation .ait-con.is-leave .ait-con-body, #modal-ai-transformation .ait-con.is-leave .ait-con-foot { opacity: 0; }

/* ==========================================================================
   AI PROJECT BUILDER
   ========================================================================== */
#modal-ai-transformation .ait-finder-section { background: linear-gradient(180deg, var(--e-black), var(--e-coal) 40%, var(--e-coal) 70%, var(--e-black)); }
#modal-ai-transformation .ait-builder {
    position: relative; isolation: isolate;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: radial-gradient(90% 60% at 100% 0%, rgba(255, 107, 0, 0.07), transparent 60%), var(--ait-card);
    padding: clamp(12px, 2.2vw, 28px);
    box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
#modal-ai-transformation .ait-step-label { display: flex; align-items: center; gap: 10px; font: 600 var(--e-fs-md) var(--e-body); margin: 2px 0 14px; }
#modal-ai-transformation .ait-step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--e-ember); color: #100800; font: 700 0.8rem var(--e-display); flex: none; }

/* step nav (phones and tablets: the three steps are slides in one card) */
#modal-ai-transformation .ait-bnav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
#modal-ai-transformation .ait-bnav-step {
    display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0;
    padding: 7px 8px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left;
    transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}
#modal-ai-transformation .ait-bnav-step[aria-disabled="true"] { opacity: 0.45; cursor: default; }
#modal-ai-transformation .ait-bnav-step[aria-current="step"] { border-color: var(--e-ember-45); background: var(--e-ember-12); }
#modal-ai-transformation .ait-bnav-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--e-line-strong); font: 700 0.7rem var(--e-display); color: var(--e-smoke); }
#modal-ai-transformation .ait-bnav-step.is-done .ait-bnav-n, #modal-ai-transformation .ait-bnav-step[aria-current="step"] .ait-bnav-n { background: var(--e-ember); border-color: var(--e-ember); color: #100800; }
#modal-ai-transformation .ait-bnav-txt { display: grid; min-width: 0; line-height: 1.2; }
#modal-ai-transformation .ait-bnav-txt small { font-size: 0.62rem; color: var(--e-dust); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
#modal-ai-transformation .ait-bnav-txt b { font-size: 0.76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-bnav-sep { flex: none; width: 10px; height: 2px; border-radius: 2px; background: var(--e-line-strong); }
@media (max-width: 440px) {
    #modal-ai-transformation .ait-bnav { gap: 4px; }
    #modal-ai-transformation .ait-bnav-step { padding: 7px 6px; gap: 6px; }
    #modal-ai-transformation .ait-bnav-txt small { display: none; }
    #modal-ai-transformation .ait-bnav-txt b { font-size: 0.74rem; }
    #modal-ai-transformation .ait-bnav-sep { width: 6px; }
}

/* phones and tablets: slides */
@media (max-width: 959px) {
    #modal-ai-transformation .ait-bpanes { position: relative; overflow: clip; overflow-clip-margin: 6px; }
    #modal-ai-transformation .ait-bpane {
        position: absolute; left: 0; right: 0; top: 0;
        visibility: hidden; opacity: 0; transform: translateX(32px); pointer-events: none;
        transition: opacity 0.3s var(--e-ease-std), transform 0.45s var(--e-ease-out), visibility 0s linear 0.45s;
    }
    #modal-ai-transformation .ait-builder[data-step="1"] [data-pane="1"],
    #modal-ai-transformation .ait-builder[data-step="2"] [data-pane="2"],
    #modal-ai-transformation .ait-builder[data-step="3"] [data-pane="3"] {
        position: relative; visibility: visible; opacity: 1; transform: none; pointer-events: auto;
        transition: opacity 0.4s var(--e-ease-std) 0.06s, transform 0.5s var(--e-ease-out) 0.06s, visibility 0s;
    }
    #modal-ai-transformation .ait-builder[data-step="2"] [data-pane="1"],
    #modal-ai-transformation .ait-builder[data-step="3"] [data-pane="1"],
    #modal-ai-transformation .ait-builder[data-step="3"] [data-pane="2"] { transform: translateX(-32px); }
}
/* small laptops (960-1179px): both steps stacked on the left, the result canvas sticky on the right */
@media (min-width: 960px) {
    #modal-ai-transformation .ait-bnav { display: none; }
    #modal-ai-transformation .ait-bpanes {
        display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
        gap: 30px clamp(20px, 2.4vw, 32px); align-items: start;
    }
    #modal-ai-transformation .ait-bpane { position: relative; }
    #modal-ai-transformation .ait-bpane-ind { grid-column: 1; grid-row: 1; }
    #modal-ai-transformation .ait-bpane-pain { grid-column: 1; grid-row: 2; }
    /* the steps are visibly connected: a flow line from step 1 down into step 2 */
    #modal-ai-transformation .ait-bpane-ind::after {
        content: ''; position: absolute; left: 12px; bottom: -28px; width: 2px; height: 24px; border-radius: 2px;
        background: linear-gradient(180deg, var(--e-ember), var(--ai-violet));
    }
    #modal-ai-transformation .ait-canvas {
        grid-column: 2; grid-row: 1 / span 2;
        position: sticky; top: var(--ait-top);
        max-height: calc(100vh - var(--ait-top) - 16px); max-height: calc(100dvh - var(--ait-top) - 16px);
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--e-line-strong) transparent;
    }
}

/* laptops (1180px+): three connected columns, step 1 -> step 2 -> result, all on one screen */
@media (min-width: 1180px) {
    #modal-ai-transformation .ait-bpanes {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 2fr); grid-template-rows: auto;
        gap: 0 44px;
    }
    #modal-ai-transformation .ait-bpane-pain { grid-column: 2; grid-row: 1; }
    #modal-ai-transformation .ait-canvas { grid-column: 3; grid-row: 1; }
    /* connector between the columns: a gradient disc with a chevron, straddling the gap */
    #modal-ai-transformation .ait-bpane-ind::after, #modal-ai-transformation .ait-bpane-pain::after {
        content: ''; position: absolute; left: auto; bottom: auto; top: 3px; right: -34px; width: 24px; height: 24px; border-radius: 50%;
        background: linear-gradient(135deg, var(--e-ember), var(--ai-violet));
        box-shadow: 0 0 18px rgba(124, 92, 255, 0.6);
    }
    #modal-ai-transformation .ait-bpane-ind::before, #modal-ai-transformation .ait-bpane-pain::before {
        content: ''; position: absolute; z-index: 1; top: 11px; right: -25px; width: 7px; height: 7px;
        border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); pointer-events: none;
    }
    /* industries become compact icon rows in two columns */
    #modal-ai-transformation .ait-bpanes .ait-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    #modal-ai-transformation .ait-bpanes .ait-tile { flex-direction: row; justify-content: flex-start; min-height: 40px; padding: 7px 10px; gap: 10px; border-radius: 12px; text-align: left; }
    #modal-ai-transformation .ait-bpanes .ait-tile span { font-size: 0.78rem; }
    #modal-ai-transformation .ait-bpanes .ait-tile svg { width: 19px; height: 19px; }
    #modal-ai-transformation .ait-bpanes .ait-tile::after { top: 50%; right: 8px; margin-top: -8px; }
    #modal-ai-transformation .ait-bpanes .ait-probs { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    #modal-ai-transformation .ait-prob { min-height: 60px; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 9px 11px; }
    #modal-ai-transformation .ait-prob-ic { width: 36px; height: 36px; }
    #modal-ai-transformation .ait-prob-txt b { font-size: 0.84rem; }
}

/* step headers: "Step 1 of 2" and the nudge that says what to do next */
#modal-ai-transformation .ait-step-head { display: grid; gap: 8px; margin-bottom: 14px; }
#modal-ai-transformation .ait-step-head .ait-step-label { margin: 0; }
#modal-ai-transformation .ait-step-t { display: grid; line-height: 1.2; }
#modal-ai-transformation .ait-step-t small { font: 600 0.62rem var(--e-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ai-cyan); }
#modal-ai-transformation .ait-step-n svg { width: 14px; height: 14px; stroke-width: 2; }
#modal-ai-transformation .ait-nudge {
    display: none; align-items: center; gap: 8px; justify-self: start;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ai-violet-line);
    background: linear-gradient(100deg, rgba(124, 92, 255, 0.24), rgba(34, 211, 238, 0.1));
    color: #fff; font-size: 0.78rem; font-weight: 600;
    box-shadow: 0 8px 28px -10px rgba(124, 92, 255, 0.8);
}
#modal-ai-transformation .ait-nudge i { width: 8px; height: 8px; border-radius: 50%; background: var(--ai-cyan); animation: ait-ping-c 1.4s var(--e-ease-out) infinite; }
@keyframes ait-ping-c { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6); } 100% { box-shadow: 0 0 0 9px rgba(34, 211, 238, 0); } }
#modal-ai-transformation .ait-nudge svg { width: 15px; height: 15px; stroke-width: 2.2; transform: rotate(90deg); animation: ait-bob-y 1.1s ease-in-out infinite; }
@keyframes ait-bob-y { 50% { translate: 0 3px; } }
@media (min-width: 1180px) { #modal-ai-transformation .ait-nudge svg { transform: none; animation-name: ait-bob-x; } }
@keyframes ait-bob-x { 50% { translate: 3px 0; } }
#modal-ai-transformation .ait-builder.needs-pain #ait-nudge-2, #modal-ai-transformation .ait-builder.needs-ind #ait-nudge-1 { display: inline-flex; animation: ait-in 0.5s var(--e-ease-out); }
/* the step that still needs a pick breathes with a violet ring, its cards shimmer in a wave */
#modal-ai-transformation .ait-bpane-pain > .ait-probs, #modal-ai-transformation .ait-bpane-ind > .ait-tiles { position: relative; }
#modal-ai-transformation .ait-builder.needs-pain .ait-bpane-pain > .ait-probs::before,
#modal-ai-transformation .ait-builder.needs-ind .ait-bpane-ind > .ait-tiles::before {
    content: ''; position: absolute; inset: -5px; border-radius: 20px; pointer-events: none;
    border: 1.5px solid var(--ai-violet);
    animation: ait-breathe 1.8s ease-in-out infinite;
}
@keyframes ait-breathe { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.45), inset 0 0 30px -12px rgba(124, 92, 255, 0.7); } 50% { opacity: 0.55; box-shadow: 0 0 0 8px rgba(124, 92, 255, 0), inset 0 0 30px -12px rgba(124, 92, 255, 0.3); } }
#modal-ai-transformation .ait-builder.needs-pain .ait-prob:not([aria-checked="true"]) .ait-prob-ic { animation: ait-wave 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes ait-wave { 0%, 60%, 100% { border-color: var(--e-line-strong); color: var(--e-bone); } 25% { border-color: var(--ai-cyan); color: var(--ai-cyan); box-shadow: 0 0 16px -4px rgba(34, 211, 238, 0.7); } }
#modal-ai-transformation .ait-bpane.is-nudged > .ait-step-head, #modal-ai-transformation .ait-bpane.is-nudged > .ait-probs, #modal-ai-transformation .ait-bpane.is-nudged > .ait-tiles { animation: ait-nudged 0.9s var(--e-ease-out); }
@keyframes ait-nudged { 0% { transform: none; } 25% { transform: translateY(-6px); } 55% { transform: translateY(2px); } 100% { transform: none; } }
/* result header + badge (Example / Preview / Your project) */
#modal-ai-transformation .ait-cv-label { margin: 0; }
#modal-ai-transformation .ait-cv-label .ait-step-n { background: linear-gradient(135deg, var(--ai-violet), var(--ai-cyan)); color: #fff; }
#modal-ai-transformation .ait-cv-badge {
    margin-left: auto; padding: 4px 10px; border-radius: 999px; font: 700 0.62rem/1.3 var(--e-display); letter-spacing: 0.1em; text-transform: uppercase;
    color: #041a1f; background: var(--ai-cyan); box-shadow: 0 0 18px -4px rgba(34, 211, 238, 0.8);
}
#modal-ai-transformation .ait-canvas.is-preview .ait-cv-badge { color: #fff; background: var(--ai-violet); box-shadow: 0 0 18px -4px rgba(124, 92, 255, 0.9); }
#modal-ai-transformation .ait-canvas:not(.is-example):not(.is-preview) .ait-cv-badge { color: #041a0c; background: var(--ait-ok); box-shadow: 0 0 18px -4px rgba(61, 220, 132, 0.8); }

/* industry tiles */
#modal-ai-transformation .ait-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { #modal-ai-transformation .ait-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#modal-ai-transformation .ait-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 82px; padding: 12px 6px 10px; border-radius: 16px;
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.32); color: var(--e-smoke);
    cursor: pointer; text-align: center;
    transition: color 0.2s, border-color 0.2s, background 0.25s, transform 0.35s var(--e-ease-out), box-shadow 0.35s;
}
#modal-ai-transformation .ait-tile svg { width: 26px; height: 26px; transition: transform 0.4s var(--e-ease-out), color 0.2s; }
#modal-ai-transformation .ait-tile span { font-size: 0.74rem; font-weight: 600; line-height: 1.2; }
#modal-ai-transformation .ait-tile::after {
    content: ''; position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--e-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100800' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px no-repeat;
    transform: scale(0); transition: transform 0.35s var(--e-ease-out);
}
@media (hover: hover) {
    #modal-ai-transformation .ait-tile:hover { color: var(--e-bone); border-color: var(--e-line-strong); background: rgba(244, 239, 231, 0.045); transform: translateY(-2px); }
    #modal-ai-transformation .ait-tile:hover svg { transform: translateY(-2px) scale(1.08); color: var(--e-ember-hot); }
}
#modal-ai-transformation .ait-tile[aria-checked="true"] {
    color: var(--e-bone); border-color: var(--e-ember);
    background: linear-gradient(170deg, rgba(255, 107, 0, 0.2), rgba(255, 107, 0, 0.05));
    box-shadow: 0 14px 30px -18px rgba(255, 107, 0, 0.8), inset 0 0 0 1px rgba(255, 107, 0, 0.35);
}
#modal-ai-transformation .ait-tile[aria-checked="true"] svg { color: var(--e-ember-hot); }
#modal-ai-transformation .ait-tile[aria-checked="true"]::after { transform: scale(1); }
#modal-ai-transformation .ait-tile.is-pop { animation: ait-pop 0.5s var(--e-ease-out); }
#modal-ai-transformation .ait-tile.is-pop svg, #modal-ai-transformation .ait-prob.is-pop svg { animation: ait-draw 0.8s var(--e-ease-out); }
@keyframes ait-pop { 0% { transform: scale(1); } 35% { transform: scale(0.94); } 70% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes ait-draw { from { stroke-dasharray: 70; stroke-dashoffset: 70; } to { stroke-dasharray: 70; stroke-dashoffset: 0; } }

/* problem cards */
#modal-ai-transformation .ait-probs { display: grid; gap: 8px; }
@media (min-width: 480px) { #modal-ai-transformation .ait-probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#modal-ai-transformation .ait-prob {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px;
    min-height: 64px; padding: 10px 12px; border-radius: 16px;
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.32); color: var(--e-smoke); cursor: pointer; text-align: left;
    transition: color 0.2s, border-color 0.2s, background 0.25s, transform 0.35s var(--e-ease-out), box-shadow 0.35s;
}
#modal-ai-transformation .ait-prob-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--e-line-strong); background: rgba(244, 239, 231, 0.04); color: var(--e-bone); transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.4s var(--e-ease-out); }
#modal-ai-transformation .ait-prob-ic svg { width: 21px; height: 21px; }
#modal-ai-transformation .ait-prob-txt { display: grid; gap: 1px; line-height: 1.25; }
#modal-ai-transformation .ait-prob-txt b { font-size: 0.86rem; font-weight: 600; color: var(--e-bone); }
#modal-ai-transformation .ait-prob-txt small { font-size: 0.72rem; color: var(--e-dust); }
@media (hover: hover) {
    #modal-ai-transformation .ait-prob:hover { border-color: var(--e-line-strong); background: rgba(244, 239, 231, 0.045); transform: translateY(-2px); }
    #modal-ai-transformation .ait-prob:hover .ait-prob-ic { transform: rotate(-6deg) scale(1.06); border-color: var(--e-ember-45); color: var(--e-ember-hot); }
}
#modal-ai-transformation .ait-prob[aria-checked="true"] {
    border-color: var(--e-ember); background: linear-gradient(100deg, rgba(255, 107, 0, 0.18), rgba(255, 107, 0, 0.04));
    box-shadow: 0 14px 30px -18px rgba(255, 107, 0, 0.8), inset 0 0 0 1px rgba(255, 107, 0, 0.35);
}
#modal-ai-transformation .ait-prob[aria-checked="true"] .ait-prob-ic { background: var(--e-ember); border-color: var(--e-ember); color: #100800; }
#modal-ai-transformation .ait-prob[aria-checked="true"] small { color: var(--e-smoke); }
#modal-ai-transformation .ait-prob.is-pop { animation: ait-pop 0.5s var(--e-ease-out); }

/* ---------- result canvas ------------------------------------------------- */
#modal-ai-transformation .ait-canvas {
    display: grid; gap: 14px; align-content: start;
    border-radius: 22px; border: 1px solid var(--e-line-strong);
    background: radial-gradient(120% 70% at 100% 0%, rgba(255, 107, 0, 0.11), transparent 55%), linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.4));
    padding: clamp(14px, 1.6vw, 22px);
    container-type: inline-size;
    transition: border-color 0.4s;
}
#modal-ai-transformation .ait-canvas:focus { outline: none; }
#modal-ai-transformation .ait-canvas:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 3px; }
#modal-ai-transformation .ait-canvas.is-flash { animation: ait-flash 0.9s var(--e-ease-out); }
@keyframes ait-flash { 0% { border-color: var(--e-ember); box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.45); } 100% { border-color: var(--e-line-strong); box-shadow: 0 0 0 14px rgba(255, 107, 0, 0); } }
#modal-ai-transformation .ait-cv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
#modal-ai-transformation .ait-cv-eyebrow { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 0.76rem; font-weight: 500; color: var(--e-smoke); }
#modal-ai-transformation .ait-cv-eyebrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-ai-transformation .ait-cv-eyebrow i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--e-dust); transition: background 0.3s; }
#modal-ai-transformation .ait-canvas.is-live .ait-cv-eyebrow i { background: var(--e-ember); }
#modal-ai-transformation .ait-canvas.is-live.is-vis .ait-cv-eyebrow i { animation: ait-ping-e 2s var(--e-ease-out) infinite; }
@keyframes ait-ping-e { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.6); } 100% { box-shadow: 0 0 0 9px rgba(255, 107, 0, 0); } }
#modal-ai-transformation .ait-cv-pattern {
    flex: none; max-width: 55%; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--e-line-strong);
    font: 600 0.66rem/1.3 var(--e-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-dust);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#modal-ai-transformation .ait-canvas.is-live .ait-cv-pattern { border-color: var(--e-ember-45); color: var(--e-ember-hot); }
#modal-ai-transformation .ait-cv-title { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.32rem); line-height: 1.22; min-height: 2.44em; }
#modal-ai-transformation .ait-canvas.has-hint .ait-cv-title { color: var(--e-ember-hot); }

/* ---------- pipeline (builder + patterns) --------------------------------- */
#modal-ai-transformation .ait-pipe { position: relative; isolation: isolate; }
#modal-ai-transformation .ait-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
#modal-ai-transformation .ait-nodes { position: relative; z-index: 1; list-style: none; display: grid; gap: 18px; }
#modal-ai-transformation .ait-node {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic k" "ic txt"; column-gap: 14px; align-items: center;
    transition: opacity 0.4s var(--e-ease-std);
}
#modal-ai-transformation .ait-node-ic {
    grid-area: ic; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    border: 1px solid var(--e-line-strong); background: #100d0a; color: var(--e-bone);
    transition: border-color 0.35s, background 0.35s, color 0.35s, box-shadow 0.35s, transform 0.35s var(--e-ease-out);
}
#modal-ai-transformation .ait-node-ic svg { width: 21px; height: 21px; }
#modal-ai-transformation .ait-node-k { grid-area: k; align-self: end; font: 600 0.7rem/1.3 var(--e-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-dust); }
#modal-ai-transformation .ait-node.is-opt .ait-node-k::after { content: ' · if needed'; }
#modal-ai-transformation .ait-node-txt { grid-area: txt; display: grid; line-height: 1.3; min-width: 0; }
#modal-ai-transformation .ait-node-txt b { font-size: 0.86rem; font-weight: 600; color: var(--e-bone); }
#modal-ai-transformation .ait-node-txt small { font-size: 0.74rem; color: var(--e-dust); }
#modal-ai-transformation .ait-node.is-ai .ait-node-ic { border-color: var(--e-ember); color: var(--e-ember-hot); background: radial-gradient(circle at 50% 35%, rgba(255, 107, 0, 0.32), #140a03 75%); box-shadow: 0 0 26px -6px rgba(255, 107, 0, 0.7); }
#modal-ai-transformation .ait-node.is-human .ait-node-ic { border-color: rgba(244, 239, 231, 0.4); }
#modal-ai-transformation .ait-node.is-out .ait-node-ic { border-color: rgba(61, 220, 132, 0.45); color: var(--ait-ok); background: radial-gradient(circle at 50% 35%, rgba(61, 220, 132, 0.16), #0a0f0b 75%); }
#modal-ai-transformation .ait-node.is-ghost { opacity: 0.5; }
#modal-ai-transformation .ait-node.is-ghost .ait-node-ic { border-style: dashed; box-shadow: none; }
#modal-ai-transformation .ait-node.is-skip .ait-node-ic { border-style: dashed; border-color: var(--e-line-strong); color: var(--e-dust); background: #0d0b09; }
#modal-ai-transformation .ait-node.is-skip .ait-node-txt b { color: var(--e-smoke); }
#modal-ai-transformation .ait-node.is-hit .ait-node-ic { animation: ait-hit 0.8s var(--e-ease-out); }
@keyframes ait-hit { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 140, 58, 0.8); } 30% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(255, 140, 58, 0); } }
#modal-ai-transformation .ait-canvas.is-live.is-vis .ait-node.is-ai .ait-node-ic::after,
#modal-ai-transformation .ait-pat-stage.is-vis .ait-node.is-ai.is-lit .ait-node-ic::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--e-ember);
    animation: ait-ring 2.2s var(--e-ease-out) infinite; pointer-events: none;
}
@keyframes ait-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
/* horizontal flow when the canvas is wide enough */
@container (min-width: 470px) {
    #modal-ai-transformation .ait-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    #modal-ai-transformation .ait-node { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "k" "txt"; justify-items: center; text-align: center; row-gap: 6px; align-items: start; }
    #modal-ai-transformation .ait-node-ic { width: 48px; height: 48px; margin-bottom: 4px; }
    #modal-ai-transformation .ait-node-ic svg { width: 22px; height: 22px; }
    #modal-ai-transformation .ait-node-txt { justify-items: center; }
    #modal-ai-transformation .ait-canvas .ait-node-txt { min-height: 4.9em; align-content: start; }
    #modal-ai-transformation .ait-node.is-opt .ait-node-k::after { content: '?'; }
    #modal-ai-transformation .ait-node-txt small { margin-top: 2px; }
}
/* wires */
#modal-ai-transformation .ait-wire-base { fill: none; stroke: rgba(244, 239, 231, 0.16); stroke-width: 1.6; transition: stroke 0.4s; }
#modal-ai-transformation .ait-wire-flow { display: none; }
#modal-ai-transformation .is-live .ait-wire-base, #modal-ai-transformation .ait-pat-stage .ait-wire-base, #modal-ai-transformation .ait-router .ait-wire-base { stroke: rgba(255, 107, 0, 0.3); }
#modal-ai-transformation .ait-wire.is-off .ait-wire-base { stroke: rgba(244, 239, 231, 0.1); stroke-dasharray: 3 5; }
#modal-ai-transformation .ait-wire.is-sweep .ait-wire-base { stroke: rgba(255, 140, 58, 0.7); }
#modal-ai-transformation .ait-wire-p { fill: #ffb27a; opacity: 0; }
#modal-ai-transformation .ait-wire-sw { fill: #fff1e4; opacity: 0; }
#modal-ai-transformation .ait-wire-halo { fill: rgba(255, 107, 0, 0.3); opacity: 0; }
#modal-ai-transformation .ait-wire.is-sweep .ait-wire-sw, #modal-ai-transformation .ait-wire.is-sweep .ait-wire-halo { opacity: 1; }

/* example run, runs in, metric, pilot, actions */
#modal-ai-transformation .ait-cv-run { display: grid; gap: 6px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4); }
#modal-ai-transformation .ait-cv-run p { font-size: 0.82rem; line-height: 1.5; color: var(--e-smoke); min-height: 3em; }
#modal-ai-transformation .ait-canvas.is-live .ait-cv-run p { color: var(--e-bone); }
#modal-ai-transformation .ait-cv-meta { display: grid; gap: 14px; }
@container (min-width: 460px) { #modal-ai-transformation .ait-cv-meta { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: stretch; } }
#modal-ai-transformation .ait-cv-runs { display: grid; gap: 8px; }
#modal-ai-transformation .ait-cv-runs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
#modal-ai-transformation .ait-cv-runs li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 6px; border-radius: 10px; border: 1px solid var(--e-line); background: var(--e-coal); font-size: 0.76rem; font-weight: 500; white-space: nowrap; }
#modal-ai-transformation .ait-cv-runs li.is-sys { border-color: var(--e-line-strong); background: rgba(244, 239, 231, 0.05); }
#modal-ai-transformation .ait-cv-runs li.is-ghost { width: 88px; padding: 0; background: linear-gradient(90deg, rgba(244, 239, 231, 0.04), rgba(244, 239, 231, 0.09), rgba(244, 239, 231, 0.04)); background-size: 200% 100%; }
#modal-ai-transformation .ait-canvas.is-vis .ait-cv-runs li.is-ghost { animation: ait-shimmer 2.2s linear infinite; }
@keyframes ait-shimmer { to { background-position: -200% 0; } }
#modal-ai-transformation .ait-cv-runs img { width: 20px; height: 20px; border-radius: 6px; }
#modal-ai-transformation .ait-cv-metric { display: grid; gap: 2px; align-content: center; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--e-ember-25); background: linear-gradient(160deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0.02)); }
#modal-ai-transformation .ait-cv-metric b { font: 700 clamp(1.6rem, 1.3rem + 0.8vw, 2.05rem)/1.05 var(--e-display); color: var(--e-ember); font-variant-numeric: tabular-nums; margin-top: 4px; min-height: 1.05em; }
#modal-ai-transformation .ait-cv-metric small { font-size: 0.74rem; color: var(--e-smoke); line-height: 1.35; }
#modal-ai-transformation .ait-cv-pilot { display: flex; gap: 10px; align-items: baseline; font-size: 0.78rem; color: var(--e-smoke); line-height: 1.45; padding-top: 4px; }
#modal-ai-transformation .ait-cv-pilot b { flex: none; font: 600 0.62rem var(--e-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-ember-hot); padding: 3px 8px; border-radius: 6px; background: var(--e-ember-12); }
#modal-ai-transformation .ait-cv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#modal-ai-transformation .ait-cv-actions .x-btn { min-height: 46px; padding: 0 20px; }
@media (max-width: 480px) { #modal-ai-transformation .ait-cv-actions .x-btn { flex: 1 1 100%; } }
#modal-ai-transformation .ait-canvas:not(.is-live) .ait-cv-actions, #modal-ai-transformation .ait-canvas:not(.is-live) .ait-cv-pilot { opacity: 0.55; }

/* ==========================================================================
   TIME SAVED CALCULATOR
   ========================================================================== */
#modal-ai-transformation .ait-calc { display: grid; gap: 14px; }
@media (min-width: 900px) { #modal-ai-transformation .ait-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } }
#modal-ai-transformation .ait-calc-in, #modal-ai-transformation .ait-calc-out {
    display: grid; gap: 20px; align-content: start;
    padding: clamp(18px, 2.6vw, 30px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--ait-card);
}
#modal-ai-transformation .ait-calc-out { border-color: var(--e-ember-25); background: radial-gradient(100% 80% at 100% 0%, rgba(255, 107, 0, 0.12), transparent 60%), var(--ait-card); }
#modal-ai-transformation .ait-calc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#modal-ai-transformation .ait-calc-presets .ait-cv-k { margin-right: 4px; }
#modal-ai-transformation .ait-preset {
    min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.3);
    font-size: 0.78rem; font-weight: 500; color: var(--e-smoke); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
#modal-ai-transformation .ait-preset:hover { color: var(--e-bone); border-color: var(--e-line-strong); }
#modal-ai-transformation .ait-preset.is-on { color: #100800; background: var(--e-ember); border-color: var(--e-ember); font-weight: 600; }
#modal-ai-transformation .ait-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
#modal-ai-transformation .ait-range label { font-size: 0.88rem; color: var(--e-smoke); }
#modal-ai-transformation .ait-range output { font: 700 1.05rem var(--e-display); color: var(--e-bone); font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
#modal-ai-transformation .ait-range input {
    grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0;
    background: transparent; cursor: pointer; --p: 50%;
}
#modal-ai-transformation .ait-range input:focus { outline: none; }
#modal-ai-transformation .ait-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) var(--p), rgba(244, 239, 231, 0.12) var(--p)); }
#modal-ai-transformation .ait-range input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
    background: #fff4ea; border: 4px solid var(--e-ember); box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s var(--e-ease-out), box-shadow 0.2s;
}
#modal-ai-transformation .ait-range input:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(255, 107, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.6); }
#modal-ai-transformation .ait-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--e-ember-hot); }
#modal-ai-transformation .ait-range input::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(244, 239, 231, 0.12); }
#modal-ai-transformation .ait-range input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--e-ember); }
#modal-ai-transformation .ait-range input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff4ea; border: 4px solid var(--e-ember); box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.14); }
#modal-ai-transformation .ait-calc-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#modal-ai-transformation .ait-calc-big > div { display: grid; gap: 6px; }
#modal-ai-transformation .ait-calc-big b { font: 700 clamp(1.9rem, 1.4rem + 1.5vw, 2.5rem)/1 var(--e-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--e-bone); white-space: nowrap; }
#modal-ai-transformation .ait-calc-big > div + div b { color: var(--e-ember); }
#modal-ai-transformation .ait-bars { display: grid; gap: 12px; }
#modal-ai-transformation .ait-bar { display: grid; grid-template-columns: 62px minmax(0, 1fr) 64px; align-items: center; gap: 12px; font-size: 0.78rem; color: var(--e-smoke); }
#modal-ai-transformation .ait-bar i { position: relative; display: block; height: 12px; border-radius: 12px; background: rgba(244, 239, 231, 0.06); overflow: hidden; }
#modal-ai-transformation .ait-bar em { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #6f655b, #a59b8f); transform: scaleX(var(--w, 1)); transform-origin: left; transition: transform 0.7s var(--e-ease-out); }
#modal-ai-transformation .ait-bar.is-ai em { background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember-hot)); box-shadow: 0 0 16px rgba(255, 107, 0, 0.5); }
#modal-ai-transformation .ait-bar b { font: 600 0.84rem var(--e-display); color: var(--e-bone); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-ai-transformation .ait-calc-fte { font-size: 0.9rem; color: var(--e-smoke); min-height: 1.5em; }
#modal-ai-transformation .ait-calc-fte span { color: var(--e-bone); font-weight: 500; }
#modal-ai-transformation .ait-calc-fte b { color: var(--e-ember-hot); font-variant-numeric: tabular-nums; }
#modal-ai-transformation .ait-calc-measure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--e-line); }
#modal-ai-transformation .ait-calc-measure li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--e-line); font-size: 0.74rem; color: var(--e-smoke); }
#modal-ai-transformation .ait-calc-measure svg { width: 14px; height: 14px; color: var(--e-ember-hot); }

/* ==========================================================================
   INDUSTRIES
   ========================================================================== */
#modal-ai-transformation .ait-ind { display: grid; gap: 16px; }
#modal-ai-transformation .ait-ind-tabs {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 2px 28px 4px 2px; margin: -2px -2px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent);
}
#modal-ai-transformation .ait-ind-tabs::-webkit-scrollbar { display: none; }
#modal-ai-transformation .ait-tab {
    flex: none; width: 92px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 6px 10px;
    border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.3); color: var(--e-smoke); cursor: pointer;
    font-size: 0.72rem; font-weight: 600; line-height: 1.2; text-align: center;
    transition: color 0.2s, background 0.25s, border-color 0.25s, transform 0.35s var(--e-ease-out);
}
#modal-ai-transformation .ait-tab svg { width: 22px; height: 22px; transition: transform 0.4s var(--e-ease-out), color 0.2s; }
@media (hover: hover) {
    #modal-ai-transformation .ait-tab:hover { color: var(--e-bone); border-color: var(--e-line-strong); background: rgba(244, 239, 231, 0.045); }
    #modal-ai-transformation .ait-tab:hover svg { transform: translateY(-2px); color: var(--e-ember-hot); }
}
#modal-ai-transformation .ait-tab[aria-selected="true"] { color: var(--e-bone); border-color: var(--e-ember); background: linear-gradient(170deg, rgba(255, 107, 0, 0.22), rgba(255, 107, 0, 0.05)); }
#modal-ai-transformation .ait-tab[aria-selected="true"] svg { color: var(--e-ember-hot); animation: ait-draw 0.8s var(--e-ease-out); }
@media (min-width: 760px) {
    #modal-ai-transformation .ait-ind-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
    #modal-ai-transformation .ait-tab { width: auto; }
}
#modal-ai-transformation .ait-ind-panel {
    position: relative; overflow: hidden;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--ait-card);
    padding: clamp(18px, 3vw, 36px);
}
#modal-ai-transformation .ait-ind-panel::after { content: ''; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, var(--e-ember-25), transparent 70%); filter: blur(24px); pointer-events: none; }
/* with JS: every panel sits in the same grid cell, so switching never changes the height */
#modal-ai-transformation .ait-ind.is-ready .ait-ind-panels { display: grid; }
#modal-ai-transformation .ait-ind.is-ready .ait-ind-panel {
    grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(10px);
    transition: opacity 0.3s var(--e-ease-std), transform 0.45s var(--e-ease-out), visibility 0s linear 0.45s;
}
#modal-ai-transformation .ait-ind.is-ready .ait-ind-panel.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.45s var(--e-ease-std) 0.08s, transform 0.6s var(--e-ease-out) 0.08s, visibility 0s; }
#modal-ai-transformation .ait-ind:not(.is-ready) .ait-ind-panel + .ait-ind-panel { margin-top: 14px; }
#modal-ai-transformation .ait-ind-head { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; margin-bottom: 22px; }
#modal-ai-transformation .ait-ind-ic { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--e-ember-12); border: 1px solid var(--e-ember-45); color: var(--e-ember-hot); }
#modal-ai-transformation .ait-ind-ic svg { width: 26px; height: 26px; }
#modal-ai-transformation .ait-ind-panel.is-on .ait-ind-ic svg { animation: ait-draw 1s var(--e-ease-out) 0.15s backwards; }
#modal-ai-transformation .ait-ind-head h3 { font-size: var(--e-fs-xl); line-height: 1.15; align-self: end; }
#modal-ai-transformation .ait-ind-head p { color: var(--e-smoke); font-size: var(--e-fs-sm); align-self: start; }
#modal-ai-transformation .ait-ind-build {
    grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
    min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--e-ember-45); background: rgba(0, 0, 0, 0.35);
    color: var(--e-ember-hot); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#modal-ai-transformation .ait-ind-build svg { width: 16px; height: 16px; transition: transform 0.3s var(--e-ease-out); }
#modal-ai-transformation .ait-ind-build:hover { background: var(--e-ember); color: #100800; border-color: var(--e-ember); }
#modal-ai-transformation .ait-ind-build:hover svg { transform: translateX(3px); }
@media (min-width: 760px) {
    #modal-ai-transformation .ait-ind-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    #modal-ai-transformation .ait-ind-build { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; justify-self: end; }
}
#modal-ai-transformation .ait-uc-grid { display: grid; gap: 12px; position: relative; z-index: 1; }
@media (min-width: 640px) { #modal-ai-transformation .ait-uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { #modal-ai-transformation .ait-uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#modal-ai-transformation .ait-uc {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px; border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
    transition: border-color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out), opacity 0.4s;
}
@media (hover: hover) { #modal-ai-transformation .ait-uc:hover { border-color: var(--e-ember-45); transform: translateY(-3px); } }
#modal-ai-transformation .ait-uc-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
#modal-ai-transformation .ait-uc-apps img { width: 28px; height: 28px; border-radius: 8px; }
#modal-ai-transformation .ait-uc h4 { font-size: 1.02rem; }
#modal-ai-transformation .ait-uc p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }
#modal-ai-transformation .ait-uc-tag { margin-top: auto; align-self: flex-start; font-size: 0.7rem; padding: 5px 9px; border-radius: 6px; background: rgba(244, 239, 231, 0.05); color: var(--e-smoke); border: 1px solid var(--e-line); }
#modal-ai-transformation.ait-anim .ait-ind.is-ready .ait-ind-panel.is-on .ait-uc { animation: ait-rise 0.6s var(--e-ease-out) backwards; animation-delay: calc(120ms + var(--k, 0) * 80ms); }
@keyframes ait-rise { from { opacity: 0; transform: translateY(16px); } }
#modal-ai-transformation .ait-ind-foot { margin-top: 24px; color: var(--e-smoke); font-size: var(--e-fs-sm); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }

/* ==========================================================================
   PATTERNS
   ========================================================================== */
#modal-ai-transformation .ait-patterns-section { background: linear-gradient(180deg, var(--e-black), var(--e-coal) 35%, var(--e-coal) 70%, var(--e-black)); }
#modal-ai-transformation .ait-pat { display: grid; gap: 14px; }
@media (min-width: 1024px) { #modal-ai-transformation .ait-pat { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 18px; align-items: stretch; } }
#modal-ai-transformation .ait-pat-list {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 2px 28px 4px 2px; margin: -2px -2px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent);
}
#modal-ai-transformation .ait-pat-list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
    #modal-ai-transformation .ait-pat-list { display: grid; align-content: start; overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
}
#modal-ai-transformation .ait-pat-tab {
    position: relative; overflow: hidden; flex: none; width: 230px; scroll-snap-align: start;
    display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px;
    padding: 13px 16px; border-radius: 16px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.35); cursor: pointer; text-align: left;
    transition: border-color 0.25s, background 0.3s, transform 0.35s var(--e-ease-out);
}
@media (min-width: 1024px) { #modal-ai-transformation .ait-pat-tab { width: auto; } }
#modal-ai-transformation .ait-pat-n { font: 700 0.86rem var(--e-display); color: var(--e-dust); font-variant-numeric: tabular-nums; transition: color 0.25s; }
#modal-ai-transformation .ait-pat-name { display: grid; line-height: 1.3; min-width: 0; }
#modal-ai-transformation .ait-pat-name b { font-size: 0.9rem; font-weight: 600; color: var(--e-bone); }
#modal-ai-transformation .ait-pat-name small { font-size: 0.72rem; color: var(--e-dust); }
@media (hover: hover) { #modal-ai-transformation .ait-pat-tab:hover { border-color: var(--e-line-strong); background: rgba(244, 239, 231, 0.04); } }
#modal-ai-transformation .ait-pat-tab[aria-selected="true"] { border-color: var(--e-ember-45); background: linear-gradient(95deg, rgba(255, 107, 0, 0.16), rgba(255, 107, 0, 0.02) 80%); }
@media (min-width: 1024px) { #modal-ai-transformation .ait-pat-tab[aria-selected="true"] { transform: translateX(4px); } }
#modal-ai-transformation .ait-pat-tab[aria-selected="true"] .ait-pat-n { color: var(--e-ember); }
#modal-ai-transformation .ait-pat-prog { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--e-ember); transform: scaleX(var(--prog, 0)); transform-origin: left; opacity: 0; }
#modal-ai-transformation .ait-pat-tab.is-auto .ait-pat-prog { opacity: 1; }
#modal-ai-transformation .ait-pat-stage {
    position: relative; overflow: hidden; display: grid; gap: 20px; align-content: start;
    padding: clamp(18px, 2.6vw, 32px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line-strong);
    background: radial-gradient(80% 70% at 100% 0%, rgba(255, 107, 0, 0.1), transparent 60%), var(--ait-card);
    container-type: inline-size;
}
#modal-ai-transformation .ait-pat-stage.is-flash { animation: ait-flash 0.9s var(--e-ease-out); }
#modal-ai-transformation .ait-pat-head { display: grid; gap: 8px; }
#modal-ai-transformation .ait-pat-head h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
#modal-ai-transformation .ait-pat-head p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; max-width: 70ch; }
#modal-ai-transformation .ait-pipe-lg { padding: 6px 0; }
#modal-ai-transformation .ait-pat-stage .ait-node { opacity: 0.55; }
#modal-ai-transformation .ait-pat-stage .ait-node.is-past { opacity: 0.85; }
#modal-ai-transformation .ait-pat-stage .ait-node.is-lit { opacity: 1; }
#modal-ai-transformation .ait-pat-stage .ait-node.is-lit .ait-node-ic { transform: scale(1.06); border-color: var(--e-ember); box-shadow: 0 0 30px -4px rgba(255, 107, 0, 0.75); }
#modal-ai-transformation .ait-pat-stage .ait-node.is-lit.is-out .ait-node-ic { border-color: var(--ait-ok); box-shadow: 0 0 30px -4px rgba(61, 220, 132, 0.6); }
@container (min-width: 470px) {
    #modal-ai-transformation .ait-pipe-lg .ait-node-ic { width: 58px; height: 58px; border-radius: 18px; }
    #modal-ai-transformation .ait-pipe-lg .ait-node-ic svg { width: 26px; height: 26px; }
}
#modal-ai-transformation .ait-pat-cap {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
    font-size: 0.86rem; color: var(--e-bone); line-height: 1.5;
}
#modal-ai-transformation .ait-pat-cap-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--e-ember); color: #100800; font: 700 0.72rem var(--e-display); }
#modal-ai-transformation .ait-pat-cap > span:last-child { flex: 1; min-width: 0; }
#modal-ai-transformation .ait-pat-best { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 0.8rem; color: var(--e-smoke); }
#modal-ai-transformation .ait-pat-best b { font: 600 0.62rem var(--e-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-ember-hot); }
#modal-ai-transformation .ait-pat-best > span { flex: 1; min-width: 12em; }
#modal-ai-transformation .ait-section-foot { margin-top: 22px; color: var(--e-smoke); font-size: var(--e-fs-sm); }
#modal-ai-transformation .ait-section-foot a, #modal-ai-transformation .ait-faq-a a { color: var(--e-bone); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--e-ember); }
#modal-ai-transformation .ait-section-foot a:hover, #modal-ai-transformation .ait-faq-a a:hover { color: var(--e-ember-hot); }

/* ==========================================================================
   MODELS: ROUTER
   ========================================================================== */
#modal-ai-transformation .ait-router {
    position: relative; isolation: isolate; display: grid; gap: 34px; align-items: center;
    padding: clamp(18px, 3vw, 36px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--ait-card);
}
#modal-ai-transformation .ait-router > :not(svg) { position: relative; z-index: 1; }
#modal-ai-transformation .ait-rt-task { display: grid; gap: 8px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.5); }
#modal-ai-transformation .ait-rt-task.is-hit { animation: ait-flash 0.9s var(--e-ease-out); }
#modal-ai-transformation .ait-rt-task-t { font: 600 clamp(0.98rem, 0.9rem + 0.3vw, 1.1rem)/1.3 var(--e-display); color: var(--e-bone); }
#modal-ai-transformation .ait-rt-need { justify-self: start; display: block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--e-ember-25); background: var(--e-ember-12); color: var(--e-ember-hot); font-size: 0.74rem; font-weight: 500; }
#modal-ai-transformation .ait-rt-hub { display: grid; justify-items: center; gap: 4px; text-align: center; }
#modal-ai-transformation .ait-rt-hub-ic { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--e-ember); color: var(--e-ember-hot); background: radial-gradient(circle at 50% 35%, rgba(255, 107, 0, 0.35), #140a03 72%); box-shadow: 0 0 40px -8px rgba(255, 107, 0, 0.7); margin-bottom: 6px; }
#modal-ai-transformation .ait-rt-hub-ic svg { width: 30px; height: 30px; }
#modal-ai-transformation .ait-rt-hub-ic::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(255, 140, 58, 0.45); }
#modal-ai-transformation .ait-router.is-vis .ait-rt-hub-ic::before { animation: ait-spin 14s linear infinite; }
#modal-ai-transformation .ait-rt-hub.is-hit .ait-rt-hub-ic { animation: ait-hit 0.8s var(--e-ease-out); }
#modal-ai-transformation .ait-rt-hub b { font: 700 0.95rem var(--e-display); }
#modal-ai-transformation .ait-rt-hub small { font-size: 0.72rem; color: var(--e-dust); }
#modal-ai-transformation .ait-rt-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#modal-ai-transformation .ait-rt-model {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.45); cursor: pointer; text-align: left;
    transition: border-color 0.3s, background 0.3s, transform 0.35s var(--e-ease-out), box-shadow 0.35s, opacity 0.3s;
}
#modal-ai-transformation .ait-rt-model > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
#modal-ai-transformation .ait-rt-model b { font-size: 0.88rem; font-weight: 600; }
#modal-ai-transformation .ait-rt-model small { font-size: 0.7rem; color: var(--e-dust); }
#modal-ai-transformation .ait-rt-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--e-line-strong); background: #100d0a; font: 700 0.92rem var(--e-display); color: var(--e-bone); transition: background 0.3s, color 0.3s, border-color 0.3s; }
#modal-ai-transformation img.ait-rt-mark { padding: 5px; object-fit: contain; }
@media (hover: hover) { #modal-ai-transformation .ait-rt-model:hover { border-color: var(--e-line-strong); transform: translateY(-2px); } }
#modal-ai-transformation .ait-rt-model.is-on { border-color: var(--e-ember); background: linear-gradient(100deg, rgba(255, 107, 0, 0.2), rgba(255, 107, 0, 0.04)); box-shadow: 0 14px 34px -18px rgba(255, 107, 0, 0.9); }
#modal-ai-transformation .ait-rt-model.is-on span.ait-rt-mark { background: var(--e-ember); border-color: var(--e-ember); color: #100800; }
#modal-ai-transformation .ait-rt-model.is-on img.ait-rt-mark { border-color: var(--e-ember); }
#modal-ai-transformation .ait-rt-model.is-hit { animation: ait-flash 0.9s var(--e-ease-out); }
@media (min-width: 900px) {
    #modal-ai-transformation .ait-router { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 0.85fr); gap: clamp(40px, 6vw, 90px); }
    #modal-ai-transformation .ait-rt-models { grid-template-columns: minmax(0, 1fr); }
}
#modal-ai-transformation .ait-rt-details { display: grid; margin-top: 14px; }
#modal-ai-transformation .ait-rt-detail {
    grid-area: 1 / 1; display: grid; gap: 12px;
    padding: 18px 22px; border-radius: 20px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.35);
    visibility: hidden; opacity: 0; transform: translateY(8px);
    transition: opacity 0.3s var(--e-ease-std), transform 0.45s var(--e-ease-out), visibility 0s linear 0.45s;
}
#modal-ai-transformation .ait-rt-detail.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.4s var(--e-ease-std) 0.1s, transform 0.55s var(--e-ease-out) 0.1s, visibility 0s; }
#modal-ai-transformation .ait-rt-detail h3 { font-size: var(--e-fs-lg); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#modal-ai-transformation .ait-rt-detail h3 small { font: 500 0.76rem var(--e-body); color: var(--e-ember-hot); letter-spacing: 0; }
#modal-ai-transformation .ait-rt-detail ul { list-style: none; display: grid; gap: 8px; }
@media (min-width: 760px) { #modal-ai-transformation .ait-rt-detail ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
#modal-ai-transformation .ait-rt-detail li { position: relative; padding-left: 18px; font-size: var(--e-fs-sm); color: var(--e-smoke); line-height: 1.5; }
#modal-ai-transformation .ait-rt-detail li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 2px; background: var(--e-ember); }
#modal-ai-transformation .ait-data {
    display: grid; gap: 20px; margin-top: 14px;
    padding: clamp(20px, 3vw, 32px); border-radius: var(--e-r-lg); border: 1px solid var(--e-ember-25);
    background: radial-gradient(120% 140% at 100% 0%, var(--e-ember-12), transparent 50%), linear-gradient(160deg, var(--e-char), var(--e-black));
}
@media (min-width: 960px) { #modal-ai-transformation .ait-data { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; } }
#modal-ai-transformation .ait-data h3 { font-size: var(--e-fs-xl); margin-bottom: 10px; }
#modal-ai-transformation .ait-data-copy p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.65; }
#modal-ai-transformation .ait-data-list { list-style: none; display: grid; gap: 10px; }
@media (min-width: 640px) { #modal-ai-transformation .ait-data-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#modal-ai-transformation .ait-data-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4); font-size: var(--e-fs-sm); line-height: 1.45; }
#modal-ai-transformation .ait-data-list svg { width: 20px; height: 20px; color: var(--e-ember-hot); margin-top: 1px; }

/* ==========================================================================
   TIMELINE: PHASE STEPPER
   ========================================================================== */
#modal-ai-transformation .ait-tl-section { background: linear-gradient(180deg, var(--e-black), var(--e-coal) 40%, var(--e-coal) 70%, var(--e-black)); }
#modal-ai-transformation .ait-steps {
    --at: 0; --dwell: 0;
    display: grid; gap: 22px; padding: clamp(16px, 3vw, 34px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--ait-card);
}
#modal-ai-transformation .ait-steps-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#modal-ai-transformation .ait-steps-line { position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; border-radius: 2px; background: var(--e-line-strong); }
#modal-ai-transformation .ait-steps-line i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) 80%, #ffc49a); box-shadow: 0 0 12px rgba(255, 107, 0, 0.55); transform: scaleX(var(--at)); transform-origin: left; transition: transform 0.8s var(--e-ease-out); }
#modal-ai-transformation .ait-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 0 2px; background: none; border: 0; cursor: pointer; text-align: center; color: var(--e-smoke); }
#modal-ai-transformation .ait-step-dot {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--e-line-strong); background: #100d0a; font: 700 0.8rem var(--e-display); color: var(--e-dust);
    transition: background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s, transform 0.4s var(--e-ease-out);
}
#modal-ai-transformation .ait-step-name { font-size: 0.8rem; font-weight: 600; color: var(--e-bone); line-height: 1.2; }
#modal-ai-transformation .ait-step small { font-size: 0.68rem; color: var(--e-dust); line-height: 1.2; }
@media (max-width: 479px) { #modal-ai-transformation .ait-step small { display: none; } #modal-ai-transformation .ait-step-name { font-size: 0.72rem; } }
@media (hover: hover) { #modal-ai-transformation .ait-step:hover .ait-step-dot { border-color: var(--e-ember-45); color: var(--e-bone); } }
#modal-ai-transformation .ait-step.is-past .ait-step-dot { border-color: var(--e-ember); color: var(--e-ember-hot); }
#modal-ai-transformation .ait-step[aria-selected="true"] .ait-step-dot { background: var(--e-ember); border-color: var(--e-ember); color: #100800; transform: scale(1.1); box-shadow: 0 0 0 6px var(--e-ember-12), 0 0 26px rgba(255, 107, 0, 0.6); }
#modal-ai-transformation .ait-step[aria-selected="true"] .ait-step-name { color: var(--e-ember-hot); }
#modal-ai-transformation .ait-steps.is-auto .ait-step[aria-selected="true"] .ait-step-dot::after {
    content: ''; position: absolute; inset: -9px; border-radius: 50%;
    background: conic-gradient(var(--e-ember-hot) calc(var(--dwell) * 360deg), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
#modal-ai-transformation .ait-steps-panels { display: grid; }
#modal-ai-transformation .ait-sp {
    grid-area: 1 / 1; display: grid; gap: 14px; align-items: center;
    padding: clamp(16px, 2.4vw, 26px); border-radius: 20px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
    visibility: hidden; opacity: 0; transform: translateY(10px);
    transition: opacity 0.3s var(--e-ease-std), transform 0.45s var(--e-ease-out), visibility 0s linear 0.45s;
}
#modal-ai-transformation .ait-sp.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.45s var(--e-ease-std) 0.1s, transform 0.6s var(--e-ease-out) 0.1s, visibility 0s; }
#modal-ai-transformation .ait-sp-n { font: 700 2.6rem/1 var(--e-display); color: transparent; -webkit-text-stroke: 1.5px var(--e-ember); letter-spacing: -0.02em; }
#modal-ai-transformation .ait-sp h3 { font-size: var(--e-fs-xl); margin-bottom: 6px; }
#modal-ai-transformation .ait-sp p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; }
#modal-ai-transformation .ait-sp .ait-sp-get { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--e-ember-25); background: var(--e-ember-12); color: var(--e-bone); }
#modal-ai-transformation .ait-sp-get span { font: 600 0.62rem var(--e-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-ember-hot); }
@media (min-width: 760px) { #modal-ai-transformation .ait-sp { grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; } }
#modal-ai-transformation .ait-pricing {
    margin-top: 16px; display: grid; gap: 14px; align-items: center;
    padding: 18px 22px; border-radius: 18px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
}
@media (min-width: 760px) { #modal-ai-transformation .ait-pricing { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; } }
#modal-ai-transformation .ait-pricing p { color: var(--e-smoke); font-size: var(--e-fs-sm); max-width: 78ch; }
#modal-ai-transformation .ait-pricing p b { color: var(--e-bone); font-weight: 600; }

/* ==========================================================================
   FAQ
   ========================================================================== */
#modal-ai-transformation .ait-faq-grid { display: grid; gap: 30px; }
#modal-ai-transformation .ait-faq-head .x-lede { margin-top: 16px; }
@media (min-width: 960px) {
    #modal-ai-transformation .ait-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
    #modal-ai-transformation .ait-faq-head { position: sticky; top: var(--ait-top); align-self: start; }
}
#modal-ai-transformation .ait-faq { border-top: 1px solid var(--e-line); }
#modal-ai-transformation .ait-faq-item { position: relative; border-bottom: 1px solid var(--e-line); }
#modal-ai-transformation .ait-faq-item::before { content: ''; position: absolute; left: -14px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--e-ember); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--e-ease-out); }
#modal-ai-transformation .ait-faq-item.is-open::before { transform: scaleY(1); }
#modal-ai-transformation .ait-faq-item h3 { font-size: inherit; }
#modal-ai-transformation .ait-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 19px 0; background: none; border: 0; color: var(--e-bone); text-align: left; cursor: pointer;
    font: 600 var(--e-fs-md) var(--e-display); letter-spacing: -0.01em; transition: color var(--e-t-quick);
}
#modal-ai-transformation .ait-faq-q:hover, #modal-ai-transformation .ait-faq-q[aria-expanded="true"] { color: var(--e-ember-hot); }
#modal-ai-transformation .ait-faq-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--e-line-strong); color: var(--e-bone); transition: transform 0.45s var(--e-ease-out), background 0.25s, border-color 0.25s, color 0.25s; }
#modal-ai-transformation .ait-faq-icon::before, #modal-ai-transformation .ait-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: currentColor; transform: translate(-50%, -50%); border-radius: 2px; }
#modal-ai-transformation .ait-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.45s var(--e-ease-out); }
#modal-ai-transformation .ait-faq-q[aria-expanded="true"] .ait-faq-icon { background: var(--e-ember); border-color: var(--e-ember); color: #100800; transform: rotate(180deg); }
#modal-ai-transformation .ait-faq-q[aria-expanded="true"] .ait-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
#modal-ai-transformation .ait-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--e-ease-out); }
#modal-ai-transformation .ait-faq-a > div { overflow: hidden; min-height: 0; }
#modal-ai-transformation .ait-faq-a p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.7; padding: 0 44px 22px 0; max-width: 64ch; opacity: 0; transform: translateY(-6px); transition: opacity 0.25s, transform 0.4s var(--e-ease-out); }
#modal-ai-transformation .ait-faq-item.is-open .ait-faq-a { grid-template-rows: 1fr; }
#modal-ai-transformation .ait-faq-item.is-open .ait-faq-a p { opacity: 1; transform: none; transition: opacity 0.4s 0.12s, transform 0.5s var(--e-ease-out) 0.08s; }
@media (max-width: 480px) { #modal-ai-transformation .ait-faq-a p { padding-right: 0; } }

/* ---------- CTA (uses shared .x-cta) -------------------------------------- */
#modal-ai-transformation .x-cta h2 { font-size: var(--ait-fs-h2); }
#modal-ai-transformation .ait-cta { position: relative; overflow: hidden; isolation: isolate; }
#modal-ai-transformation .ait-cta::after {
    content: ''; position: absolute; z-index: -1; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 107, 0, 0.22), transparent); pointer-events: none;
}

/* ==========================================================================
   AI PALETTE LAYER
   Violet, blue, cyan and magenta for everything "AI" (models, pipelines, graphs, results).
   Ember stays on primary CTAs and selections, so the page still reads as EAS.
   ========================================================================== */
/* hero */
#modal-ai-transformation .ait-hero-bg {
    background:
        radial-gradient(45% 45% at 90% 12%, rgba(124, 92, 255, 0.2) 0%, transparent 70%),
        radial-gradient(40% 40% at 70% 80%, rgba(34, 211, 238, 0.08) 0%, transparent 70%),
        radial-gradient(50% 50% at 0% 100%, rgba(255, 107, 0, 0.1) 0%, transparent 70%),
        linear-gradient(180deg, #000 0%, #07060d 55%, #000 100%);
}
#modal-ai-transformation .ait-hero-bg::after { background-image: linear-gradient(rgba(124, 92, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 92, 255, 0.1) 1px, transparent 1px); }
#modal-ai-transformation .ait-core { --fx-color: #7c5cff; --fx-color-2: #22d3ee; }
#modal-ai-transformation .ait-word { background: linear-gradient(100deg, #ff6b00 0%, #ff4fa3 48%, #8b6cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#modal-ai-transformation .ait-word::after { background: linear-gradient(100deg, #ff6b00, #ff4fa3 48%, #8b6cff); }
#modal-ai-transformation .x-mark::before { background: linear-gradient(90deg, var(--e-ember), var(--ai-violet)); }

/* proof numbers */
#modal-ai-transformation .ait-proof { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
@media (min-width: 640px) { #modal-ai-transformation .ait-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#modal-ai-transformation .ait-proof li {
    position: relative; overflow: hidden; display: grid; gap: 3px; padding: 11px 13px; border-radius: 14px;
    border: 1px solid rgba(124, 92, 255, 0.22); background: linear-gradient(160deg, rgba(124, 92, 255, 0.1), rgba(0, 0, 0, 0.35));
}
#modal-ai-transformation .ait-proof b {
    font: 700 1.35rem/1 var(--e-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
    background: linear-gradient(100deg, #fff, #c9bcff 60%, #7de8ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#modal-ai-transformation .ait-proof span { font-size: 0.72rem; line-height: 1.3; color: var(--e-smoke); }
#modal-ai-transformation .ait-proof li:last-child b { background: linear-gradient(100deg, #ffb27a, #ff6b00); -webkit-background-clip: text; background-clip: text; }

/* console */
#modal-ai-transformation .ait-con { border-color: rgba(124, 92, 255, 0.3); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 60px -20px rgba(124, 92, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
#modal-ai-transformation .ait-con::before { background: radial-gradient(closest-side, rgba(124, 92, 255, 0.28), transparent); }
#modal-ai-transformation .ait-con-steps li::before { background-image: linear-gradient(90deg, #ff6b00, #ff4fa3, #7c5cff); }
#modal-ai-transformation .ait-con-steps li.is-on { color: #b9a8ff; }
#modal-ai-transformation .ait-con-think .ait-con-k { color: #a996ff; }
#modal-ai-transformation .ait-con-ic { background: rgba(79, 124, 255, 0.16); border-color: rgba(79, 124, 255, 0.45); color: #8fb0ff; }
#modal-ai-transformation .ait-tool.is-run { border-color: var(--ai-cyan-line); background: rgba(34, 211, 238, 0.1); }
#modal-ai-transformation .ait-tool.is-run .ait-tool-st { border-color: var(--ai-cyan); border-top-color: transparent; }
#modal-ai-transformation .ait-con-out { border-color: rgba(124, 92, 255, 0.4); background: linear-gradient(160deg, rgba(124, 92, 255, 0.16), rgba(34, 211, 238, 0.04)); }
#modal-ai-transformation .ait-con-out .ait-con-k { color: #7de8ff; }
#modal-ai-transformation .ait-type.is-typing .ait-type-live::after { background: var(--ai-cyan); box-shadow: 0 0 8px var(--ai-cyan); }

/* builder */
#modal-ai-transformation .ait-finder-section { position: relative; isolation: isolate; background: linear-gradient(180deg, #000, #06050c 40%, #06050c 70%, #000); }
#modal-ai-transformation .ait-builder {
    border-color: rgba(124, 92, 255, 0.22);
    background:
        radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), rgba(124, 92, 255, 0.14), transparent 60%),
        radial-gradient(70% 55% at 0% 0%, rgba(255, 107, 0, 0.07), transparent 60%),
        radial-gradient(70% 60% at 100% 100%, rgba(79, 124, 255, 0.1), transparent 60%),
        linear-gradient(160deg, rgba(23, 19, 28, 0.94), rgba(10, 9, 14, 0.96));
}
#modal-ai-transformation .ait-tile:hover svg { color: var(--ai-cyan); }
#modal-ai-transformation .ait-prob:hover .ait-prob-ic { border-color: var(--ai-cyan-line); color: var(--ai-cyan); }
#modal-ai-transformation .ait-canvas {
    border-color: rgba(124, 92, 255, 0.35);
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(124, 92, 255, 0.18), transparent 60%),
        radial-gradient(70% 50% at 0% 100%, rgba(34, 211, 238, 0.07), transparent 60%),
        linear-gradient(180deg, rgba(6, 5, 12, 0.85), rgba(0, 0, 0, 0.6));
    box-shadow: 0 30px 70px -40px rgba(124, 92, 255, 0.55);
}
#modal-ai-transformation .ait-canvas.is-live .ait-cv-eyebrow i { background: var(--ai-cyan); }
#modal-ai-transformation .ait-canvas.is-live.is-vis .ait-cv-eyebrow i { animation-name: ait-ping-c; }
#modal-ai-transformation .ait-canvas.is-live .ait-cv-pattern { border-color: var(--ai-violet-line); color: #b9a8ff; }
@keyframes ait-flash { 0% { border-color: var(--ai-cyan); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.45); } 100% { border-color: rgba(124, 92, 255, 0.35); box-shadow: 0 0 0 14px rgba(34, 211, 238, 0); } }
#modal-ai-transformation .ait-cv-run { border-color: rgba(124, 92, 255, 0.25); background: rgba(8, 6, 18, 0.7); }
#modal-ai-transformation .ait-cv-run .ait-cv-k svg { color: #a996ff; }
#modal-ai-transformation .ait-cv-run p { font-size: 0.8rem; min-height: 2.9em; }
#modal-ai-transformation .ait-cv-metric { border-color: rgba(34, 211, 238, 0.3); background: linear-gradient(160deg, rgba(34, 211, 238, 0.1), rgba(124, 92, 255, 0.08)); }
#modal-ai-transformation .ait-cv-metric b { background: linear-gradient(100deg, #7de8ff, #a996ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#modal-ai-transformation .ait-cv-pilot b { color: #b9a8ff; background: rgba(124, 92, 255, 0.16); }

/* pipeline nodes: trigger blue, AI violet, human bone, outcome green */
#modal-ai-transformation .ait-node[data-slot="0"]:not(.is-ghost) .ait-node-ic { border-color: rgba(79, 124, 255, 0.55); color: #8fb0ff; background: radial-gradient(circle at 50% 35%, rgba(79, 124, 255, 0.22), #07091a 75%); }
#modal-ai-transformation .ait-node.is-ai .ait-node-ic { border-color: #8b6cff; color: #c3b5ff; background: radial-gradient(circle at 50% 30%, rgba(124, 92, 255, 0.55), #0c0720 75%); box-shadow: 0 0 28px -4px rgba(124, 92, 255, 0.85); }
#modal-ai-transformation .ait-canvas.is-live.is-vis .ait-node.is-ai .ait-node-ic::after,
#modal-ai-transformation .ait-pat-stage.is-vis .ait-node.is-ai.is-lit .ait-node-ic::after { border-color: #a996ff; }
#modal-ai-transformation .ait-node.is-ai .ait-node-k { color: #a996ff; }
@keyframes ait-hit { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.8); } 30% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(34, 211, 238, 0); } }
#modal-ai-transformation .is-live .ait-wire-base, #modal-ai-transformation .ait-pat-stage .ait-wire-base, #modal-ai-transformation .ait-router .ait-wire-base { stroke: rgba(124, 92, 255, 0.5); }
#modal-ai-transformation .ait-wire.is-sweep .ait-wire-base { stroke: rgba(125, 232, 255, 0.85); }
#modal-ai-transformation .ait-wire-p { fill: #7de8ff; }
#modal-ai-transformation .ait-wire-halo { fill: rgba(124, 92, 255, 0.4); }
#modal-ai-transformation .ait-pat-stage .ait-node.is-lit .ait-node-ic { border-color: #8b6cff; box-shadow: 0 0 30px -4px rgba(124, 92, 255, 0.8); }

/* calculator */
#modal-ai-transformation .ait-calc-out { border-color: rgba(124, 92, 255, 0.35); background: radial-gradient(100% 80% at 100% 0%, rgba(124, 92, 255, 0.2), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(34, 211, 238, 0.08), transparent 60%), var(--ait-card); }
#modal-ai-transformation .ait-calc-big > div + div b { background: linear-gradient(100deg, #ffb27a, #ff4fa3 55%, #a996ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#modal-ai-transformation .ait-bar.is-ai em { background: linear-gradient(90deg, #7c5cff, #22d3ee); box-shadow: 0 0 16px rgba(124, 92, 255, 0.6); }
#modal-ai-transformation .ait-range input::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--e-ember), #ff4fa3 calc(var(--p) * 0.6), var(--ai-violet) var(--p), rgba(244, 239, 231, 0.12) var(--p)); }
#modal-ai-transformation .ait-range input::-moz-range-progress { background: linear-gradient(90deg, var(--e-ember), var(--ai-violet)); }
#modal-ai-transformation .ait-calc-measure svg { color: var(--ai-cyan); }

/* industries */
#modal-ai-transformation .ait-ind-panel::after { background: radial-gradient(circle, rgba(124, 92, 255, 0.3), transparent 70%); }
#modal-ai-transformation .ait-ind-ic { background: rgba(124, 92, 255, 0.16); border-color: var(--ai-violet-line); color: #b9a8ff; }
#modal-ai-transformation .ait-tab:hover svg { color: var(--ai-cyan); }
#modal-ai-transformation .ait-uc:hover { border-color: var(--ai-violet-line); }

/* patterns */
#modal-ai-transformation .ait-patterns-section { position: relative; isolation: isolate; background: linear-gradient(180deg, #000, #06050c 35%, #06050c 70%, #000); }
#modal-ai-transformation .ait-pat-stage { border-color: rgba(124, 92, 255, 0.3); background: radial-gradient(80% 70% at 100% 0%, rgba(124, 92, 255, 0.16), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(79, 124, 255, 0.08), transparent 60%), linear-gradient(160deg, rgba(20, 17, 28, 0.95), rgba(8, 7, 12, 0.97)); }
#modal-ai-transformation .ait-pat-tab[aria-selected="true"] { border-color: var(--ai-violet-line); background: linear-gradient(95deg, rgba(124, 92, 255, 0.22), rgba(79, 124, 255, 0.04) 80%); }
#modal-ai-transformation .ait-pat-tab[aria-selected="true"] .ait-pat-n { color: #b9a8ff; }
#modal-ai-transformation .ait-pat-prog { background: linear-gradient(90deg, var(--ai-violet), var(--ai-cyan)); }
#modal-ai-transformation .ait-pat-cap { border-color: rgba(124, 92, 255, 0.25); background: rgba(8, 6, 18, 0.7); }
#modal-ai-transformation .ait-pat-cap-n { background: linear-gradient(135deg, var(--ai-violet), var(--ai-cyan)); color: #fff; }
#modal-ai-transformation .ait-pat-best b { color: var(--ai-cyan); }

/* router */
#modal-ai-transformation .ait-router { border-color: rgba(124, 92, 255, 0.25); background: radial-gradient(60% 80% at 50% 50%, rgba(124, 92, 255, 0.12), transparent 70%), var(--ait-card); }
#modal-ai-transformation .ait-rt-need { border-color: var(--ai-cyan-line); background: rgba(34, 211, 238, 0.1); color: #7de8ff; }
#modal-ai-transformation .ait-rt-hub-ic { border-color: #8b6cff; color: #c3b5ff; background: radial-gradient(circle at 50% 35%, rgba(124, 92, 255, 0.55), #0c0720 72%); box-shadow: 0 0 44px -6px rgba(124, 92, 255, 0.85); }
#modal-ai-transformation .ait-rt-hub-ic::before { border-color: rgba(34, 211, 238, 0.5); }
#modal-ai-transformation .ait-rt-model.is-on { border-color: #8b6cff; background: linear-gradient(100deg, rgba(124, 92, 255, 0.26), rgba(34, 211, 238, 0.05)); box-shadow: 0 14px 34px -18px rgba(124, 92, 255, 0.95); }
#modal-ai-transformation .ait-rt-model.is-on span.ait-rt-mark { background: linear-gradient(135deg, var(--ai-violet), var(--ai-blue)); border-color: transparent; color: #fff; }
#modal-ai-transformation .ait-rt-model.is-on img.ait-rt-mark { border-color: #8b6cff; }
#modal-ai-transformation .ait-rt-detail h3 small { color: #a996ff; }
#modal-ai-transformation .ait-rt-detail li::before { background: linear-gradient(90deg, var(--ai-violet), var(--ai-cyan)); }
#modal-ai-transformation .ait-data { border-color: rgba(124, 92, 255, 0.3); background: radial-gradient(120% 140% at 100% 0%, rgba(124, 92, 255, 0.14), transparent 50%), linear-gradient(160deg, #110f18, #000); }
#modal-ai-transformation .ait-data-list svg { color: var(--ai-cyan); }

/* stepper */
#modal-ai-transformation .ait-steps-line i { background: linear-gradient(90deg, #ff6b00, #ff4fa3 35%, #7c5cff 70%, #22d3ee); box-shadow: 0 0 12px rgba(124, 92, 255, 0.6); }
#modal-ai-transformation .ait-step.is-past .ait-step-dot { border-color: #8b6cff; color: #b9a8ff; }
#modal-ai-transformation .ait-step[aria-selected="true"] .ait-step-dot { background: linear-gradient(135deg, #ff6b00, #ff4fa3 55%, #7c5cff); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px rgba(124, 92, 255, 0.14), 0 0 26px rgba(124, 92, 255, 0.6); }
#modal-ai-transformation .ait-step[aria-selected="true"] .ait-step-name { color: #fff; }
#modal-ai-transformation .ait-steps.is-auto .ait-step[aria-selected="true"] .ait-step-dot::after { background: conic-gradient(var(--ai-cyan) calc(var(--dwell) * 360deg), transparent 0); }
#modal-ai-transformation .ait-sp-n { -webkit-text-stroke-color: #8b6cff; }
#modal-ai-transformation .ait-sp .ait-sp-get { border-color: rgba(124, 92, 255, 0.35); background: linear-gradient(160deg, rgba(124, 92, 255, 0.16), rgba(34, 211, 238, 0.05)); }
#modal-ai-transformation .ait-sp-get span { color: #7de8ff; }

/* FAQ + CTA */
#modal-ai-transformation .ait-faq-item::before { background: linear-gradient(180deg, var(--e-ember), var(--ai-violet)); }
#modal-ai-transformation .ait-cta::after { background: radial-gradient(closest-side, rgba(124, 92, 255, 0.3), transparent); }
#modal-ai-transformation .ait-cta::before {
    content: ''; position: absolute; z-index: -1; left: -140px; top: -160px; width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 107, 0, 0.18), transparent); pointer-events: none;
}

/* ---------- neural network canvas ---------------------------------------- */
#modal-ai-transformation .ait-neural {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0.7;
    -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 100%);
}
#modal-ai-transformation .ait-cta .ait-neural { opacity: 0.8; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }

/* ---------- tilt cards with glare (fine pointers only; JS adds .ait-tilt) -------- */
#modal-ai-transformation .ait-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--e-ease-out), border-color 0.3s; }
#modal-ai-transformation .ait-tilt.is-tilting { transition: transform 0.12s linear, border-color 0.3s; }
#modal-ai-transformation .ait-uc.ait-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); }
#modal-ai-transformation .ait-uc, #modal-ai-transformation .ait-data-list li, #modal-ai-transformation .ait-proof li { position: relative; }
#modal-ai-transformation .ait-uc.ait-tilt::after, #modal-ai-transformation .ait-data-list li.ait-tilt::after, #modal-ai-transformation .ait-proof li.ait-tilt::after, #modal-ai-transformation .ait-rt-task.ait-tilt::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(170, 150, 255, 0.16), transparent 60%);
}
#modal-ai-transformation .ait-tilt.is-tilting::after { opacity: 1; }
#modal-ai-transformation .ait-rt-task { position: relative; }

/* the pop on a pick always plays, even after the entrance animation ran */
#modal-ai-transformation.ait-anim .ait-builder.is-seen .ait-tile.is-pop, #modal-ai-transformation.ait-anim .ait-builder.is-seen .ait-prob.is-pop { animation: ait-pop 0.5s var(--e-ease-out); }

/* ==========================================================================
   ENTRANCES (JS adds .ait-anim when motion is allowed; `.is-seen` on first view)
   fill-mode backwards: after the entrance, hover and state styles own the element again
   ========================================================================== */
#modal-ai-transformation.ait-anim .ait-builder:not(.is-seen) .ait-tile,
#modal-ai-transformation.ait-anim .ait-builder:not(.is-seen) .ait-prob,
#modal-ai-transformation.ait-anim .ait-builder:not(.is-seen) .ait-canvas,
#modal-ai-transformation.ait-anim .ait-ind:not(.is-seen) .ait-tab,
#modal-ai-transformation.ait-anim .ait-pat:not(.is-seen) .ait-pat-tab,
#modal-ai-transformation.ait-anim .ait-pat:not(.is-seen) .ait-pat-stage,
#modal-ai-transformation.ait-anim .ait-router:not(.is-seen) > :not(svg),
#modal-ai-transformation.ait-anim .ait-steps:not(.is-seen) .ait-step,
#modal-ai-transformation.ait-anim .ait-calc:not(.is-seen) > * { opacity: 0; }
#modal-ai-transformation.ait-anim .ait-builder.is-seen .ait-tile { animation: ait-in 0.6s var(--e-ease-out) backwards; animation-delay: calc(var(--i, 0) * 26ms); }
#modal-ai-transformation.ait-anim .ait-builder.is-seen .ait-prob { animation: ait-in 0.6s var(--e-ease-out) backwards; animation-delay: calc(220ms + var(--i, 0) * 50ms); }
#modal-ai-transformation.ait-anim .ait-builder.is-seen .ait-canvas { animation: ait-in-soft 0.8s var(--e-ease-out) 0.12s backwards; }
#modal-ai-transformation.ait-anim .ait-ind.is-seen .ait-tab { animation: ait-in 0.55s var(--e-ease-out) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
#modal-ai-transformation.ait-anim .ait-pat.is-seen .ait-pat-tab { animation: ait-in-x 0.6s var(--e-ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
#modal-ai-transformation.ait-anim .ait-pat.is-seen .ait-pat-stage { animation: ait-in-soft 0.8s var(--e-ease-out) 0.15s backwards; }
#modal-ai-transformation.ait-anim .ait-router.is-seen > :not(svg) { animation: ait-in 0.7s var(--e-ease-out) backwards; }
#modal-ai-transformation.ait-anim .ait-router.is-seen > .ait-rt-hub { animation-delay: 0.15s; }
#modal-ai-transformation.ait-anim .ait-router.is-seen > .ait-rt-models { animation-delay: 0.3s; }
#modal-ai-transformation.ait-anim .ait-steps.is-seen .ait-step { animation: ait-in 0.6s var(--e-ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
#modal-ai-transformation.ait-anim .ait-calc.is-seen > * { animation: ait-in-soft 0.8s var(--e-ease-out) backwards; }
#modal-ai-transformation.ait-anim .ait-calc.is-seen > :nth-child(2) { animation-delay: 0.12s; }
@keyframes ait-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes ait-in-soft { from { opacity: 0; transform: translateY(22px); } }
@keyframes ait-in-x { from { opacity: 0; transform: translateX(-14px); } }

/* ---------- short laptop screens (1280x720, 1366x768): compact hero and builder --- */
@media (min-width: 1024px) and (max-height: 820px) {
    #modal-ai-transformation .ait-hero { padding-block: 26px 30px; }
    #modal-ai-transformation .ait-hero-title { margin-bottom: 16px; }
    #modal-ai-transformation .ait-hero-lede { margin-bottom: 22px; }
    #modal-ai-transformation .ait-hero-actions { margin-bottom: 24px; }
    #modal-ai-transformation .ait-con-body { gap: 9px; padding: 12px 16px 12px; }
    #modal-ai-transformation .ait-con-steps { padding-top: 10px; }
    #modal-ai-transformation .ait-tile { min-height: 74px; padding: 10px 6px 8px; gap: 6px; }
    #modal-ai-transformation .ait-prob { min-height: 58px; padding: 8px 12px; }
    #modal-ai-transformation .ait-canvas { gap: 10px; padding: 14px 16px; }
    #modal-ai-transformation .ait-builder { padding: 18px 20px; }
    #modal-ai-transformation .ait-cv-title { font-size: 1.12rem; }
}
@media (min-width: 1180px) and (max-height: 820px) {
    /* the picks sit right beside the canvas here, so the crumb row is redundant */
    #modal-ai-transformation .ait-cv-top { display: none; }
    #modal-ai-transformation .ait-cv-label .ait-cv-badge { order: 3; }
    #modal-ai-transformation .ait-cv-run { padding: 9px 12px; }
}

/* ---------- motion preferences -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #modal-ai-transformation *, #modal-ai-transformation *::before, #modal-ai-transformation *::after { animation: none !important; }
    #modal-ai-transformation .ait-word::after { transform: scaleX(1); }
    #modal-ai-transformation .ait-bpane, #modal-ai-transformation .ait-ind-panel, #modal-ai-transformation .ait-sp, #modal-ai-transformation .ait-rt-detail,
    #modal-ai-transformation .ait-faq-a, #modal-ai-transformation .ait-faq-a p, #modal-ai-transformation .ait-steps-line i, #modal-ai-transformation .ait-bar em { transition: none !important; }
}
@media (hover: none) {
    #modal-ai-transformation .ait-uc:hover, #modal-ai-transformation .ait-rt-model:hover { transform: none; }
}

/* single-column grids never grow past their card (min-content of a child must not widen the track) */
#modal-ai-transformation .ait-canvas, #modal-ai-transformation .ait-pat-stage, #modal-ai-transformation .ait-calc-in,
#modal-ai-transformation .ait-calc-out, #modal-ai-transformation .ait-steps, #modal-ai-transformation .ait-con-body,
#modal-ai-transformation .ait-rt-task, #modal-ai-transformation .ait-cv-runs { grid-template-columns: minmax(0, 1fr); }

/* ---------- builder: example note + live stepper states --------------------- */
#modal-ai-transformation .ait-bex {
    display: flex; align-items: flex-start; gap: 10px; min-height: 2.2em; margin: 0 0 14px;
    font-size: 0.82rem; line-height: 1.45; color: var(--e-smoke);
}
#modal-ai-transformation .ait-bex svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ai-cyan); }
#modal-ai-transformation .ait-bex b { color: #fff; font-weight: 600; }
#modal-ai-transformation .ait-builder.needs-pain .ait-bex b, #modal-ai-transformation .ait-builder.needs-ind .ait-bex b { color: var(--ai-cyan); }
/* done steps show a check, the current one pulses, the next one waits */
#modal-ai-transformation .ait-step-n { position: relative; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
#modal-ai-transformation .ait-builder.done-1 .ait-bpane-ind .ait-step-n,
#modal-ai-transformation .ait-builder.done-2 .ait-bpane-pain .ait-step-n {
    color: transparent; background: var(--ait-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23041a0c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@media (min-width: 960px) {
    #modal-ai-transformation .ait-builder[data-step="1"] .ait-bpane-ind .ait-step-n,
    #modal-ai-transformation .ait-builder[data-step="2"] .ait-bpane-pain .ait-step-n { background-color: var(--ai-violet); color: #fff; animation: ait-step-pulse 1.6s var(--e-ease-out) infinite; }
    #modal-ai-transformation .ait-builder.done-1[data-step="1"] .ait-bpane-ind .ait-step-n { color: transparent; background-color: var(--ait-ok); }
    #modal-ai-transformation .ait-builder[data-step="2"] .ait-bpane-pain .ait-step-t { color: #fff; }
    #modal-ai-transformation .ait-builder:not(.done-1)[data-step="1"] .ait-bpane-ind .ait-step-n { animation: none; background-color: var(--e-ember); }
}
@keyframes ait-step-pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.7); } 100% { box-shadow: 0 0 0 12px rgba(124, 92, 255, 0); } }

/* ---------- audit fixes ------------------------------------------------------ */
/* hero CTAs stay on one line on laptops */
@media (min-width: 1024px) and (max-width: 1439px) { #modal-ai-transformation .ait-hero-actions .x-btn-lg { padding: 0 24px; } }
/* three use cases on a two-column tablet grid: the last one spans the row */
@media (min-width: 640px) and (max-width: 999px) { #modal-ai-transformation .ait-uc-grid > .ait-uc:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* one family of model monograms */
#modal-ai-transformation .ait-rt-mark[data-mk] { border: 0; color: #fff; font: 700 0.9rem var(--e-display); letter-spacing: -0.02em; }
#modal-ai-transformation .ait-rt-model span.ait-rt-mark[data-mk="claude"] { background: linear-gradient(135deg, #d97757, #a3513a); }
#modal-ai-transformation .ait-rt-model span.ait-rt-mark[data-mk="openai"] { background: linear-gradient(135deg, #3b4252, #1c2029); box-shadow: inset 0 0 0 1px rgba(244, 239, 231, 0.2); }
#modal-ai-transformation .ait-rt-model span.ait-rt-mark[data-mk="azure"] { background: linear-gradient(135deg, #3f8cff, #1f5fd1); }
#modal-ai-transformation .ait-rt-model span.ait-rt-mark[data-mk="zia"] { background: linear-gradient(135deg, #f0b429, #d9480f); }
#modal-ai-transformation .ait-rt-model.is-on span.ait-rt-mark[data-mk] { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(124, 92, 255, 0.8); }

/* hero composition (owner: the console must not cover the globe). Desktop: the first screen is copy on the
   left and the whole globe on the right; the live agent console follows directly below, beside a short
   explainer, so nothing overlaps at any width. */
#modal-ai-transformation .ait-run-intro { display: none; }
@media (min-width: 1180px) {
    #modal-ai-transformation .ait-hero { align-items: start; padding-top: 0; }
    #modal-ai-transformation .ait-hero-grid { row-gap: clamp(24px, 4vh, 48px); }
    #modal-ai-transformation .ait-hero-copy {
        min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center;
        padding-block: clamp(24px, 5vh, 64px);
    }
    #modal-ai-transformation .ait-core {
        top: 0; height: calc(100svh - 68px);
        width: min(44vw, 660px);
        right: max(0px, calc((100% - var(--e-max)) / 2 - 40px));
        --fx-cx: 0.5; --fx-cy: 0.5; --fx-radius: 0.4;
    }
    #modal-ai-transformation .ait-hero-side {
        grid-column: 1 / -1; justify-self: stretch; max-width: none;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(40px, 6vw, 96px); align-items: center;
    }
    #modal-ai-transformation .ait-run-intro { display: block; max-width: 560px; }
    #modal-ai-transformation .ait-run-kicker {
        display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
        font-size: var(--e-fs-xs, 0.75rem); letter-spacing: 0.14em; text-transform: uppercase; color: #a99bff;
    }
    #modal-ai-transformation .ait-run-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: ait-run-pulse 1.8s ease-in-out infinite; }
    #modal-ai-transformation .ait-run-h { font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-2xl); line-height: 1.12; letter-spacing: -0.02em; color: var(--e-bone); margin: 0 0 14px; }
    #modal-ai-transformation .ait-run-p { color: var(--e-smoke); line-height: 1.6; margin: 0 0 22px; max-width: 52ch; }
    #modal-ai-transformation .ait-run-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: aitrun; }
    #modal-ai-transformation .ait-run-steps li {
        counter-increment: aitrun; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: baseline;
        padding: 12px 14px; border: 1px solid rgba(124, 92, 255, 0.22); border-radius: 14px; background: rgba(124, 92, 255, 0.05);
    }
    #modal-ai-transformation .ait-run-steps li::before { content: '0' counter(aitrun); grid-row: span 2; font-family: var(--e-display); font-weight: 700; color: #7c5cff; }
    #modal-ai-transformation .ait-run-steps b { color: var(--e-bone); font-weight: 600; }
    #modal-ai-transformation .ait-run-steps span { color: var(--e-smoke); font-size: var(--e-fs-sm); }
}
@keyframes ait-run-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #modal-ai-transformation .ait-run-kicker i { animation: none; } }


/* ===== contact.css ===== */
/* ==========================================================================
   Contact page (#modal-contact) — built on the EAS 2026 design system.
   Everything is scoped to #modal-contact. Mobile first.
   Motion: transform and opacity only; the clock uses tabular figures.
   ========================================================================== */

/* ---------- base ------------------------------------------------------- */
#modal-contact {
    --c-top: var(--sticky-top, 92px); /* clearance under the sticky page header */
    color: var(--e-bone);
    font-family: var(--e-body);
    font-size: var(--e-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (min-width: 1100px) and (max-width: 1599px) { #modal-contact { --c-top: var(--sticky-top, 146px); } } /* + section bar */
#modal-contact h1, #modal-contact h2, #modal-contact h3 {
    font-family: var(--e-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-wrap: balance;
    margin: 0;
}
#modal-contact h2 { font-size: var(--e-fs-2xl); }
#modal-contact h3 { font-size: var(--e-fs-lg); }
#modal-contact p { margin: 0; }
#modal-contact a { color: inherit; }
#modal-contact img { display: block; max-width: 100%; height: auto; }
#modal-contact svg { flex: none; }
#modal-contact ::selection { background: var(--e-ember); color: #000; }
#modal-contact section[id] { scroll-margin-top: var(--c-top); }
#modal-contact .c-word { color: var(--e-ember); }
#modal-contact .c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#modal-contact .c-inline-btn {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; color: var(--e-bone); text-decoration: underline; text-underline-offset: 3px;
}
#modal-contact .c-inline-btn:hover { color: var(--e-ember-hot); }
#modal-contact .c-btn-sm { min-height: 44px; padding: 0 18px; gap: 8px; }
#modal-contact .c-btn-sm svg { width: 16px; height: 16px; }

/* ---------- hero -------------------------------------------------------- */
#modal-contact .c-hero {
    position: relative; isolation: isolate; overflow: clip;
    padding: clamp(44px, 8vw, 112px) 0 clamp(48px, 7vw, 96px);
}
#modal-contact .c-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 10%, var(--e-ember-12), transparent 70%),
        linear-gradient(180deg, var(--e-coal), var(--e-black) 70%);
}
#modal-contact .c-aurora {
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}
#modal-contact .c-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 1024px) { #modal-contact .c-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; } }
/* keep the copy column darker than the drifting light so text stays above 4.5:1 */
#modal-contact .c-hero-copy { position: relative; }
#modal-contact .c-hero-copy::before {
    content: ''; position: absolute; inset: -12% -8% -12% -30%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
}
#modal-contact .c-hero h1 { font-size: var(--e-fs-hero); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 22px; }
#modal-contact .c-hero-lede { font-size: var(--e-fs-lg); line-height: 1.5; color: var(--e-smoke); max-width: 54ch; margin-bottom: 30px; }
#modal-contact .c-hero-lede strong { color: var(--e-bone); font-weight: 500; }
#modal-contact .c-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

/* proof strip: legacy data-count counters over a hidden copy of the final value (no reflow) */
#modal-contact .c-proof { margin: 0; padding: 20px 0 0; border-top: 1px solid var(--e-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 620px; }
#modal-contact .c-proof > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 5px; min-width: 0; }
#modal-contact .c-proof dt { font-size: var(--e-fs-xs); color: var(--e-dust); line-height: 1.3; }
#modal-contact .c-proof dd { margin: 0; display: flex; align-items: center; gap: 6px; font: 700 clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem)/1 var(--e-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-contact .c-n { display: inline-grid; }
#modal-contact .c-n > span { grid-area: 1 / 1; justify-self: start; }
#modal-contact .c-n-ghost { visibility: hidden; }
#modal-contact .c-star { width: 16px; height: 16px; fill: var(--e-ember-hot); }
@media (max-width: 479px) { #modal-contact .c-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; } }

/* ---------- signature: live availability ------------------------------- */
#modal-contact .c-avail {
    position: relative; width: 100%; max-width: 460px;
    display: grid; gap: 14px;
    padding: clamp(20px, 3vw, 26px);
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line-strong);
    background: linear-gradient(160deg, rgba(23, 19, 15, 0.94), rgba(13, 11, 9, 0.94));
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#modal-contact .c-avail.is-open { border-color: rgba(61, 220, 132, 0.28); }
@media (min-width: 1024px) { #modal-contact .c-avail { justify-self: end; } }
#modal-contact .c-avail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: var(--e-fs-sm); }
#modal-contact .c-avail-status { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
#modal-contact .c-avail-status b { font-weight: 600; color: var(--e-bone); }
#modal-contact .c-avail-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--e-dust); flex: none; }
#modal-contact .c-avail.is-open .c-avail-dot { background: #3ddc84; }
#modal-contact .c-avail.is-open .c-avail-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: #3ddc84;
    animation: c-ping 1.8s var(--e-ease-out) infinite;
}
@keyframes c-ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.8); opacity: 0; } }
#modal-contact .c-avail-tz { color: var(--e-dust); font-size: var(--e-fs-xs); white-space: nowrap; }
#modal-contact .c-avail-clock {
    display: flex; align-items: baseline; gap: 2px;
    font-family: var(--e-display); font-weight: 700; line-height: 1;
    font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
#modal-contact .c-avail-sec { color: var(--e-ember-hot); font-size: 0.5em; min-width: 2.4ch; }
#modal-contact .c-avail-ampm { margin-left: 8px; font: 500 var(--e-fs-md) var(--e-body); color: var(--e-smoke); letter-spacing: 0; }
#modal-contact .c-avail-count { font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-ember-hot); }
#modal-contact .c-avail.is-open .c-avail-count { color: #6ee7a8; }
#modal-contact .c-avail-day { overflow: clip; padding: 8px 8px 0; margin: 0 -8px; }
#modal-contact .c-avail-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(244, 239, 231, 0.08); }
#modal-contact .c-avail-bar-win { position: absolute; top: 0; bottom: 0; left: 37.5%; width: 37.5%; border-radius: 4px; background: var(--e-ember-25); box-shadow: inset 0 0 0 1px var(--e-ember-45); }
#modal-contact .c-avail-bar-fill {
    position: absolute; inset: 0; border-radius: 4px;
    background: linear-gradient(90deg, rgba(244, 239, 231, 0.04), rgba(244, 239, 231, 0.16));
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 900ms var(--e-ease-out);
}
#modal-contact .c-avail-bar-pos { position: absolute; inset: 0; transform: translateX(0); transition: transform 900ms var(--e-ease-out); pointer-events: none; }
#modal-contact .c-avail-bar-pos i {
    position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
    background: var(--e-bone); border: 3px solid var(--e-black); box-shadow: 0 0 0 2px var(--e-ember), 0 0 14px rgba(255, 107, 0, 0.6);
}
#modal-contact .c-avail:not(.is-live) .c-avail-bar-pos { opacity: 0; }
#modal-contact .c-avail-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.66rem; color: var(--e-dust); font-variant-numeric: tabular-nums; }
#modal-contact .c-week { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#modal-contact .c-week li { display: grid; justify-items: center; gap: 6px; padding: 8px 2px; border-radius: 10px; border: 1px solid transparent; transition: border-color var(--e-t-std), background var(--e-t-std); }
#modal-contact .c-week span { font-size: 0.7rem; font-weight: 600; color: var(--e-smoke); }
#modal-contact .c-week i { width: 100%; max-width: 30px; height: 4px; border-radius: 2px; background: var(--e-ember-45); }
#modal-contact .c-week .is-off span { color: var(--e-dust); }
#modal-contact .c-week .is-off i { background: rgba(244, 239, 231, 0.1); }
#modal-contact .c-week .is-today { border-color: var(--e-ember-45); background: var(--e-ember-12); }
#modal-contact .c-week .is-today span { color: var(--e-bone); }
#modal-contact .c-week .is-today i { background: var(--e-ember); box-shadow: 0 0 10px rgba(255, 107, 0, 0.6); }
#modal-contact .c-avail-note { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.5; }
#modal-contact .c-avail-foot { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }

/* ---------- ways to reach us ------------------------------------------- */
#modal-contact .c-reach { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { #modal-contact .c-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); } #modal-contact .c-reach > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { #modal-contact .c-reach { grid-template-columns: 1.15fr 1fr 1.15fr; } #modal-contact .c-reach > :last-child { grid-column: auto; } }
#modal-contact .c-tile {
    position: relative; isolation: isolate; overflow: hidden; min-width: 0;
    display: flex; flex-direction: column; gap: 12px;
    padding: clamp(20px, 3vw, 28px); border-radius: var(--e-r-md);
    background: var(--e-coal); border: 1px solid var(--e-line);
    transition: border-color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-contact .c-tile-featured { border-color: var(--e-ember-25); background: radial-gradient(100% 80% at 0% 0%, rgba(255, 107, 0, 0.12), transparent 60%), linear-gradient(160deg, var(--e-char), var(--e-coal)); }
#modal-contact .c-tile:hover { border-color: var(--e-line-strong); transform: translateY(-3px); }
#modal-contact .c-tile-featured:hover { border-color: var(--e-ember-45); }
#modal-contact .c-tile-glow {
    position: absolute; left: -160px; top: -160px; width: 320px; height: 320px; z-index: -1; pointer-events: none; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 107, 0, 0.16), transparent);
    opacity: 0; transition: opacity var(--e-t-std);
}
#modal-contact .c-tile:hover .c-tile-glow { opacity: 1; }
#modal-contact .c-tile-icon {
    width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line); color: var(--e-ember-hot);
    transition: transform var(--e-t-std) var(--e-ease-out), background var(--e-t-std), color var(--e-t-std), border-color var(--e-t-std);
}
#modal-contact .c-tile-icon svg { width: 22px; height: 22px; }
#modal-contact .c-tile:hover .c-tile-icon { transform: translateY(-2px) rotate(-6deg); background: var(--e-ember); border-color: var(--e-ember); color: #100800; }
#modal-contact .c-tile h3 { font-size: 1.25rem; margin-top: 4px; }
#modal-contact .c-tile > p:not(.c-tile-meta):not(.c-sr) { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }
#modal-contact .c-tile-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#modal-contact .c-tile-meta span { font-size: 0.72rem; padding: 5px 9px; border-radius: 6px; background: rgba(244, 239, 231, 0.05); color: var(--e-smoke); border: 1px solid var(--e-line); }
#modal-contact .c-tile-cta {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    margin-top: auto; min-height: 44px; padding: 0 20px; border-radius: var(--e-r-pill);
    border: 1px solid var(--e-line-strong); background: var(--e-char); color: var(--e-bone);
    font: 600 var(--e-fs-sm)/1 var(--e-body); cursor: pointer;
    transition: background var(--e-t-quick), border-color var(--e-t-quick), color var(--e-t-quick);
}
#modal-contact .c-tile-cta svg { width: 16px; height: 16px; transition: transform var(--e-t-std) var(--e-ease-out); }
/* the whole tile forwards clicks to its button (contact.js) */
#modal-contact .c-tile:has(.c-tile-cta) { cursor: pointer; }
#modal-contact .c-tile:hover .c-tile-cta svg { transform: translateX(4px); }
#modal-contact .c-tile-featured .c-tile-cta { background: var(--e-ember); border-color: var(--e-ember); color: #100800; box-shadow: 0 10px 30px -10px rgba(255, 107, 0, 0.7); }
#modal-contact .c-tile:not(.c-tile-featured):hover .c-tile-cta { border-color: var(--e-ember-45); }
#modal-contact .c-tile:has(.c-tile-cta:focus-visible) { border-color: var(--e-ember); }
#modal-contact .c-direct { display: grid; gap: 8px; margin-top: auto; }
#modal-contact .c-direct-row {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 14px;
    border-radius: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--e-line);
    transition: border-color var(--e-t-quick);
}
#modal-contact .c-direct-row:hover { border-color: var(--e-line-strong); }
#modal-contact .c-direct-row a {
    flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center;
    overflow-wrap: anywhere; line-height: 1.3;
    color: var(--e-bone); text-decoration: none; font-size: clamp(0.8rem, 0.72rem + 0.35vw, 0.93rem); font-weight: 500;
}
#modal-contact .c-direct-row a:hover { color: var(--e-ember-hot); }
#modal-contact .c-copy {
    flex: none; min-width: 64px; min-height: 40px; padding: 0 12px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--e-line-strong); background: transparent; color: var(--e-smoke);
    font: 600 0.74rem var(--e-body); letter-spacing: 0.02em;
    transition: color var(--e-t-quick), border-color var(--e-t-quick), background var(--e-t-quick), transform var(--e-t-quick);
}
#modal-contact .c-copy:hover { color: var(--e-bone); border-color: rgba(244, 239, 231, 0.32); }
#modal-contact .c-copy:active { transform: scale(0.95); }
#modal-contact .c-copy.is-copied { color: #3ddc84; border-color: rgba(61, 220, 132, 0.45); background: rgba(61, 220, 132, 0.08); }
#modal-contact .c-copy.is-copied span { display: inline-block; animation: c-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes c-pop { from { transform: scale(0.7); } to { transform: none; } }

/* ---------- what happens next: steps joined node to node by ember segments */
#modal-contact .c-flow { --c-node: 44px; --c-gap: 30px; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--c-gap); }
#modal-contact .c-flow-step { position: relative; padding-left: calc(var(--c-node) + 18px); }
#modal-contact .c-flow-step:not(:last-child)::before, #modal-contact .c-flow-step:not(:last-child)::after {
    content: ''; position: absolute; pointer-events: none; border-radius: 2px;
    left: calc(var(--c-node) / 2 - 1px); top: calc(var(--c-node) / 2); width: 2px; height: calc(100% + var(--c-gap));
}
#modal-contact .c-flow-step::before { background: var(--e-line-strong); }
#modal-contact .c-flow-step::after { background: linear-gradient(180deg, var(--e-ember-hot), var(--e-ember)); box-shadow: 0 0 12px rgba(255, 107, 0, 0.5); transform-origin: 50% 0; }
#modal-contact .c-flow-node {
    position: absolute; left: 0; top: 0; z-index: 1; width: var(--c-node); height: var(--c-node); border-radius: 50%;
    display: grid; place-items: center; background: var(--e-ember); color: #100800;
    box-shadow: 0 0 0 6px var(--e-black), 0 0 0 7px var(--e-ember-25), 0 0 24px rgba(255, 107, 0, 0.45);
}
#modal-contact .c-flow-node b { font: 700 1rem var(--e-display); }
#modal-contact .c-flow-meta { padding-top: 10px; margin-bottom: 8px; font-size: var(--e-fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--e-ember-hot); }
#modal-contact .c-flow-step h3 { font-size: var(--e-fs-xl); margin-bottom: 10px; }
#modal-contact .c-flow-step > p:last-child { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; max-width: 42ch; }
/* armed by the script: hidden until the list is in view, then node, text and segment play in order */
#modal-contact .c-flow.is-armed .c-flow-step::after { transform: scaleY(0); }
#modal-contact .c-flow.is-armed .c-flow-node { transform: scale(0.5); opacity: 0; }
#modal-contact .c-flow.is-armed .c-flow-step > :not(.c-flow-node) { opacity: 0; transform: translate3d(0, 14px, 0); }
#modal-contact .c-flow.is-on .c-flow-step::after { transform: none; transition: transform 620ms var(--e-ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)); }
#modal-contact .c-flow.is-on .c-flow-node { transform: none; opacity: 1; transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms var(--e-ease-out); }
#modal-contact .c-flow.is-on .c-flow-step > :not(.c-flow-node) { opacity: 1; transform: none; transition: opacity 600ms var(--e-ease-out), transform 800ms var(--e-ease-out); }
#modal-contact .c-flow.is-on .c-flow-step:nth-child(1) > * { transition-delay: 0.1s; }
#modal-contact .c-flow.is-on .c-flow-step:nth-child(1)::after { transition-delay: 0.25s; }
#modal-contact .c-flow.is-on .c-flow-step:nth-child(2) > * { transition-delay: 0.6s; }
#modal-contact .c-flow.is-on .c-flow-step:nth-child(2)::after { transition-delay: 0.75s; }
#modal-contact .c-flow.is-on .c-flow-step:nth-child(3) > * { transition-delay: 1.1s; }
@media (min-width: 800px) {
    #modal-contact .c-flow { --c-gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #modal-contact .c-flow-step { padding-left: 0; padding-top: calc(var(--c-node) + 14px); }
    #modal-contact .c-flow-step:not(:last-child)::before, #modal-contact .c-flow-step:not(:last-child)::after {
        left: calc(var(--c-node) / 2); top: calc(var(--c-node) / 2 - 1px); width: calc(100% + var(--c-gap)); height: 2px;
    }
    #modal-contact .c-flow-step::after { background: linear-gradient(90deg, var(--e-ember), var(--e-ember-hot)); transform-origin: 0 50%; }
    #modal-contact .c-flow.is-armed .c-flow-step::after { transform: scaleX(0); }
}

/* ---------- who you will talk to --------------------------------------- */
#modal-contact .c-who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { #modal-contact .c-who { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
#modal-contact .c-who-photo {
    position: relative; margin: 0; border-radius: var(--e-r-lg); overflow: hidden;
    border: 1px solid var(--e-line); aspect-ratio: 4 / 3; background: var(--e-coal);
}
#modal-contact .c-who-photo img { width: 100%; height: 100%; object-fit: cover; }
#modal-contact .c-who-photo figcaption {
    position: absolute; left: 14px; right: 14px; bottom: 14px;
    display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
    border-radius: 14px; background: rgba(0, 0, 0, 0.74); border: 1px solid var(--e-line);
    font-size: var(--e-fs-xs); color: var(--e-smoke); line-height: 1.3;
}
#modal-contact .c-who-photo figcaption b { display: block; color: var(--e-bone); font-size: var(--e-fs-sm); font-weight: 600; }
#modal-contact .c-who-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--e-ember-12); color: var(--e-ember-hot); border: 1px solid var(--e-ember-25);
    font: 700 0.8rem var(--e-display);
}
#modal-contact .c-who-copy h2 { margin-bottom: 14px; }
#modal-contact .c-who-text { color: var(--e-smoke); max-width: 54ch; margin-bottom: 22px; }
#modal-contact .c-who-text strong { color: var(--e-bone); font-weight: 500; }
#modal-contact .c-certs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
#modal-contact .c-certs span {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line); background: var(--e-coal);
    font-size: var(--e-fs-xs); color: var(--e-smoke); font-weight: 500;
}
#modal-contact .c-certs img { width: 22px; height: 22px; border-radius: 6px; }
#modal-contact .c-who-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--e-bone); font-weight: 600; font-size: var(--e-fs-sm); text-decoration: none; }
#modal-contact .c-who-link svg { width: 16px; height: 16px; color: var(--e-ember); transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-contact .c-who-link:hover { color: var(--e-ember-hot); }
#modal-contact .c-who-link:hover svg { transform: translateX(4px); }

/* ---------- faq --------------------------------------------------------- */
#modal-contact .c-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) {
    #modal-contact .c-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
    #modal-contact .c-faq-intro { position: sticky; top: calc(var(--c-top) + 8px); align-self: start; }
}
#modal-contact .c-faq-intro h2 { margin-bottom: 16px; }
#modal-contact .c-faq-list { border-top: 1px solid var(--e-line); }
#modal-contact .c-faq-item { border-bottom: 1px solid var(--e-line); }
#modal-contact .c-faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    min-height: 64px; padding: 16px 0; font: 600 var(--e-fs-md)/1.4 var(--e-body); color: var(--e-bone);
    transition: color var(--e-t-quick);
}
#modal-contact .c-faq-item summary::-webkit-details-marker { display: none; }
#modal-contact .c-faq-item summary:hover { color: var(--e-ember-hot); }
#modal-contact .c-faq-plus {
    width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    border: 1px solid var(--e-line-strong); color: var(--e-bone);
    transition: transform var(--e-t-std) var(--e-ease-out), background var(--e-t-quick), color var(--e-t-quick), border-color var(--e-t-quick);
}
#modal-contact .c-faq-plus svg { width: 14px; height: 14px; }
#modal-contact .c-faq-item[open] .c-faq-plus { transform: rotate(45deg); background: var(--e-ember); color: #100800; border-color: transparent; }
#modal-contact .c-faq-body { padding: 0 0 22px; color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.65; max-width: 62ch; }
#modal-contact .c-faq-body a { color: var(--e-bone); text-decoration: underline; text-underline-offset: 3px; }
#modal-contact .c-faq-body a:hover { color: var(--e-ember-hot); }
@keyframes c-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#modal-contact .c-faq-item[open] .c-faq-body { animation: c-faq-in 360ms var(--e-ease-out); }
/* smooth height where the browser supports animating <details> content */
@supports selector(::details-content) {
    #modal-contact .c-faq-item { interpolate-size: allow-keywords; }
    #modal-contact .c-faq-item::details-content { height: 0; overflow: clip; transition: height 320ms var(--e-ease-out), content-visibility 320ms allow-discrete; }
    #modal-contact .c-faq-item[open]::details-content { height: auto; }
}

/* ---------- partner band ----------------------------------------------- */
#modal-contact .c-partner {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center;
    padding: clamp(22px, 4vw, 40px); border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line); background: var(--e-coal);
}
@media (min-width: 860px) { #modal-contact .c-partner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; } }
#modal-contact .c-partner img { width: 200px; height: auto; border-radius: 12px; background: #fff; padding: 10px 14px; }
#modal-contact .c-partner h2 { font-size: var(--e-fs-xl); margin-bottom: 8px; }
#modal-contact .c-partner p { color: var(--e-smoke); font-size: var(--e-fs-sm); max-width: 58ch; line-height: 1.55; }
#modal-contact .c-partner .x-btn { justify-self: start; }

/* ---------- final cta: reuse .x-cta from eas.css ------------------------ */
#modal-contact .x-cta h2 { font-size: var(--e-fs-2xl); }
#modal-contact #contact-cta { padding-bottom: clamp(88px, 10vw, 150px); }

/* ---------- motion preferences ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #modal-contact .c-avail.is-open .c-avail-dot::after, #modal-contact .c-copy.is-copied span, #modal-contact .c-faq-item[open] .c-faq-body { animation: none; }
    #modal-contact .c-avail-bar-pos, #modal-contact .c-avail-bar-fill, #modal-contact .c-tile, #modal-contact .c-tile-icon, #modal-contact .c-tile-cta svg, #modal-contact .c-who-link svg { transition: none; }
    #modal-contact .c-tile:hover, #modal-contact .c-tile:hover .c-tile-icon { transform: none; }
    #modal-contact .c-tile-glow { display: none; }
    #modal-contact .c-faq-item::details-content { transition: none; }
}
@media (hover: none) {
    #modal-contact .c-tile:hover, #modal-contact .c-tile:hover .c-tile-icon, #modal-contact .c-tile:hover .c-tile-cta svg { transform: none; }
    #modal-contact .c-tile-glow { display: none; }
}

/* tablet: the availability card uses the full width, clock beside the day bar */
@media (min-width: 640px) and (max-width: 1023px) {
    #modal-contact .c-avail { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
    #modal-contact .c-avail > .c-avail-head, #modal-contact .c-avail > .c-week, #modal-contact .c-avail > .c-avail-note, #modal-contact .c-avail > .c-avail-foot { grid-column: 1 / -1; }
    #modal-contact .c-avail-clock { grid-column: 1; grid-row: 2; }
    #modal-contact .c-avail-count { grid-column: 1; grid-row: 3; }
    #modal-contact .c-avail-day { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}


/* ===== dialogs.css ===== */
/* ==========================================================================
   EAS article pages + ROI dialogs.
   - .xa (article pages): the 15 service pages and the 5 process pages. Full pages in the
     normal document flow (they scroll the window under the global navbar): a hero band
     (crumbs, kicker, h1, promise, intro, actions, facts), then .dlg-sec sections in a
     reading column (sticky label column from 1024px) and the closing .dlg-cta band.
   - .service-modal-overlay (true dialogs): the 6 ROI cases opened from the pricing page.
   The content blocks (.dlg-promise, .dlg-facts, .dlg-sec, lists, timeline, chips, CTA...)
   are shared: they are scoped to :is(.service-modal-overlay, .xa).
   Mobile first.
   ========================================================================== */

/* ---------- 1. Dialog overlay + panel (ROI cases) ----------------------- */
.service-modal-overlay {
    display: grid;
    place-items: stretch;
    padding: 0;
    background: rgba(0, 0, 0, 0.82);
    color: var(--e-bone);
    font-family: var(--e-body);
    font-size: var(--e-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: contain;
}
:is(.service-modal-overlay, .xa) ::selection { background: var(--e-ember); color: #000; }

.service-modal-overlay .service-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--e-coal);
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
}
/* legacy animated glow border and blobs */
.service-modal-overlay .service-modal::before,
.service-modal-overlay .service-modal::after,
.service-modal-overlay .modal-decoration { display: none; content: none; animation: none; }

@media (min-width: 760px) {
    .service-modal-overlay { place-items: center; padding: max(24px, 4vh) var(--e-gutter); }
    .service-modal-overlay .service-modal {
        width: min(100%, 920px);
        height: auto;
        max-height: 90vh;
        border: 1px solid var(--e-line-strong);
        border-radius: var(--e-r-lg);
        box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .service-modal-overlay .dlg-roi { width: min(100%, 700px); }
}

/* ---------- 2. Dialog header -------------------------------------------- */
.service-modal-overlay .dlg-head {
    z-index: 2;
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    background: var(--e-coal);
    border-bottom: 1px solid transparent;
    transition: border-color var(--e-t-std) var(--e-ease-std), box-shadow var(--e-t-std) var(--e-ease-std);
}
.service-modal-overlay .dlg-head.is-scrolled {
    border-bottom-color: var(--e-line);
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.9);
}
:is(.service-modal-overlay, .xa) .dlg-tile {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--e-line);
    color: var(--e-ember);
    flex: none;
}
:is(.service-modal-overlay, .xa) .dlg-tile img { width: 26px; height: 26px; display: block; }
:is(.service-modal-overlay, .xa) .dlg-tile svg { width: 22px; height: 22px; display: block; }
:is(.service-modal-overlay, .xa).dlg-service .dlg-tile svg,
.service-modal-overlay .dlg-service .dlg-tile svg { width: 24px; height: 24px; }
:is(.service-modal-overlay, .xa) .dlg-tile-n {
    font-family: var(--e-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--e-ember);
}
.service-modal-overlay .dlg-head-text { min-width: 0; display: grid; gap: 2px; }
.service-modal-overlay .dlg-head-kicker {
    margin: 0;
    font-size: var(--e-fs-xs);
    color: var(--e-smoke);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.service-modal-overlay .modal-title {
    margin: 0;
    font-family: var(--e-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--e-bone);
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.service-modal-overlay .modal-title span { color: inherit; background: none; -webkit-text-fill-color: inherit; }

/* close button: a round button in the header slot at every width (ROI dialogs are short) */
.service-modal-overlay .modal-close {
    position: static;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--e-line-strong);
    color: var(--e-bone);
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--e-t-std) var(--e-ease-out), background var(--e-t-quick), color var(--e-t-quick), border-color var(--e-t-quick);
}
.service-modal-overlay .modal-close svg { width: 18px; height: 18px; stroke-width: 2.2; }
.service-modal-overlay .modal-close:hover { background: rgba(244, 239, 231, 0.08); border-color: var(--e-line-strong); color: var(--e-bone); transform: rotate(90deg); }

/* ---------- 3. Dialog body (scrolls inside the panel) ------------------- */
.service-modal-overlay .dlg-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--e-coal);
    scrollbar-width: thin;
    scrollbar-color: var(--e-ash) transparent;
}
.service-modal-overlay .dlg-body::-webkit-scrollbar { width: 8px; }
.service-modal-overlay .dlg-body::-webkit-scrollbar-track { background: transparent; }
.service-modal-overlay .dlg-body::-webkit-scrollbar-thumb { background: var(--e-ash); border-radius: 4px; }
.service-modal-overlay .dlg-body::-webkit-scrollbar-thumb:hover { background: var(--e-dust); }
@media (min-width: 760px) {
    .service-modal-overlay .dlg-head { padding: 16px 20px 16px 28px; }
    .service-modal-overlay .dlg-body { padding: 12px 40px 44px; }
}

.service-modal-overlay .dlg-body p,
.xa p { margin: 0; }
.service-modal-overlay .dlg-body ul,
.service-modal-overlay .dlg-body ol,
.xa ul,
.xa ol { margin: 0; padding: 0; list-style: none; }
.service-modal-overlay .dlg-body a:not(.x-btn),
.xa .xa-body :is(p, li, dd) a:not(.x-btn),
.xa .xa-hero .dlg-intro a:not(.x-btn) { color: var(--e-bone); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--e-ember-45); }
.service-modal-overlay .dlg-body a:not(.x-btn):hover,
.xa .xa-body :is(p, li, dd) a:not(.x-btn):hover,
.xa .xa-hero .dlg-intro a:not(.x-btn):hover { text-decoration-color: var(--e-ember); }
.service-modal-overlay .dlg-body strong,
.xa strong { color: var(--e-bone); font-weight: 600; }

/* ---------- 4. Lede: promise, intro, facts ----------------------------- */
.service-modal-overlay .dlg-lede { padding: 20px 0 28px; display: grid; gap: 16px; }
:is(.service-modal-overlay, .xa) .dlg-promise {
    font-family: var(--e-display);
    font-weight: 700;
    font-size: var(--e-fs-xl);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--e-bone);
    text-wrap: balance;
    max-width: 22ch;
}
:is(.service-modal-overlay, .xa) .dlg-promise em { font-style: normal; color: var(--e-ember); }
:is(.service-modal-overlay, .xa) .dlg-intro { color: var(--e-smoke); font-size: var(--e-fs-md); max-width: 64ch; }
:is(.service-modal-overlay, .xa) .dlg-intro strong { color: var(--e-bone); font-weight: 500; }

:is(.service-modal-overlay, .xa) .dlg-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 20px;
    margin: 8px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--e-line);
}
/* one wrapping value never pushes the others down: every fact starts at the top (audit #83) */
:is(.service-modal-overlay, .xa) .dlg-facts > div { display: grid; gap: 4px; padding: 6px 0; align-content: start; }
:is(.service-modal-overlay, .xa) .dlg-facts dt { font-size: var(--e-fs-xs); color: var(--e-smoke); }
:is(.service-modal-overlay, .xa) .dlg-facts dd { margin: 0; font-size: var(--e-fs-sm); color: var(--e-bone); font-weight: 500; line-height: 1.45; }
:is(.service-modal-overlay, .xa) .dlg-facts .dlg-appstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
:is(.service-modal-overlay, .xa) .dlg-appstrip img { width: 26px; height: 26px; border-radius: 6px; display: block; object-fit: contain; }

/* ---------- 5. Sections: label column + content ------------------------ */
:is(.service-modal-overlay, .xa) .dlg-sec {
    display: grid;
    gap: 12px 40px;
    padding: 26px 0;
    border-top: 1px solid var(--e-line);
}
:is(.service-modal-overlay, .xa) .dlg-sec-title {
    margin: 0;
    font-family: var(--e-display);
    font-weight: 700;
    font-size: var(--e-fs-lg);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--e-bone);
}
:is(.service-modal-overlay, .xa) .dlg-sec-title small {
    display: block;
    margin-top: 6px;
    font: 400 var(--e-fs-sm)/1.5 var(--e-body);
    color: var(--e-smoke);
    letter-spacing: 0;
}
:is(.service-modal-overlay, .xa) .dlg-sec > .dlg-sec-body { min-width: 0; display: grid; gap: 16px; }
@media (min-width: 760px) {
    .service-modal-overlay .dlg-sec { grid-template-columns: 200px minmax(0, 1fr); padding: 32px 0; }
    .service-modal-overlay .dlg-sec-title { position: sticky; top: 0; align-self: start; }
}

/* benefits: 2-up without chrome, just a tick + hierarchy */
:is(.service-modal-overlay, .xa) .dlg-benefits { display: grid; gap: 18px 28px; }
@media (min-width: 640px) { :is(.service-modal-overlay, .xa) .dlg-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:is(.service-modal-overlay, .xa) .dlg-benefits li { position: relative; padding-left: 20px; }
:is(.service-modal-overlay, .xa) .dlg-benefits li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--e-ember); border-radius: 2px; }
:is(.service-modal-overlay, .xa) .dlg-benefits h3,
:is(.service-modal-overlay, .xa) .dlg-benefits h4 { margin: 0 0 4px; font: 600 var(--e-fs-md)/1.35 var(--e-body); color: var(--e-bone); letter-spacing: 0; }
:is(.service-modal-overlay, .xa) .dlg-benefits p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }

/* numbered "what is included" list */
:is(.service-modal-overlay, .xa) .dlg-list { display: grid; gap: 0; counter-reset: dlg; }
:is(.service-modal-overlay, .xa) .dlg-list li {
    counter-increment: dlg;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 12px 0;
    border-top: 1px solid var(--e-line);
    font-size: var(--e-fs-sm);
    color: var(--e-smoke);
    line-height: 1.55;
}
:is(.service-modal-overlay, .xa) .dlg-list li:first-child { border-top: 0; padding-top: 0; }
:is(.service-modal-overlay, .xa) .dlg-list li::before {
    content: counter(dlg, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: var(--e-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--e-ember);
    padding-top: 0.2em;
    font-variant-numeric: tabular-nums;
}
:is(.service-modal-overlay, .xa) .dlg-list li b { display: block; font-weight: 600; color: var(--e-bone); font-size: var(--e-fs-md); line-height: 1.35; }

/* timeline */
:is(.service-modal-overlay, .xa) .dlg-timeline { display: grid; gap: 0; }
:is(.service-modal-overlay, .xa) .dlg-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 0 0 18px 18px;
    font-size: var(--e-fs-sm);
    color: var(--e-smoke);
    line-height: 1.5;
}
:is(.service-modal-overlay, .xa) .dlg-timeline li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--e-ember); box-shadow: 0 0 0 3px var(--e-coal); z-index: 1; }
:is(.service-modal-overlay, .xa) .dlg-timeline li::after { content: ''; position: absolute; left: 3px; top: 0.55em; bottom: -0.2em; width: 1px; background: var(--e-line-strong); }
:is(.service-modal-overlay, .xa) .dlg-timeline li:last-child { padding-bottom: 0; }
:is(.service-modal-overlay, .xa) .dlg-timeline li:last-child::after { display: none; }
:is(.service-modal-overlay, .xa) .dlg-timeline .dlg-when { font-family: var(--e-display); font-weight: 600; font-size: 0.8rem; color: var(--e-bone); letter-spacing: 0.01em; padding-top: 0.15em; font-variant-numeric: tabular-nums; }
:is(.service-modal-overlay, .xa) .dlg-timeline b { display: block; font-weight: 600; color: var(--e-bone); }
@media (max-width: 420px) {
    :is(.service-modal-overlay, .xa) .dlg-timeline li { grid-template-columns: 1fr; }
}

/* apps involved */
:is(.service-modal-overlay, .xa) .dlg-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
:is(.service-modal-overlay, .xa) .dlg-apps li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--e-line);
    background: rgba(0, 0, 0, 0.35);
    font-size: var(--e-fs-sm);
    font-weight: 500;
    color: var(--e-bone);
    min-width: 0;
}
:is(.service-modal-overlay, .xa) .dlg-apps img { width: 24px; height: 24px; flex: none; border-radius: 6px; }
:is(.service-modal-overlay, .xa) .dlg-apps span { min-width: 0; line-height: 1.3; }
/* subtitles wrap instead of being cut ("The system of rec...", audit #90) */
:is(.service-modal-overlay, .xa) .dlg-apps small { display: block; font-size: 0.72rem; color: var(--e-smoke); font-weight: 400; line-height: 1.35; margin-top: 1px; }
:is(.service-modal-overlay, .xa) .dlg-apps-note { color: var(--e-smoke); font-size: var(--e-fs-xs); }

/* built with: a labelled group per path (custom stack chips, Zoho app tiles) */
:is(.service-modal-overlay, .xa) .dlg-stack { display: grid; gap: 10px; min-width: 0; }
:is(.service-modal-overlay, .xa) .dlg-stack-label {
    margin: 0;
    font: 600 var(--e-fs-xs)/1.4 var(--e-body);
    color: var(--e-smoke);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
:is(.service-modal-overlay, .xa) .dlg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.service-modal-overlay, .xa) .dlg-chips li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px;
    border-radius: var(--e-r-pill);
    border: 1px solid var(--e-line-strong);
    background: rgba(0, 0, 0, 0.35);
    font-size: var(--e-fs-xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--e-bone);
    white-space: nowrap;
}
:is(.service-modal-overlay, .xa) .dlg-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--e-ember); box-shadow: 0 0 8px var(--e-ember-45); flex: none; }
/* outside the Zoho pillar, Zoho logos are quiet (greyscale until hover) so no single vendor dominates */
:is(.service-modal-overlay, .xa):not(#modal-consulting) .dlg-apps img { filter: grayscale(1) opacity(0.7); transition: filter var(--e-t-quick); }
:is(.service-modal-overlay, .xa):not(#modal-consulting) .dlg-apps li:hover img { filter: none; }

/* good fit / plain checklists */
:is(.service-modal-overlay, .xa) .dlg-fit { display: grid; gap: 10px; }
:is(.service-modal-overlay, .xa) .dlg-fit li { position: relative; padding-left: 26px; font-size: var(--e-fs-sm); color: var(--e-bone); line-height: 1.5; }
:is(.service-modal-overlay, .xa) .dlg-fit li::before {
    content: ''; position: absolute; left: 0; top: 0.35em; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid var(--e-ember-45); background: var(--e-ember-12);
}
:is(.service-modal-overlay, .xa) .dlg-fit li::after {
    content: ''; position: absolute; left: 4px; top: 0.35em; width: 5px; height: 8px; margin-top: 1px;
    border: solid var(--e-ember-hot); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
:is(.service-modal-overlay, .xa) .dlg-fit li span { color: var(--e-smoke); }

/* prose */
:is(.service-modal-overlay, .xa) .dlg-prose { display: grid; gap: 12px; color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; max-width: 62ch; }

/* two-column split inside a section body */
:is(.service-modal-overlay, .xa) .dlg-split { display: grid; gap: 22px; }
@media (min-width: 640px) { :is(.service-modal-overlay, .xa) .dlg-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
:is(.service-modal-overlay, .xa) .dlg-split h3 { margin: 0 0 12px; font: 600 var(--e-fs-sm)/1.4 var(--e-body); color: var(--e-smoke); letter-spacing: 0; }

/* ---------- 6. CTA block --------------------------------------------------- */
:is(.service-modal-overlay, .xa) .dlg-cta {
    display: grid;
    gap: 18px;
    margin-top: 6px;
    padding: 26px 22px;
    border-radius: var(--e-r-md);
    border: 1px solid var(--e-ember-25);
    background: radial-gradient(120% 160% at 100% 0%, var(--e-ember-12), transparent 55%), var(--e-char);
}
:is(.service-modal-overlay, .xa) .dlg-cta h2,
:is(.service-modal-overlay, .xa) .dlg-cta h3 { margin: 0 0 6px; font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-lg); line-height: 1.15; letter-spacing: -0.01em; color: var(--e-bone); text-wrap: balance; }
:is(.service-modal-overlay, .xa) .dlg-cta p { color: var(--e-smoke); font-size: var(--e-fs-sm); max-width: 48ch; text-wrap: pretty; }
:is(.service-modal-overlay, .xa) .dlg-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
:is(.service-modal-overlay, .xa) .dlg-cta-actions .x-btn { min-height: 48px; padding: 0 22px; }
:is(.service-modal-overlay, .xa) .dlg-cta .x-btn-ghost { --bd: var(--e-line-strong); }
:is(.service-modal-overlay, .xa) .dlg-cta .x-btn-ghost:hover { background: rgba(244, 239, 231, 0.06); }

/* ---------- 7. Process flavour: step pager --------------------------------- */
:is(.service-modal-overlay, .xa).dlg-process .dlg-promise { max-width: 24ch; }
:is(.service-modal-overlay, .xa) .dlg-seq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "prev steps next";
    align-items: center;
    gap: 12px;
    padding: 18px 0 4px;
    border-top: 1px solid var(--e-line);
    font-size: var(--e-fs-sm);
    color: var(--e-smoke);
}
:is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-prev { grid-area: prev; justify-self: start; }
:is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-steps { grid-area: steps; justify-self: center; }
:is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-next { grid-area: next; justify-self: end; }
/* narrow: the step dashes on their own row, Prev and Next share the row below (audit #87) */
@media (max-width: 860px) {
    :is(.service-modal-overlay, .xa) .dlg-seq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "steps steps" "prev next"; }
    :is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-steps { justify-self: start; }
}
@media (max-width: 560px) {
    :is(.service-modal-overlay, .xa) .dlg-seq { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "next" "prev"; gap: 10px; }
    :is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-prev,
    :is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-next { justify-self: stretch; justify-content: flex-start; white-space: normal; }
    :is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-next svg { margin-left: auto; }
}
:is(.service-modal-overlay, .xa) .dlg-seq a {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; max-width: 100%;
    color: var(--e-bone); text-decoration: none; font-weight: 500;
    padding: 10px 14px; min-height: 44px; border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong);
    transition: border-color var(--e-t-quick), background var(--e-t-quick);
}
:is(.service-modal-overlay, .xa) .dlg-seq a:hover { border-color: var(--e-ember-45); background: var(--e-ember-12); text-decoration: none; }
:is(.service-modal-overlay, .xa) .dlg-seq a b { font-family: var(--e-display); color: var(--e-ember); font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.service-modal-overlay, .xa) .dlg-seq svg { width: 14px; height: 14px; flex: none; }
:is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-steps { display: inline-flex; gap: 6px; }
:is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-steps i { width: 20px; height: 3px; border-radius: 2px; background: rgba(244, 239, 231, 0.22); }
:is(.service-modal-overlay, .xa) .dlg-seq .dlg-seq-steps i.is-on { background: var(--e-ember); }

/* ---------- 8. ROI flavour (compact dialog) ---------------------------------- */
.service-modal-overlay .dlg-roi .dlg-lede { padding-top: 16px; padding-bottom: 20px; gap: 10px; }
.service-modal-overlay .dlg-roi .dlg-promise { font-size: var(--e-fs-lg); max-width: 30ch; }
.service-modal-overlay .dlg-roi .dlg-intro { font-size: var(--e-fs-sm); }
.service-modal-overlay .dlg-cases { display: grid; gap: 12px; padding: 4px 0 20px; }
.service-modal-overlay .dlg-case {
    display: grid; gap: 12px;
    padding: 18px;
    border-radius: var(--e-r-md);
    border: 1px solid var(--e-line);
    background: rgba(0, 0, 0, 0.35);
}
.service-modal-overlay .dlg-case-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.service-modal-overlay .dlg-case h3 { margin: 0; font: 600 var(--e-fs-md)/1.3 var(--e-body); color: var(--e-bone); letter-spacing: 0; }
.service-modal-overlay .dlg-case-tag { font-size: var(--e-fs-xs); color: var(--e-smoke); }
.service-modal-overlay .dlg-case dl { margin: 0; display: grid; gap: 8px; }
.service-modal-overlay .dlg-case dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; font-size: var(--e-fs-sm); line-height: 1.5; }
.service-modal-overlay .dlg-case dt { color: var(--e-smoke); }
.service-modal-overlay .dlg-case dd { margin: 0; color: var(--e-smoke); }
.service-modal-overlay .dlg-case-result {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    padding-top: 12px; border-top: 1px solid var(--e-line);
}
.service-modal-overlay .dlg-case-result b { font-family: var(--e-display); font-weight: 700; font-size: 1.05rem; color: var(--e-ember-hot); letter-spacing: -0.01em; }
.service-modal-overlay .dlg-case-result span { font-size: var(--e-fs-sm); color: var(--e-smoke); }
.service-modal-overlay .dlg-roi .dlg-cta { padding: 20px; gap: 14px; }
@media (min-width: 760px) {
    .service-modal-overlay .dlg-roi .dlg-body { padding-inline: 28px; }
    .service-modal-overlay .dlg-roi .dlg-cta { grid-template-columns: 1fr; }
    .service-modal-overlay .dlg-roi .dlg-cta-actions { justify-content: flex-start; max-width: none; }
}
.service-modal-overlay .dlg-roi-note { font-size: var(--e-fs-xs); color: var(--e-smoke); padding-bottom: 16px; }

/* ---------- 9. Dialog motion / preferences ---------------------------------- */
.service-modal-overlay .service-modal { transition: transform var(--e-t-slow) var(--e-ease-out), opacity var(--e-t-std) var(--e-ease-std); }
@media (max-width: 759px) {
    .service-modal-overlay .service-modal { transform: translateY(28px); }
    .service-modal-overlay.active .service-modal { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .service-modal-overlay,
    .service-modal-overlay .service-modal,
    .service-modal-overlay .modal-close,
    .service-modal-overlay .dlg-head { transition: none; }
    .service-modal-overlay .service-modal { transform: none; }
    .service-modal-overlay .modal-close:hover { transform: none; }
}
@media (hover: none) {
    .service-modal-overlay .modal-close:hover { transform: none; }
}
@media (forced-colors: active) {
    .service-modal-overlay .service-modal, :is(.service-modal-overlay, .xa) .dlg-cta, .service-modal-overlay .dlg-case, .service-modal-overlay .modal-close { border: 1px solid CanvasText; }
}

/* ==========================================================================
   10. Article pages (.xa): services and process steps as full pages
   ========================================================================== */
.xa {
    color: var(--e-bone);
    font-family: var(--e-body);
    font-size: var(--e-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.xa h1, .xa h2, .xa h3 { margin: 0; }
.xa section[id] { scroll-margin-top: var(--sticky-top, 96px); }
.xa img { max-width: 100%; }

/* ---- hero band ---- */
.xa-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
    border-bottom: 1px solid var(--e-line);
    background:
        radial-gradient(60% 80% at 92% 0%, var(--e-ember-12), transparent 62%),
        radial-gradient(40% 60% at 0% 100%, rgba(255, 107, 0, 0.05), transparent 70%),
        linear-gradient(180deg, var(--e-coal), var(--e-black) 92%);
}
/* a faint engineering grid behind the copy, fading out to the right */
.xa-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(244, 239, 231, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 239, 231, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(90% 90% at 20% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(90% 90% at 20% 30%, #000 20%, transparent 75%);
}
.xa-hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
.xa-crumbs { margin: 0 0 clamp(22px, 3vw, 36px); font-size: var(--e-fs-xs); color: var(--e-dust); }
.xa-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.xa-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.xa-crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--e-ash); }
.xa-crumbs li { min-height: 44px; }
.xa-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--e-smoke); text-decoration: none; padding: 0; transition: color var(--e-t-quick); }
.xa-crumbs a:hover { color: var(--e-ember-hot); }
.xa-crumbs [aria-current] { color: var(--e-bone); font-weight: 500; }

.xa-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.xa-kicker .dlg-tile { width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 0, 0, 0.55); border-color: var(--e-line-strong); box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.06), 0 14px 30px -18px var(--e-ember-45); }
/* the eyebrow wraps instead of being cut ("...Azure Open...", audit #94) */
.xa-kicker .dlg-head-kicker { font-size: var(--e-fs-sm); color: var(--e-smoke); line-height: 1.45; min-width: 0; }

.xa .xa-title {
    font-family: var(--e-display);
    font-weight: 700;
    font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-wrap: balance;
    color: var(--e-bone);
    margin: 0 0 clamp(18px, 2.4vw, 26px);
    max-width: 16ch;
}
.xa-process .xa-title { max-width: 14ch; }
/* the promise: a real subheading, big enough to read as one (audit #84) */
.xa .xa-hero .dlg-promise {
    font-size: clamp(1.3rem, 0.95rem + 1.5vw, 2.1rem);
    line-height: 1.14;
    max-width: 30ch;
    margin: 0 0 16px;
}
.xa .xa-hero .dlg-intro { font-size: var(--e-fs-md); line-height: 1.65; max-width: 62ch; }
.xa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(24px, 3vw, 34px) 0 0; }

/* facts: a quiet "at a glance" list; a card beside the copy on wide screens */
.xa .xa-hero .dlg-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: clamp(30px, 4vw, 40px) 0 0;
    padding: 0;
    border-top: 0;
    border-radius: var(--e-r-md);
    border: 1px solid var(--e-line);
    background: rgba(13, 11, 9, 0.72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.xa .xa-hero .dlg-facts > div { padding: 14px 18px; gap: 3px; }
.xa .xa-hero .dlg-facts > div + div { border-top: 1px solid var(--e-line); }
.xa .xa-hero .dlg-facts dt { font-size: var(--e-fs-xs); color: var(--e-dust); letter-spacing: 0.02em; }
.xa .xa-hero .dlg-facts dd { font-size: var(--e-fs-sm); }
@media (min-width: 640px) and (max-width: 1023px) {
    .xa .xa-hero .dlg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xa .xa-hero .dlg-facts > div + div { border-top: 0; border-left: 1px solid var(--e-line); }
}
@media (min-width: 1024px) {
    .xa-hero-in {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        column-gap: clamp(48px, 6vw, 96px);
    }
    .xa-hero-in > * { grid-column: 1; }
    .xa-hero-in > .xa-crumbs { grid-column: 1 / -1; }
    .xa .xa-hero-in > .dlg-facts { grid-column: 2; grid-row: 2 / span 6; align-self: center; margin: 0; }
    .xa .xa-hero .dlg-facts > div { padding: 18px 22px; }
}

/* ---- body: sections in a reading column ---- */
.xa-body { padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 7vw, 104px); }
.xa .xa-body > .dlg-sec { padding: clamp(28px, 4vw, 48px) 0; }
.xa .xa-body > .dlg-sec:first-child { border-top: 0; }
.xa .xa-body .dlg-sec-title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); line-height: 1.12; text-wrap: balance; }
.xa .xa-body .dlg-sec-body { gap: 20px; }
.xa .dlg-benefits p, .xa .dlg-list li, .xa .dlg-timeline li, .xa .dlg-fit li, .xa .dlg-prose { font-size: var(--e-fs-md); }
.xa .dlg-benefits h3 { font-size: var(--e-fs-lg); }
.xa .dlg-list li b { font-size: var(--e-fs-lg); margin-bottom: 2px; }
@media (min-width: 1024px) {
    /* sticky label column + content column */
    .xa .xa-body > .dlg-sec { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
    .xa .xa-body .dlg-sec-title { position: sticky; top: calc(var(--sticky-top, 96px) + 8px); align-self: start; }
    .xa .xa-body .dlg-sec-body { max-width: 860px; }
}
/* the closing CTA is a full-width band: text left, actions right on wide screens (audit #86) */
.xa .xa-body > .dlg-cta {
    margin-top: clamp(16px, 2vw, 24px);
    padding: clamp(26px, 4vw, 48px);
    border-radius: var(--e-r-lg);
}
.xa .xa-body > .dlg-cta h2 { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.2rem); margin-bottom: 10px; }
.xa .xa-body > .dlg-cta p { font-size: var(--e-fs-md); max-width: 52ch; }
.xa .xa-body > .dlg-cta .x-btn { min-height: 52px; }
@media (min-width: 900px) {
    .xa .xa-body > .dlg-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 56px; }
    .xa .xa-body > .dlg-cta .dlg-cta-actions { justify-content: flex-end; flex-wrap: nowrap; }
}
@media (max-width: 559px) {
    .xa .xa-body > .dlg-cta .dlg-cta-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .xa .xa-body > .dlg-cta .dlg-cta-actions .x-btn { justify-content: center; }
    .xa-hero-actions .x-btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .xa-crumbs a { transition: none; }
}

/* deep audit (Sept 2026) */
/* app icons: full colour where there is no hover (phones), and a lone last card spans the row */
@media (hover: none) { :is(.service-modal-overlay, .xa):not(#modal-consulting) .dlg-apps img { filter: none; } }
@media (max-width: 559px) { :is(.service-modal-overlay, .xa) .dlg-apps li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
:is(.service-modal-overlay, .xa) .dlg-apps small { font-size: 0.75rem; }
/* demo names in "See it live" lists are links to their card in the portfolio */
.xa .dlg-benefits h3 a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--e-ember-45); }
.xa .dlg-benefits h3 a:hover { color: var(--e-ember-hot); text-decoration-color: var(--e-ember); }
/* laptops with short screens (1366x768): the hero calls to action stay above the fold */
@media (min-width: 1100px) and (max-height: 820px) {
    .xa-hero { padding-top: 16px; padding-bottom: 36px; }
    .xa-crumbs { margin-bottom: 14px; }
    .xa .xa-title { font-size: clamp(2.3rem, 1.2rem + 2.6vw, 3.5rem); margin-bottom: 14px; }
}
.xa h3, .xa .dlg-sec-title { text-wrap: balance; }



/* ===== home-wow.css ===== */
/* ==========================================================================
   Home "wow" layer (app/js/home-wow.js): kinetic headings, velocity marquee,
   manual-vs-automated split, "Built by EAS" 3D wall, pillar micro-charts,
   cursor accent. Everything degrades to a static, readable layout without
   JS or with prefers-reduced-motion.
   ========================================================================== */

/* ---------- shared -------------------------------------------------------- */
.x-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 1. Kinetic headings (words masked, lifted in on scroll) -------- */
.x-kw {
    display: inline-block; vertical-align: top; overflow: hidden;
    padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em;
}
.x-kw > span { display: inline-block; transform-origin: 0 100%; }

/* ---------- 2. Velocity marquee band -------------------------------------- */
.x-vmq {
    position: relative; z-index: 1; overflow: hidden;
    padding: clamp(22px, 3.4vw, 46px) 0 clamp(14px, 2vw, 26px);
    background: var(--e-black); border-top: 1px solid var(--e-line);
}
.x-vmq-row { padding-block: 0.06em; }
.x-vmq-track {
    display: flex; align-items: center; gap: 0.32em; width: max-content; white-space: nowrap;
    font: 700 clamp(2.2rem, 5.2vw, 5rem)/1 var(--e-display);
    letter-spacing: -0.02em; text-transform: uppercase;
    will-change: transform;
}
.x-vmq-track span { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 239, 231, 0.4); }
.x-vmq-track span.is-hot {
    -webkit-text-stroke: 0;
    background: linear-gradient(100deg, #ffc49a 0%, var(--e-ember-hot) 30%, var(--e-ember) 62%, var(--e-ember-deep) 100%);
    -webkit-background-clip: text; background-clip: text;
}
.x-vmq-track i {
    flex: none; width: 0.34em; height: 0.34em; background: var(--e-ember);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0z'/></svg>") center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.6));
}
.x-vmq-row-2 { margin-top: clamp(4px, 1vw, 12px); }
.x-vmq-row-2 .x-vmq-track { font-size: clamp(1.1rem, 2.3vw, 2.2rem); font-weight: 600; gap: 0.8em; text-transform: none; letter-spacing: 0; }
.x-vmq-row-2 .x-vmq-track span { color: var(--e-smoke); -webkit-text-stroke: 0; }
.x-vmq-row-2 .x-vmq-track i { width: 0.5em; height: 0.5em; filter: none; opacity: 0.8; }

/* ---------- 3. Manual vs automated --------------------------------------- */
.x-auto-box { display: grid; gap: 20px; --split: 0%; }
.x-auto-stage {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line-strong);
    background: var(--e-coal);
    touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.x-auto-layer { padding: clamp(16px, 2.4vw, 30px); }
.x-auto-man {
    background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(244, 239, 231, 0.035) 27px 28px),
        linear-gradient(160deg, #15110d, #0b0907);
}
.x-auto-bot {
    position: absolute; inset: 0; z-index: 1;
    clip-path: inset(0 calc(100% - var(--split)) 0 0);
    background:
        radial-gradient(80% 110% at 0% 0%, rgba(255, 107, 0, 0.24), transparent 62%),
        radial-gradient(60% 80% at 100% 100%, rgba(255, 107, 0, 0.1), transparent 70%),
        linear-gradient(160deg, #1e140b, #0a0705);
}
.x-auto-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; margin-bottom: 16px; }
.x-auto-chip {
    font: 600 0.74rem/1 var(--e-body); letter-spacing: 0.02em;
    padding: 8px 12px; border-radius: var(--e-r-pill);
    border: 1px solid var(--e-line-strong); color: var(--e-smoke);
}
.x-auto-chip.is-on { background: var(--e-ember); border-color: transparent; color: #140800; box-shadow: 0 0 24px -4px rgba(255, 107, 0, 0.8); }
.x-auto-clock { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--e-smoke); }
.x-auto-clock b { font: 700 0.98rem/1 var(--e-display); color: var(--e-bone); font-variant-numeric: tabular-nums; min-width: 5.2em; text-align: right; }
.x-auto-clock svg { width: 18px; height: 18px; fill: none; stroke: #f5b458; stroke-width: 2; stroke-linecap: round; flex: none; }
.x-auto-hand { transform-origin: 12px 12px; animation: x-auto-spin 3s linear infinite; }
.x-auto-clock.is-on b { color: var(--e-ember-hot); }
@keyframes x-auto-spin { to { transform: rotate(360deg); } }

.x-auto-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.x-auto-rows li {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    height: 68px; padding: 0 14px; border-radius: 14px;
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
}
.x-auto-man li { border-style: dashed; border-color: rgba(244, 239, 231, 0.16); }
.x-auto-man li:nth-child(odd) { transform: rotate(-0.5deg); }
.x-auto-man li:nth-child(even) { transform: rotate(0.4deg); }
.x-auto-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(244, 239, 231, 0.05); border: 1px solid var(--e-line); }
.x-auto-ic img, .x-auto-ic svg { width: 24px; height: 24px; filter: grayscale(0.9) opacity(0.8); }
.x-auto-tx { min-width: 0; }
.x-auto-tx b, .x-auto-tx small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-auto-tx b { font-weight: 600; font-size: 0.95rem; color: var(--e-bone); }
.x-auto-tx small { font-size: 0.76rem; color: var(--e-smoke); margin-top: 2px; }
.x-auto-t { font: 700 0.74rem/1 var(--e-display); letter-spacing: 0.03em; padding: 6px 9px; border-radius: 8px; white-space: nowrap; }
.x-auto-t.is-warn { color: #f7bd6a; background: rgba(245, 165, 36, 0.12); }
.x-auto-t.is-bad { color: #ff8b7d; background: rgba(255, 90, 70, 0.12); }
.x-auto-t.is-ok { color: #7ef0b4; background: rgba(61, 220, 132, 0.12); }

/* the automated pipeline: a lit rail, nodes that fire in turn, one travelling pulse */
.x-auto-bot li { border-color: rgba(255, 107, 0, 0.3); background: rgba(255, 107, 0, 0.06); }
.x-auto-bot .x-auto-rows::before {
    content: ''; position: absolute; left: 36px; top: 34px; bottom: 34px; width: 2px; z-index: 2;
    background: linear-gradient(var(--e-ember-hot), rgba(255, 107, 0, 0.25)); border-radius: 2px;
}
.x-auto-bot .x-auto-rows::after {
    content: ''; position: absolute; left: 32px; top: 30px; width: 10px; height: 10px; z-index: 3; border-radius: 50%;
    background: #ffe2cc; box-shadow: 0 0 12px 4px rgba(255, 107, 0, 0.9);
    animation: x-auto-travel 1.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes x-auto-travel { 0% { transform: translateY(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translateY(234px); opacity: 0; } }
.x-auto-node {
    position: relative; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle, #ffd2b0 0 14%, var(--e-ember) 26%, rgba(255, 107, 0, 0.22) 50%, transparent 66%);
    animation: x-auto-fire 1.6s var(--e-ease-out) infinite;
}
.x-auto-node::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(255, 140, 58, 0.55); }
.x-auto-node::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 110, 0.75), rgba(255, 107, 0, 0.3) 45%, transparent 70%); opacity: 0; animation: x-auto-glow 1.6s var(--e-ease-out) infinite; animation-delay: inherit; }
.x-auto-rows li:nth-child(2) .x-auto-node { animation-delay: 0.4s; }
.x-auto-rows li:nth-child(3) .x-auto-node { animation-delay: 0.8s; }
.x-auto-rows li:nth-child(4) .x-auto-node { animation-delay: 1.2s; }
@keyframes x-auto-fire { 0%, 34%, 100% { transform: scale(1); } 10% { transform: scale(1.2); } }
@keyframes x-auto-glow { 0%, 34%, 100% { opacity: 0; transform: scale(0.7); } 10% { opacity: 1; transform: scale(1); } }
.x-auto:not(.is-live) .x-auto-hand,
.x-auto:not(.is-live) .x-auto-node, .x-auto:not(.is-live) .x-auto-node::before,
.x-auto:not(.is-live) .x-auto-bot .x-auto-rows::after { animation-play-state: paused; }

/* the divider */
.x-auto-split { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translateX(var(--split)); }
.x-auto-split::before {
    content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, var(--e-ember-hot) 12%, var(--e-ember) 88%, transparent);
    box-shadow: 0 0 18px 2px rgba(255, 107, 0, 0.55);
}
.x-auto-grip {
    /* follows the seam but never leaves the card: 8px inside at 0% and at 100% */
    position: absolute; left: 0; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 calc(8px + var(--p, 0) * -66px);
    display: grid; place-items: center; border-radius: 50%;
    background: var(--e-ember); color: #140800;
    box-shadow: 0 0 0 7px rgba(255, 107, 0, 0.18), 0 12px 30px -6px rgba(255, 107, 0, 0.75);
    transition: transform var(--e-t-std) var(--e-ease-out);
}
.x-auto-grip svg { width: 22px; height: 22px; }
.x-auto-stage:hover .x-auto-grip, .x-auto-stage.is-drag .x-auto-grip { transform: scale(1.1); }
.x-auto-box:has(.x-auto-range:focus-visible) .x-auto-grip { outline: 2px solid var(--e-bone); outline-offset: 5px; }

/* the accessible scrubber */
.x-auto-ctrl { display: flex; align-items: center; gap: 14px; }
.x-auto-end { flex: none; font-size: 0.8rem; font-weight: 600; color: var(--e-smoke); }
.x-auto-end:last-child { color: var(--e-ember-hot); }
.x-auto-range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 30px; margin: 0; background: transparent; cursor: pointer; }
.x-auto-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) var(--split), rgba(244, 239, 231, 0.12) var(--split)); }
.x-auto-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) var(--split), rgba(244, 239, 231, 0.12) var(--split)); }
.x-auto-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--e-bone); border: 5px solid var(--e-ember); box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.16); }
.x-auto-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--e-bone); border: 5px solid var(--e-ember); box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.16); }
.x-auto-range:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 4px; border-radius: 8px; }

/* live numbers */
.x-auto-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
@media (min-width: 900px) { .x-auto-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-auto-metrics > div { padding: 16px 18px 18px; border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: var(--e-coal); }
.x-auto-metrics dt { font-size: 0.78rem; color: var(--e-smoke); line-height: 1.35; }
.x-auto-metrics dd { margin: 10px 0 0; }
.x-auto-metrics dd b { display: block; font: 700 var(--e-fs-xl)/1 var(--e-display); color: var(--e-bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.x-auto-metrics dd i { display: block; height: 3px; margin-top: 14px; border-radius: 3px; background: rgba(244, 239, 231, 0.08); overflow: hidden; }
.x-auto-metrics dd s { display: block; height: 100%; text-decoration: none; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember-hot)); transform-origin: left; transform: scaleX(var(--m, 0)); }
.x-auto-note { font-size: 0.78rem; color: var(--e-smoke); }
.x-auto-end { cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--e-t-quick); }
.x-auto-end:hover { color: var(--e-bone); }
/* phones: no wipe (the seam would splice both layers' titles); a tap or the slider flips Manual / Automated */
@media (max-width: 640px) {
    .x-auto-stage { display: grid; cursor: pointer; }
    .x-auto-stage > .x-auto-layer { grid-area: 1 / 1; min-width: 0; }
    .x-auto-bot { position: relative; inset: auto; clip-path: none; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--e-ease-out), visibility 0s linear 0.45s; }
    .x-auto-man { transition: opacity 0.45s var(--e-ease-out); }
    .x-auto-box.is-auto .x-auto-bot { opacity: 1; visibility: visible; transition: opacity 0.45s var(--e-ease-out); }
    .x-auto-box.is-auto .x-auto-man { opacity: 0; }
    .x-auto-split { display: none; }
    .x-auto-rows li { height: auto; min-height: 64px; padding-block: 10px; }
    .x-auto-tx b, .x-auto-tx small { white-space: normal; overflow: visible; }
    .x-auto-man li:nth-child(odd), .x-auto-man li:nth-child(even) { transform: none; }
    .x-auto-bot .x-auto-rows::after { display: none; }
    .x-auto-end { font-weight: 700; }
    .x-auto-box:not(.is-auto) .x-auto-end:first-child, .x-auto-box.is-auto .x-auto-end:last-child { color: var(--e-ember-hot); }
    .x-auto-box.is-auto .x-auto-end:first-child { color: var(--e-smoke); }
}
@media (max-width: 520px) {
    .x-auto-rows li { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 0 10px; }
    .x-auto-ic, .x-auto-node { width: 38px; height: 38px; }
    .x-auto-bot .x-auto-rows::before { left: 29px; }
    .x-auto-bot .x-auto-rows::after { left: 25px; }
    .x-auto-clock > span { display: none; }
    .x-auto-end { font-size: 0.72rem; }
}

/* ---------- 4. Built by EAS: 3D showcase wall + live filters ------------- */
/* filter bar: type chips (one swipeable row on phones) + industry select + live count */
.x-work-filters {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    margin-top: clamp(18px, 2.4vw, 30px); min-height: 42px;
}
html:not(.js) .x-work-filters { display: none; }
.x-work-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 auto; }
.x-work-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 14px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); background: rgba(13, 11, 9, 0.7);
    color: var(--e-smoke); font: 600 0.84rem/1 var(--e-body); white-space: nowrap; cursor: pointer;
    transition: background var(--e-t-quick), color var(--e-t-quick), border-color var(--e-t-quick), box-shadow var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
.x-work-chip i { font-style: normal; min-width: 1.7em; padding: 2px 6px; border-radius: 999px; text-align: center; font-size: 0.68rem; line-height: 1.3; background: rgba(244, 239, 231, 0.07); color: var(--e-dust); font-variant-numeric: tabular-nums; }
.x-work-chip:hover { color: var(--e-bone); border-color: var(--e-ember-45); }
.x-work-chip:active { transform: scale(0.96); }
.x-work-chip:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 2px; }
.x-work-chip[aria-pressed="true"] { background: var(--e-ember); border-color: transparent; color: #140800; box-shadow: 0 10px 26px -12px rgba(255, 107, 0, 0.85); }
.x-work-chip[aria-pressed="true"] i { background: rgba(20, 8, 0, 0.16); color: rgba(20, 8, 0, 0.75); }
.x-work-chip.is-empty { opacity: 0.4; }
.x-work-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.x-work-ind {
    position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 34px 0 16px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); background: rgba(13, 11, 9, 0.7); color: var(--e-smoke);
    transition: border-color var(--e-t-quick), color var(--e-t-quick);
}
.x-work-ind::after { content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.x-work-ind:hover, .x-work-ind:focus-within { border-color: var(--e-ember-45); color: var(--e-bone); }
.x-work-ind.is-on { border-color: var(--e-ember); color: var(--e-bone); box-shadow: 0 0 0 3px var(--e-ember-12); }
.x-work-ind select {
    -webkit-appearance: none; appearance: none; border: 0; outline: 0; background: transparent; color: inherit; cursor: pointer;
    font: 600 0.84rem/1 var(--e-body); padding: 10px 0; max-width: 200px;
}
.x-work-ind select option { background: #120f0c; color: var(--e-bone); }
.x-work-count { margin: 0; font-size: 0.84rem; color: var(--e-dust); white-space: nowrap; }
.x-work-count b { color: var(--e-bone); font-weight: 700; font-variant-numeric: tabular-nums; }
.x-work-count span { color: var(--e-ember-hot); font-weight: 600; margin-left: 4px; }

.x-work-stage {
    position: relative; overflow: hidden;
    height: clamp(380px, min(46vw, 100vh - 250px), 660px);
    margin: clamp(10px, 1.6vw, 20px) 0 clamp(28px, 4vw, 52px);
    perspective: 1600px; perspective-origin: 50% 40%;
}
.x-work-stage::after {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background:
        linear-gradient(90deg, #000, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 91%, #000),
        linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 11%, rgba(0, 0, 0, 0) 89%, #000);
}
.x-work-stage.is-flat::after { display: none; }
.x-work-wall {
    position: absolute; left: 50%; top: 50%; width: 150%; margin-left: -75%;
    display: grid; gap: 18px;
    transform-style: preserve-3d;
    transform: translateY(-50%) rotateX(18deg) rotateZ(-8deg);
}
.x-work-row { display: flex; gap: 18px; width: max-content; transform-style: preserve-3d; }
/* only the tiles take the pointer: in a preserve-3d scene the wall plane can otherwise win the hit test */
.x-work-stage:not(.is-flat) .x-work-wall, .x-work-stage:not(.is-flat) .x-work-row { pointer-events: none; }
.x-work-stage:not(.is-flat) .x-work-card:not(.is-dim) { pointer-events: auto; }
.x-work-stage.is-live .x-work-row { will-change: transform; }
.x-work-card {
    --c: #ff6b00;
    position: relative; flex: none; display: block;
    width: clamp(230px, 20vw, 330px); aspect-ratio: 16 / 10;
    border-radius: 14px; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(244, 239, 231, 0.12);
    background: linear-gradient(140deg, color-mix(in srgb, var(--c) 45%, #000), #0d0b09 70%);
    box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.95);
    color: var(--e-bone); text-align: left;
    transition: transform 520ms var(--e-ease-out), border-color var(--e-t-std), box-shadow 520ms var(--e-ease-out), opacity 600ms var(--e-ease-out), filter 600ms var(--e-ease-out);
}
.x-work-stage .x-work-card img { display: block; width: 100%; height: 100%; max-width: none; opacity: 1; object-fit: cover; object-position: top center; filter: saturate(0.85) brightness(0.8); transition: filter var(--e-t-std), transform 700ms var(--e-ease-out); }
.x-work-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%) 200% 0 / 250% 100% no-repeat; transition: background-position 900ms var(--e-ease-out); }
.x-work-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: block;
    padding: 34px 14px 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92) 52%);
    transform: translateY(101%); transition: transform 460ms var(--e-ease-out);
}
.x-work-meta { display: grid; gap: 3px; min-width: 0; }
.x-work-meta b { font: 700 0.95rem/1.15 var(--e-display); color: var(--e-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-work-meta small { font-size: 0.72rem; color: var(--e-ember-hot); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-work-meta em { font-style: normal; color: var(--e-smoke); }
.x-work-open {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    opacity: 0; transform: translateY(-6px) scale(0.92);
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
    border: 0; border-radius: 999px; background: var(--e-ember); color: #140800; cursor: pointer;
    font: 700 0.76rem/1 var(--e-body); white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(255, 107, 0, 0.9);
    transition: opacity var(--e-t-std), transform var(--e-t-std) var(--e-ease-out), background var(--e-t-quick);
}
.x-work-card:hover .x-work-open, .x-work-card:focus-within .x-work-open, .x-work-stage.is-flat .x-work-open { opacity: 1; transform: none; }
.x-work-open svg { width: 14px; height: 14px; transition: transform var(--e-t-std) var(--e-ease-out); }
.x-work-open:hover { background: var(--e-ember-hot); }
.x-work-open:hover svg { transform: translateX(2px); }
.x-work-open:focus-visible { outline: 2px solid var(--e-bone); outline-offset: 2px; }
.x-work-card:hover, .x-work-card:focus-within {
    transform: translateZ(70px) translateY(-6px) scale(1.06);
    border-color: var(--e-ember-45);
    box-shadow: 0 44px 70px -26px rgba(0, 0, 0, 0.95), 0 0 46px -8px rgba(255, 107, 0, 0.55);
}
.x-work-stage .x-work-card:hover img, .x-work-stage .x-work-card:focus-within img { filter: none; transform: scale(1.04); }
.x-work-card:hover::after, .x-work-card:focus-within::after { background-position: -100% 0; }
.x-work-card:hover .x-work-cap, .x-work-card:focus-within .x-work-cap { transform: none; }

/* filtered wall: matches gather in the lit middle row, everything else recedes */
.x-work-card.is-dim { opacity: 0.16; filter: grayscale(1) brightness(0.7); pointer-events: none; box-shadow: none; }
.x-work-stage.is-filtered .x-work-row.is-lit .x-work-card { border-color: color-mix(in srgb, var(--c) 55%, rgba(244, 239, 231, 0.2)); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95), 0 0 40px -14px color-mix(in srgb, var(--c) 80%, transparent); }
.x-work-stage.is-filtered .x-work-row.is-lit .x-work-card img { filter: saturate(1) brightness(0.92); }
.x-work-stage.is-filtered .x-work-row.is-lit .x-work-cap { transform: none; }

/* flat mode: phones, touch, reduced motion (JS adds .is-flat with the same query) */
@media (max-width: 759px), (hover: none), (prefers-reduced-motion: reduce) {
    .x-work-stage { height: auto; min-height: 220px; }
}
.x-work-stage.is-flat { height: auto; perspective: none; overflow: visible; }
.x-work-stage.is-flat .x-work-wall { position: static; width: auto; margin: 0; transform: none; display: block; }
.x-work-stage.is-flat .x-work-row {
    width: auto; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--e-gutter);
    padding: 6px var(--e-gutter) 18px; scrollbar-width: none;
}
.x-work-stage.is-flat .x-work-row::-webkit-scrollbar { display: none; }
.x-work-stage.is-flat .x-work-card { width: min(80vw, 340px); scroll-snap-align: start; }
.x-work-stage.is-flat .x-work-card[hidden] { display: none; }
.x-work-stage.is-flat .x-work-card:hover, .x-work-stage.is-flat .x-work-card:focus-within { transform: none; }
.x-work-stage.is-flat .x-work-cap { transform: none; padding-top: 40px; }
.x-work-stage.is-flat .x-work-card img { filter: saturate(0.95) brightness(0.9); }

/* phones: the chips become one swipeable row, full bleed, fading only where there is more */
@media (max-width: 759px) {
    .x-work-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .x-work-chips {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin: 0 calc(var(--e-gutter) * -1); padding: 2px var(--e-gutter) 4px; scroll-padding-inline: var(--e-gutter);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--e-gutter), #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 var(--e-gutter), #000 calc(100% - 40px), transparent);
    }
    .x-work-chips::-webkit-scrollbar { display: none; }
    .x-work-chip { flex: none; }
    .x-work-tools { justify-content: space-between; }
    .x-work-ind { min-width: 0; flex: 0 1 auto; }
    .x-work-ind select { max-width: 52vw; font-size: 16px; } /* 16px: iOS does not zoom into the select */
    .x-work-count { font-size: 0.8rem; }
    .x-work-count span { display: none; }
}

.x-work-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.x-work-stats { display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 4vw, 60px); margin: 0; }
.x-work-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.x-work-stats dt { font-size: 0.8rem; color: var(--e-smoke); }
.x-work-stats dd { margin: 0; font: 700 var(--e-fs-2xl)/1 var(--e-display); color: var(--e-bone); font-variant-numeric: tabular-nums; }
.x-work-stats > div:first-child dd { color: var(--e-ember); }

/* ---------- 5. Advantage pillar micro-charts ------------------------------ */
.x-viz { display: block; width: 96px; height: 28px; margin: 12px 0 0 auto; overflow: visible; }
.x-viz path { fill: none; stroke: var(--e-ember); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--e-ease-out) 0.35s; }
.x-viz circle { fill: var(--e-ember-hot); opacity: 0; transition: opacity 400ms 1.6s; filter: drop-shadow(0 0 5px rgba(255, 107, 0, 0.9)); }
.x-viz .x-viz-base { stroke: var(--e-line-strong); stroke-width: 1; stroke-dasharray: 2 4; stroke-dashoffset: 0; }
.x-viz .x-viz-check { stroke: var(--e-ember-hot); transition-delay: 1.3s; }
.x-pillars.is-in .x-viz path:not(.x-viz-base) { stroke-dashoffset: 0; }
.x-pillars.is-in .x-viz circle { opacity: 1; }
.x-viz-ticks { position: relative; height: 12px; margin-top: 20px; border-radius: 2px; overflow: hidden; }
.x-viz-ticks::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--e-ember) 0 2px, transparent 2px 4px); opacity: 0.3; }
.x-viz-ticks::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, #ffc49a, transparent); mix-blend-mode: screen; opacity: 0.85; transform: translateX(-100%); animation: x-viz-scan 2.6s linear infinite; }
@keyframes x-viz-scan { to { transform: translateX(300%); } }
.x-viz-bar { height: 4px; margin-top: 22px; border-radius: 4px; background: rgba(244, 239, 231, 0.1); overflow: hidden; }
.x-viz-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember-hot)); transform-origin: left; transform: scaleX(0); transition: transform 1.5s var(--e-ease-out) 0.35s; }
.x-pillars.is-in .x-viz-bar i { transform: scaleX(var(--p, 1)); }
@media (max-width: 480px) { .x-viz { margin-left: 0; } }

/* ---------- 6. Cursor accent (fine pointers only; created by JS) ---------- */
.x-cursor { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; opacity: 0; transition: opacity 300ms var(--e-ease-std); will-change: transform; }
.x-cursor.is-on { opacity: 1; }
.x-cursor[data-s="off"] { opacity: 0; }
.x-cursor-ring {
    position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    display: grid; place-items: center; border-radius: 50%;
    border: 1.5px solid rgba(255, 140, 58, 0.8); box-shadow: 0 0 14px rgba(255, 107, 0, 0.35);
    transition: width 360ms var(--e-ease-out), height 360ms var(--e-ease-out), margin 360ms var(--e-ease-out), background 300ms, border-color 300ms, box-shadow 300ms;
}
.x-cursor[data-s="link"] .x-cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255, 107, 0, 0.14); border-color: rgba(255, 140, 58, 0.95); }

/* ---------- motion preferences ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .x-auto-hand, .x-auto-node, .x-auto-node::before, .x-auto-bot .x-auto-rows::after, .x-viz-ticks::after { animation: none; }
    .x-viz path, .x-viz circle, .x-viz-bar i { transition: none; }
    .x-cursor { display: none; }
}


/* ===== hubs.css ===== */
/* ==========================================================================
   Hub pages: /services, /how-we-work, /industries (.x-page.x-hp.hp); the Zoho fit band (.hp-fit) sits on the home
   Markup: src/pages/services.html, how-we-work.html, industries.html, zoho.html.
   The sections moved from the home keep their own styles (eas.css, home-wow.css): the
   `#home` rules there are written as :is(#home, .x-hp), so they apply here unchanged.
   This file owns the page hero, the side panels, "keep exploring" and the Zoho fit band.
   ========================================================================== */

.hp { background: var(--e-black); }
.hp section[id] { scroll-margin-top: var(--sticky-top, 96px); }

/* ---------- hero ---------------------------------------------------------- */
.hp-hero {
    position: relative; isolation: isolate; overflow: clip;
    padding: clamp(22px, 3.4vw, 48px) 0 clamp(44px, 6vw, 88px);
    border-bottom: 1px solid var(--e-line);
    background:
        radial-gradient(55% 75% at 88% 8%, rgba(255, 107, 0, 0.14), transparent 62%),
        radial-gradient(40% 60% at 0% 100%, rgba(255, 107, 0, 0.05), transparent 70%),
        linear-gradient(180deg, var(--e-coal), var(--e-black) 92%);
}
/* a faint engineering grid behind the copy, fading out to the right */
.hp-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(244, 239, 231, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 239, 231, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(90% 90% at 20% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(90% 90% at 20% 30%, #000 20%, transparent 75%);
}
/* an ember line along the bottom edge */
.hp-hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.55) 30%, rgba(255, 192, 143, 0.7) 50%, rgba(255, 107, 0, 0.55) 70%, transparent);
}
.hp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 44px); align-items: center; }

.hp-crumbs { font-size: var(--e-fs-xs); color: var(--e-dust); margin: 0; }
.hp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.hp-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.hp-crumbs li + li::before { content: '/'; margin: 0 10px; color: var(--e-ash); }
.hp-crumbs li { min-height: 44px; }
:is(#home, .x-hp) .hp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--e-smoke); text-decoration: none; padding: 0; transition: color var(--e-t-quick); }
:is(#home, .x-hp) .hp-crumbs a:hover { color: var(--e-ember-hot); }
.hp-crumbs [aria-current] { color: var(--e-bone); font-weight: 500; }

.hp-hero-copy { min-width: 0; max-width: 760px; }
:is(#home, .x-hp) .hp-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2vw, 22px); font-size: var(--e-fs-sm); color: var(--e-smoke); line-height: 1.4; }
.hp-kicker b { color: var(--e-bone); font-weight: 600; }
.hp-kicker-ico {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
    border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.55); color: var(--e-ember-hot);
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.06), 0 14px 30px -18px var(--e-ember-45);
}
.hp-kicker-ico svg { width: 21px; height: 21px; }
/* :is(#home, .x-hp) beats the page's generic h1 reset (an id selector) */
:is(#home, .x-hp) .hp-title {
    font-size: clamp(2.25rem, 1.25rem + 3.1vw, 4.3rem);
    line-height: 0.98; letter-spacing: -0.035em;
    max-width: 15ch; margin: 0 0 clamp(18px, 2.2vw, 24px);
}
.hp-title em {
    font-style: normal;
    background: linear-gradient(95deg, #ffd2ad 0%, var(--e-ember-hot) 38%, var(--e-ember) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hp-lede { font-size: var(--e-fs-lg); line-height: 1.55; color: var(--e-smoke); max-width: 58ch; }
.hp-lede strong { color: var(--e-bone); font-weight: 500; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 32px); }

@media (min-width: 1024px) {
    .hp-hero-in { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); column-gap: clamp(48px, 6vw, 96px); row-gap: 28px; }
    .hp-hero-in > .hp-crumbs { grid-column: 1 / -1; }
}

/* ---------- side panel (glass card beside the copy) ------------------------ */
.hp-panel {
    position: relative; min-width: 0; overflow: hidden;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line-strong);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 107, 0, 0.1), transparent 55%),
        linear-gradient(160deg, var(--e-char), var(--e-coal));
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hp-panel::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--e-ember) 30%, #ffc08f 50%, var(--e-ember) 70%, transparent);
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
}
.hp-panel-h {
    display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 15px clamp(16px, 2.4vw, 22px); border-bottom: 1px solid var(--e-line);
    font-size: var(--e-fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-smoke);
}
.hp-panel-h::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--e-ember); box-shadow: 0 0 8px rgba(255, 107, 0, 0.7); }
.hp-panel-foot {
    display: flex; align-items: center; gap: 10px; margin: 0;
    padding: 13px clamp(16px, 2.4vw, 22px); border-top: 1px solid var(--e-line);
    font-size: var(--e-fs-xs); color: var(--e-dust);
}
.hp-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.15), 0 0 10px rgba(61, 220, 132, 0.6); flex: none; }

/* stats: 2 x 2 */
.hp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.hp-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 22px); }
.hp-stat:nth-child(odd) { border-right: 1px solid var(--e-line); }
.hp-stat:nth-child(-n+2) { border-bottom: 1px solid var(--e-line); }
.hp-stat dt { order: 2; font-size: var(--e-fs-xs); color: var(--e-smoke); line-height: 1.35; }
.hp-stat dt small { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--e-dust); }
.hp-stat dd { order: 1; margin: 0; font: 700 clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem)/1 var(--e-display); letter-spacing: -0.02em; color: var(--e-bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-stat dd .x-num > span:last-child { background: linear-gradient(180deg, #fff, #ffd2ad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hp-panel-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 14px clamp(16px, 2.4vw, 22px); border-top: 1px solid var(--e-line); }
.hp-panel-tags li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.03); font-size: 0.74rem; color: var(--e-smoke); }
.hp-panel-tags li:last-child { border-color: rgba(255, 107, 0, 0.3); color: var(--e-ember-hot); }

.hp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px clamp(16px, 2.4vw, 22px); border-top: 1px solid var(--e-line); }
.hp-badges img { height: 38px; width: auto; border-radius: 6px; }

/* the method: five linked steps on a rail */
.hp-steps { position: relative; list-style: none; margin: 0; padding: 8px clamp(10px, 1.6vw, 14px); display: grid; }
.hp-steps::before {
    content: ''; position: absolute; left: calc(clamp(10px, 1.6vw, 14px) + 25px); top: 30px; bottom: 30px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, var(--e-ember-45), var(--e-line-strong) 60%, var(--e-line));
}
.hp-steps a {
    position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 10px; border-radius: 14px;
    color: var(--e-bone); text-decoration: none; transition: background var(--e-t-quick);
}
.hp-steps i {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 26px;
    border-radius: 999px; border: 1px solid var(--e-line-strong); background: var(--e-coal);
    font: 600 0.7rem/1 var(--e-display); font-style: normal; color: var(--e-smoke);
    transition: border-color var(--e-t-quick), color var(--e-t-quick), box-shadow var(--e-t-std) var(--e-ease-out);
}
.hp-steps span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.hp-steps b { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.hp-steps small { font-size: 0.76rem; color: var(--e-dust); }
.hp-steps svg { flex: none; width: 16px; height: 16px; color: var(--e-dust); transition: transform var(--e-t-std) var(--e-ease-out), color var(--e-t-quick); }
.hp-steps a:hover, .hp-steps a:focus-visible { background: rgba(244, 239, 231, 0.04); }
.hp-steps a:hover i, .hp-steps a:focus-visible i { border-color: var(--e-ember-45); color: var(--e-ember-hot); box-shadow: 0 0 14px -3px rgba(255, 107, 0, 0.7); }
.hp-steps a:hover svg, .hp-steps a:focus-visible svg { color: var(--e-ember-hot); transform: translateX(3px); }
.hp-steps li:first-child i { border-color: var(--e-ember-45); color: var(--e-ember-hot); }

/* industries: links to the portfolio filtered by each industry */
.hp-ind-links { list-style: none; margin: 0; padding: clamp(12px, 1.8vw, 16px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hp-ind-links a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 12px 0 14px;
    border-radius: 12px; border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.025);
    font-size: 0.86rem; font-weight: 500; color: var(--e-bone); text-decoration: none; line-height: 1.2;
    transition: border-color var(--e-t-quick), background var(--e-t-quick), box-shadow var(--e-t-std) var(--e-ease-out);
}
.hp-ind-links svg { flex: none; width: 15px; height: 15px; color: var(--e-ember-hot); transition: transform var(--e-t-std) var(--e-ease-out); }
.hp-ind-links a:hover, .hp-ind-links a:focus-visible { border-color: var(--e-ember-45); background: rgba(255, 107, 0, 0.07); box-shadow: 0 10px 26px -16px rgba(255, 107, 0, 0.8); }
.hp-ind-links a:hover svg, .hp-ind-links a:focus-visible svg { transform: translateX(3px); }
@media (max-width: 359px) { .hp-ind-links { grid-template-columns: minmax(0, 1fr); } }

/* ---------- moved sections: small additions ------------------------------ */
/* the first section under the hero needs no top border (the hero draws its own line) */
.hp-hero + .x-section { border-top: 0; }
/* industries: each panel links to its live demos */
.x-ind-demos { margin: 14px 0 0 !important; }
:is(#home, .x-hp) :is(.x-ind-demos, .x-apps-more) a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-ember-hot); text-decoration: none;
}
.x-ind-demos svg, .x-apps-more svg { width: 16px; height: 16px; transition: transform var(--e-t-std) var(--e-ease-out); }
:is(#home, .x-hp) :is(.x-ind-demos, .x-apps-more) a:hover { color: #ffb47d; }
.x-ind-demos a:hover svg, .x-apps-more a:hover svg, .x-ind-demos a:focus-visible svg, .x-apps-more a:focus-visible svg { transform: translateX(3px); }
.x-apps-more { margin: clamp(18px, 2.4vw, 26px) 0 0 !important; }
/* home, any stack: two actions */
.x-beyond-acts { display: inline-flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Zoho or custom ----------------------------------------------- */
.hp-fit-grid { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .hp-fit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.hp-fit-head .x-lede { margin-top: 16px !important; }
.hp-fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hp-fit-list li {
    position: relative; display: grid; gap: 6px; padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 24px) clamp(40px, 4.4vw, 52px);
    border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: linear-gradient(160deg, var(--e-char), var(--e-coal));
}
.hp-fit-list li::before {
    content: ''; position: absolute; left: clamp(18px, 2.2vw, 24px); top: clamp(24px, 3vw, 30px); width: 9px; height: 9px; border-radius: 50%;
    background: var(--e-ember); box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.12), 0 0 12px rgba(255, 107, 0, 0.7);
}
.hp-fit-list li:last-child { border-color: rgba(255, 107, 0, 0.32); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 107, 0, 0.1), transparent 60%), linear-gradient(160deg, var(--e-char), var(--e-coal)); }
.hp-fit-list b { font: 700 var(--e-fs-lg)/1.2 var(--e-display); color: var(--e-bone); }
.hp-fit-list span { font-size: var(--e-fs-sm); line-height: 1.6; color: var(--e-smoke); }

/* ---------- keep exploring ------------------------------------------------ */
.hp-next { padding-block: clamp(56px, 7vw, 104px); }
.hp-next-head { margin-bottom: clamp(24px, 3vw, 36px); }
:is(#home, .x-hp) .hp-next-head h2 { font-size: var(--e-fs-xl); }
.hp-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.hp-next-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 92px; padding: 18px 18px 18px 16px; border-radius: var(--e-r-md);
    border: 1px solid var(--e-line); background: linear-gradient(160deg, var(--e-char), var(--e-coal));
    color: var(--e-bone); text-decoration: none;
    transition: border-color var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out), box-shadow var(--e-t-std) var(--e-ease-out);
}
.hp-next-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(260px circle at 0% 0%, rgba(255, 107, 0, 0.14), transparent 70%);
    opacity: 0; transition: opacity var(--e-t-std);
}
.hp-next-ico {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.04); color: var(--e-ember-hot);
}
.hp-next-ico svg { width: 20px; height: 20px; }
.hp-next-txt { display: grid; gap: 3px; min-width: 0; }
.hp-next-txt b { font: 700 1rem/1.2 var(--e-display); letter-spacing: -0.01em; }
.hp-next-txt small { font-size: 0.8rem; line-height: 1.4; color: var(--e-smoke); }
.hp-next-go { color: var(--e-dust); transition: color var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out); }
.hp-next-go svg { width: 18px; height: 18px; display: block; }
.hp-next-card:hover, .hp-next-card:focus-visible { border-color: var(--e-ember-45); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(255, 107, 0, 0.6); }
.hp-next-card:hover::before, .hp-next-card:focus-visible::before { opacity: 1; }
.hp-next-card:hover .hp-next-go, .hp-next-card:focus-visible .hp-next-go { color: var(--e-ember-hot); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .hp-next-card, .hp-next-card:hover, .hp-next-card:focus-visible { transform: none; transition: none; }
}

/* the same cards on the home, right under the numbers: a shorter band than the hub pages' closing section */
#home .x-explore { padding-block: clamp(36px, 4.5vw, 64px); }


/* ===== portfolio.css ===== */
/* ==========================================================================
   Portfolio page (#modal-portfolio) — rendered from window.EAS_PORTFOLIO.
   Every class is prefixed .pf- and scoped under #modal-portfolio so the
   legacy widget.css portfolio rules never apply. Mobile-first.
   ========================================================================== */

/* ---------- base ---------------------------------------------------------- */
#modal-portfolio { color: var(--e-bone); font-family: var(--e-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#modal-portfolio .pf { font-size: var(--e-fs-md); line-height: 1.6; }
#modal-portfolio .pf h1, #modal-portfolio .pf h2, #modal-portfolio .pf h3 {
    font-family: var(--e-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; margin: 0; text-wrap: balance;
}
#modal-portfolio .pf h2 { font-size: var(--e-fs-2xl); }
#modal-portfolio .pf p { margin: 0; }
#modal-portfolio .pf a { color: inherit; }
#modal-portfolio .pf button { font-family: inherit; }
#modal-portfolio .pf ::selection { background: var(--e-ember); color: #000; }
#modal-portfolio .pf code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--e-line); color: var(--e-ember-hot); white-space: nowrap; }

/* view switching: grid | detail */
#modal-portfolio .pf[data-view="detail"] .pf-hero,
#modal-portfolio .pf[data-view="detail"] .pf-browse { display: none; }
#modal-portfolio .pf-detail[hidden] { display: none; }

/* shared: accent icon tile (card, detail, stage) */
:is(#modal-portfolio, body > .pf-stage) .pf-icon {
    --pf-accent: var(--e-ember);
    width: 52px; height: 52px; flex: none;
    display: grid; place-items: center; overflow: hidden;
    border-radius: 14px;
    background: color-mix(in srgb, var(--pf-accent) 14%, #000);
    border: 1px solid color-mix(in srgb, var(--pf-accent) 38%, transparent);
    color: var(--pf-accent);
    font: 700 1.15rem/1 var(--e-display);
}
:is(#modal-portfolio, body > .pf-stage) .pf-icon img { width: 30px; height: 30px; object-fit: contain; display: block; }

/* shared: badges + tags */
#modal-portfolio .pf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
#modal-portfolio .pf-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font: 700 0.72rem/1 var(--e-display); letter-spacing: 0.04em; white-space: nowrap;
    padding: 6px 8px; border-radius: 6px;
    border: 1px solid var(--e-line); color: var(--e-smoke); background: rgba(0, 0, 0, 0.35);
}
#modal-portfolio .pf-badge img { width: 12px; height: 12px; }
#modal-portfolio .pf-badge-ai { color: var(--e-ember-hot); border-color: var(--e-ember-25); background: var(--e-ember-12); }
#modal-portfolio .pf-badge-live { color: #3ddc84; border-color: rgba(61, 220, 132, 0.3); }
#modal-portfolio .pf-badge-custom { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.3); background: rgba(125, 211, 252, 0.08); }
#modal-portfolio .pf-badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#modal-portfolio .pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#modal-portfolio .pf-tag { font-size: 0.72rem; line-height: 1.2; padding: 5px 9px; border-radius: 6px; background: rgba(244, 239, 231, 0.05); color: var(--e-smoke); border: 1px solid var(--e-line); }

/* ---------- hero ---------------------------------------------------------- */
#modal-portfolio .pf-hero {
    position: relative; overflow: clip; isolation: isolate;
    padding: clamp(32px, 6vw, 88px) 0 clamp(36px, 5vw, 64px);
}
#modal-portfolio .pf-hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(640px 420px at 12% 0%, var(--e-ember-12), transparent 70%),
        linear-gradient(var(--e-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--e-line) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    -webkit-mask-image: radial-gradient(80% 90% at 30% 10%, #000 0%, transparent 100%);
    mask-image: radial-gradient(80% 90% at 30% 10%, #000 0%, transparent 100%);
    opacity: 0.7;
}
#modal-portfolio .pf-hero-grid { display: grid; gap: 36px; }
@media (min-width: 1024px) { #modal-portfolio .pf-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 56px; } }
#modal-portfolio .pf-title {
    font-size: var(--e-fs-hero);
    line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 22px;
}
#modal-portfolio .pf-title em { font-style: normal; color: var(--e-ember); }
#modal-portfolio .pf-lede { font-size: var(--e-fs-lg); line-height: 1.5; color: var(--e-smoke); max-width: 58ch; margin-bottom: 30px; }
#modal-portfolio .pf-lede strong { color: var(--e-bone); font-weight: 500; }
#modal-portfolio .pf-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
#modal-portfolio .pf-hero-actions .x-btn-arrow { transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-portfolio .pf-hero-actions .x-btn:hover .x-btn-arrow { transform: translateY(3px); }
#modal-portfolio .pf-hero-hint { color: var(--e-dust); font-size: var(--e-fs-sm); }
#modal-portfolio .pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
#modal-portfolio .pf-stats > div {
    padding: 18px 18px 16px; border-radius: var(--e-r-md);
    border: 1px solid var(--e-line); background: rgba(13, 11, 9, 0.8);
}
#modal-portfolio .pf-stats dd { margin: 0; font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--e-bone); }
#modal-portfolio .pf-stats dt { font-size: var(--e-fs-xs); color: var(--e-dust); margin-top: 8px; }
#modal-portfolio .pf-stats > div:first-child { grid-column: 1 / -1; }
#modal-portfolio .pf-stats > div:first-child dd { color: var(--e-ember); }

/* ---------- browse: filters ------------------------------------------------ */
#modal-portfolio .pf-browse { padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 7vw, 96px); }
#modal-portfolio .pf-filters {
    display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr);
    padding: clamp(14px, 2vw, 20px);
    border: 1px solid var(--e-line); border-radius: var(--e-r-md);
    background: var(--e-coal);
    margin-bottom: 18px;
}
#modal-portfolio .pf-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#modal-portfolio .pf-search {
    flex: 1 1 260px; display: flex; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 16px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong);
    background: rgba(0, 0, 0, 0.45); color: var(--e-smoke);
    transition: border-color var(--e-t-quick), background var(--e-t-quick);
}
#modal-portfolio .pf-search:focus-within { border-color: var(--e-ember); background: rgba(0, 0, 0, 0.65); }
#modal-portfolio .pf-search svg { width: 18px; height: 18px; flex: none; }
#modal-portfolio .pf-search input {
    flex: 1; min-width: 0; background: none; border: 0; outline: 0;
    color: var(--e-bone); font: 500 var(--e-fs-sm)/1.2 var(--e-body);
}
#modal-portfolio .pf-search input::placeholder { color: var(--e-dust); }
#modal-portfolio .pf-search input::-webkit-search-cancel-button { filter: invert(0.7); }
#modal-portfolio .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#modal-portfolio .pf-chip {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    min-height: 36px; padding: 0 14px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line);
    background: transparent; color: var(--e-smoke); cursor: pointer;
    font: 500 var(--e-fs-sm)/1 var(--e-body); white-space: nowrap;
    transition: background var(--e-t-quick), color var(--e-t-quick), border-color var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out);
}
#modal-portfolio .pf-chip:hover { color: var(--e-bone); border-color: var(--e-line-strong); background: rgba(244, 239, 231, 0.05); }
#modal-portfolio .pf-chip:active { transform: scale(0.96); }
#modal-portfolio .pf-chip[aria-pressed="true"] { background: var(--e-ember); color: #100800; border-color: transparent; font-weight: 600; }
#modal-portfolio .pf-chip-n { font-size: 0.7rem; color: var(--e-dust); font-variant-numeric: tabular-nums; }
#modal-portfolio .pf-chip[aria-pressed="true"] .pf-chip-n { color: rgba(16, 8, 0, 0.65); }
#modal-portfolio .pf-clear {
    background: none; border: 0; padding: 8px 6px; cursor: pointer;
    color: var(--e-ember-hot); font: 600 var(--e-fs-sm)/1 var(--e-body);
    text-decoration: underline; text-underline-offset: 3px;
}
#modal-portfolio .pf-clear:hover { color: var(--e-bone); }
#modal-portfolio .pf-results b { color: var(--e-bone); font-weight: 600; }

/* ---------- browse: grid + cards ------------------------------------------ */
#modal-portfolio .pf-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { #modal-portfolio .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #modal-portfolio .pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

#modal-portfolio .pf-card {
    --pf-accent: var(--e-ember);
    position: relative; display: flex; flex-direction: column; gap: 14px;
    min-height: 272px; padding: 22px;
    border-radius: var(--e-r-md); border: 1px solid var(--e-line);
    background: var(--e-coal); overflow: hidden; isolation: isolate;
    transition: transform var(--e-t-std) var(--e-ease-out), border-color var(--e-t-std), background var(--e-t-std);
}
#modal-portfolio .pf-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
    background: radial-gradient(380px 220px at 0% 0%, color-mix(in srgb, var(--pf-accent) 18%, transparent), transparent 70%);
    transition: opacity var(--e-t-std);
}
#modal-portfolio .pf-card::after {
    content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, var(--pf-accent), transparent 75%);
    transform: scaleX(0.3); transform-origin: left;
    transition: transform var(--e-t-slow) var(--e-ease-out);
}
#modal-portfolio .pf-card:hover, #modal-portfolio .pf-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--pf-accent) 45%, transparent);
    background: var(--e-char);
}
#modal-portfolio .pf-card:hover::before, #modal-portfolio .pf-card:focus-within::before { opacity: 1; }
#modal-portfolio .pf-card:hover::after, #modal-portfolio .pf-card:focus-within::after { transform: scaleX(1); }
#modal-portfolio .pf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#modal-portfolio .pf-card-top .pf-badges { justify-content: flex-end; }
#modal-portfolio .pf-card h3 { font-size: 1.22rem; line-height: 1.15; letter-spacing: -0.01em; }
#modal-portfolio .pf-card-title {
    display: block; width: 100%; background: none; border: 0; padding: 0; margin: 0;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#modal-portfolio .pf-card-title::after { content: ''; position: absolute; inset: 0; } /* stretched: the whole card opens the details */
#modal-portfolio .pf-card-title:focus-visible { outline: none; }
#modal-portfolio .pf-card:has(.pf-card-title:focus-visible) { outline: 2px solid var(--e-ember-hot); outline-offset: 3px; }
#modal-portfolio .pf-card-body { display: grid; gap: 10px; }
#modal-portfolio .pf-tagline { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }
#modal-portfolio .pf-card-actions {
    position: relative; z-index: 1;
    margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 14px; border-top: 1px solid var(--e-line);
}
#modal-portfolio .pf-card-actions .x-btn { flex: none; min-height: 40px; padding: 0 18px; font-size: var(--e-fs-xs); white-space: nowrap; }
#modal-portfolio .pf-card-actions .x-btn svg { width: 15px; height: 15px; }
#modal-portfolio .pf-card-client { flex: 1 1 auto; font-size: 0.74rem; color: var(--e-dust); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-portfolio .pf-card.pf-launching { border-color: var(--pf-accent); }

#modal-portfolio .pf-empty {
    display: grid; gap: 18px; justify-items: center; text-align: center;
    padding: clamp(40px, 6vw, 72px) 20px;
    border: 1px dashed var(--e-line-strong); border-radius: var(--e-r-md);
    color: var(--e-smoke);
}
#modal-portfolio .pf-empty[hidden] { display: none; }
#modal-portfolio .pf-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- detail view --------------------------------------------------- */
#modal-portfolio .pf-detail { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 72px); outline: none; }
#modal-portfolio .pf-back {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 8px 0; margin: 0 0 22px; cursor: pointer;
    color: var(--e-smoke); font: 600 var(--e-fs-sm)/1 var(--e-body);
    transition: color var(--e-t-quick);
}
#modal-portfolio .pf-back svg { width: 16px; height: 16px; transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-portfolio .pf-back:hover { color: var(--e-bone); }
#modal-portfolio .pf-back:hover svg { transform: translateX(-3px); }
#modal-portfolio .pf-back-bottom { margin: 28px 0 0; }

#modal-portfolio .pf-d-head {
    --pf-accent: var(--e-ember);
    position: relative; display: grid; gap: 22px; overflow: hidden;
    padding: clamp(22px, 3vw, 36px);
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background:
        radial-gradient(520px 320px at 0% 0%, color-mix(in srgb, var(--pf-accent) 16%, transparent), transparent 70%),
        linear-gradient(160deg, var(--e-char), var(--e-coal));
}
#modal-portfolio .pf-d-head::after {
    content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--pf-accent), transparent 70%);
}
@media (min-width: 900px) { #modal-portfolio .pf-d-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 28px; } }
#modal-portfolio .pf-d-head .pf-icon { width: 76px; height: 76px; border-radius: 20px; font-size: 1.7rem; }
#modal-portfolio .pf-d-head .pf-icon img { width: 44px; height: 44px; }
#modal-portfolio .pf-d-title { display: grid; gap: 10px; min-width: 0; }
#modal-portfolio .pf-d-head h2 { font-size: var(--e-fs-2xl); }
#modal-portfolio .pf-d-tagline { color: var(--e-smoke); font-size: var(--e-fs-lg); line-height: 1.45; max-width: 52ch; }
#modal-portfolio .pf-d-launch { display: grid; gap: 10px; justify-items: start; align-content: start; }
@media (min-width: 900px) { #modal-portfolio .pf-d-launch { justify-items: end; text-align: right; min-width: 240px; } }
#modal-portfolio .pf-d-cred { font-size: var(--e-fs-sm); color: var(--e-bone); }
#modal-portfolio .pf-d-cred span { color: var(--e-smoke); }
#modal-portfolio .pf-d-notice { font-size: var(--e-fs-xs); color: var(--e-dust); max-width: 36ch; }

#modal-portfolio .pf-d-grid { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 960px) { #modal-portfolio .pf-d-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }
#modal-portfolio .pf-d-main { display: grid; gap: 20px; min-width: 0; }
#modal-portfolio .pf-d-desc { font-size: var(--e-fs-lg); line-height: 1.5; max-width: 64ch; }
#modal-portfolio .pf-panel {
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid var(--e-line); border-radius: var(--e-r-md); background: var(--e-coal);
}
#modal-portfolio .pf-panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 16px; }
#modal-portfolio .pf-panel h3::before { content: ''; width: 18px; height: 2px; background: var(--e-ember); border-radius: 2px; flex: none; }
#modal-portfolio .pf-case { display: grid; }
#modal-portfolio .pf-case-item { display: grid; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--e-line); }
#modal-portfolio .pf-case-item:first-child { border-top: 0; padding-top: 0; }
#modal-portfolio .pf-case-item:last-child { padding-bottom: 0; }
@media (min-width: 640px) { #modal-portfolio .pf-case-item { grid-template-columns: 96px minmax(0, 1fr); } }
#modal-portfolio .pf-case-item h4 { margin: 0; padding-top: 3px; font: 600 var(--e-fs-xs)/1.4 var(--e-body); color: var(--e-ember-hot); letter-spacing: 0.02em; }
#modal-portfolio .pf-case-item p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; }
#modal-portfolio .pf-case-item ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#modal-portfolio .pf-case-item li { position: relative; padding-left: 16px; color: var(--e-bone); font-size: var(--e-fs-sm); line-height: 1.5; }
#modal-portfolio .pf-case-item li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 8px; height: 2px; background: var(--e-ember); }
#modal-portfolio .pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 20px; }
@media (min-width: 640px) { #modal-portfolio .pf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#modal-portfolio .pf-list li { position: relative; padding-left: 26px; font-size: var(--e-fs-sm); line-height: 1.5; color: var(--e-bone); }
#modal-portfolio .pf-list li::before {
    content: ''; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; border-radius: 50%;
    background: var(--e-ember-12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8c3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat;
    border: 1px solid var(--e-ember-25);
}
#modal-portfolio .pf-list-ai li::before { background-color: var(--e-ember-25); }
#modal-portfolio .pf-d-side { display: grid; gap: 14px; }
@media (min-width: 960px) { #modal-portfolio .pf-d-side { position: sticky; top: 92px; } }
#modal-portfolio .pf-facts { margin: 0; display: grid; }
#modal-portfolio .pf-facts > div { padding: 12px 0; border-top: 1px solid var(--e-line); }
#modal-portfolio .pf-facts > div:first-child { padding-top: 0; border-top: 0; }
#modal-portfolio .pf-facts > div:last-child { padding-bottom: 0; }
#modal-portfolio .pf-facts dt { font-size: var(--e-fs-xs); color: var(--e-dust); margin-bottom: 5px; }
#modal-portfolio .pf-facts dd { margin: 0; font-size: var(--e-fs-sm); color: var(--e-bone); line-height: 1.5; }
#modal-portfolio .pf-ints { display: flex; flex-wrap: wrap; gap: 6px; }
#modal-portfolio .pf-int {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.76rem; padding: 6px 10px; border-radius: 8px;
    background: rgba(244, 239, 231, 0.05); border: 1px solid var(--e-line); color: var(--e-bone);
}
#modal-portfolio .pf-int img { width: 16px; height: 16px; }

/* ---------- CTA ----------------------------------------------------------- */
#modal-portfolio .pf-cta { padding: 0 0 clamp(56px, 8vw, 110px); }
#modal-portfolio .pf-cta .x-cta h2 { font-size: var(--e-fs-2xl); }
#modal-portfolio .pf-cta .x-cta p { color: var(--e-smoke); }

/* ---------- demo stage ---------------------------------------------------- */
#modal-portfolio .pf-stage, body > .pf-stage {
    /* fixed over the viewport, whatever scrolls underneath; portfolio.js moves it to <body> if an ancestor is transformed */
    position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 100000;
    display: flex; flex-direction: column;
    background: var(--e-black); color: var(--e-bone);
    transform-origin: 0 0; overflow: hidden;
}
:is(#modal-portfolio, body) > .pf-stage[hidden] { display: none; }
:is(#modal-portfolio, body) > .pf-stage.pf-stage-enter { transition: transform 0.62s var(--e-ease-out), border-radius 0.62s var(--e-ease-out), opacity 0.25s; will-change: transform; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-bar {
    position: sticky; top: 0; z-index: 2; flex: none;
    display: flex; align-items: center; gap: 8px;
    min-height: 54px; padding: 6px 10px;
    background: rgba(13, 11, 9, 0.98); border-bottom: 1px solid var(--e-line);
    padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right));
}
:is(#modal-portfolio, body > .pf-stage) .pf-sbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; min-width: 40px; padding: 0 12px;
    border-radius: 10px; border: 1px solid transparent; background: transparent;
    color: var(--e-smoke); cursor: pointer; text-decoration: none;
    font: 600 var(--e-fs-sm)/1 var(--e-body); white-space: nowrap;
    transition: background var(--e-t-quick), color var(--e-t-quick), border-color var(--e-t-quick);
}
:is(#modal-portfolio, body > .pf-stage) .pf-sbtn:hover { color: var(--e-bone); background: rgba(244, 239, 231, 0.06); border-color: var(--e-line); }
:is(#modal-portfolio, body > .pf-stage) .pf-sbtn svg { width: 18px; height: 18px; flex: none; }
:is(#modal-portfolio, body > .pf-stage) .pf-sbtn-back { border-color: var(--e-line-strong); color: var(--e-bone); }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-tools { display: flex; gap: 2px; flex: none; margin-left: auto; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-tools .pf-sbtn { padding: 0 10px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-tools .pf-sbtn span { display: none; }
@media (min-width: 900px) { :is(#modal-portfolio, body > .pf-stage) .pf-stage-tools .pf-sbtn { padding: 0 12px; } :is(#modal-portfolio, body > .pf-stage) .pf-stage-tools .pf-sbtn span { display: inline; } }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-app { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
@media (min-width: 900px) { :is(#modal-portfolio, body > .pf-stage) .pf-stage-app { justify-content: center; } }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-app .pf-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 0.85rem; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-app .pf-icon img { width: 18px; height: 18px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-name { font-family: var(--e-display); font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-cred { display: none; font-size: 0.74rem; color: var(--e-dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-cred:empty { display: none; }
@media (min-width: 760px) { :is(#modal-portfolio, body > .pf-stage) .pf-stage-cred { display: inline; } }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-body { position: relative; flex: 1; min-height: 0; }
/* device view: the live demo in a desktop, tablet or phone sized frame */
:is(#modal-portfolio, body > .pf-stage) .pf-device { display: none; align-items: center; gap: 2px; padding: 3px; margin-right: 8px; border: 1px solid var(--e-line); border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
:is(#modal-portfolio, body > .pf-stage) .pf-device button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--e-dust); font: 500 0.8rem var(--e-body); cursor: pointer; transition: color var(--e-t-quick), background var(--e-t-quick); }
:is(#modal-portfolio, body > .pf-stage) .pf-device button svg { width: 16px; height: 16px; }
:is(#modal-portfolio, body > .pf-stage) .pf-device button span { display: none; }
:is(#modal-portfolio, body > .pf-stage) .pf-device button:hover { color: var(--e-bone); }
:is(#modal-portfolio, body > .pf-stage) .pf-device button[aria-pressed="true"] { color: var(--e-bone); background: rgba(244, 239, 231, 0.1); }
@media (min-width: 900px) {
    :is(#modal-portfolio, body > .pf-stage) .pf-device { display: inline-flex; }
    :is(#modal-portfolio, body > .pf-stage) .pf-device button[aria-pressed="true"] span { display: inline; }
}
:is(#modal-portfolio, body > .pf-stage) .pf-stage-body[data-device="tablet"], :is(#modal-portfolio, body > .pf-stage) .pf-stage-body[data-device="phone"] { background: #0b0c0e; display: grid; place-items: center; padding: 18px 0; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-body[data-device="tablet"] .pf-stage-frame, :is(#modal-portfolio, body > .pf-stage) .pf-stage-body[data-device="phone"] .pf-stage-frame { position: relative; inset: auto; height: 100%; border-radius: 18px; border: 1px solid var(--e-line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-body[data-device="tablet"] .pf-stage-frame { width: min(820px, 94%); max-height: 1100px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-body[data-device="phone"] .pf-stage-frame { width: min(390px, 94%); max-height: 844px; border-radius: 28px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-frame:not([src]) { visibility: hidden; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-loading {
    position: absolute; inset: 0; z-index: 1;
    display: grid; place-content: center; justify-items: center; gap: 12px;
    background: var(--e-black); text-align: center;
    transition: opacity 0.35s var(--e-ease-std), visibility 0s linear 0.35s;
}
:is(#modal-portfolio, body > .pf-stage) .pf-stage-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-loading .pf-icon { width: 72px; height: 72px; border-radius: 20px; font-size: 1.7rem; margin-bottom: 6px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-loading .pf-icon img { width: 42px; height: 42px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-loading b { font-family: var(--e-display); font-size: 1.2rem; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-loading > span:not(.pf-icon) { color: var(--e-dust); font-size: var(--e-fs-sm); }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-progress { display: block; width: 180px; height: 3px; border-radius: 3px; background: var(--e-line); overflow: hidden; margin-top: 6px; }
:is(#modal-portfolio, body > .pf-stage) .pf-stage-progress i { display: block; height: 100%; width: 40%; background: var(--e-ember); border-radius: 3px; animation: pf-load 1.2s var(--e-ease-std) infinite; }
@keyframes pf-load { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
:is(#modal-portfolio, body) > .pf-stage:fullscreen { background: var(--e-black); }
:is(#modal-portfolio, body) > .pf-stage:fullscreen .pf-stage-bar { min-height: 46px; }

/* ---------- motion preferences ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #modal-portfolio .pf-card, #modal-portfolio .pf-card::after, #modal-portfolio .pf-chip, #modal-portfolio .pf-back svg { transition: none; }
    :is(#modal-portfolio, body) > .pf-stage.pf-stage-enter { transition: none; }
    :is(#modal-portfolio, body > .pf-stage) .pf-stage-progress i { animation: none; width: 100%; }
    #modal-portfolio .pf-card:hover { transform: none; }
}
@media (hover: none) {
    #modal-portfolio .pf-card:hover { transform: none; }
}

/* ---------- hero aurora (EASFX) -------------------------------------------- */
#modal-portfolio .pf-aurora {
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}


/* hero rhythm */
#modal-portfolio .pf-hero h1 { margin: 0 0 clamp(18px, 2.4vw, 26px); }
#modal-portfolio .pf-lede { font-size: var(--e-fs-md); line-height: 1.6; margin: 0 0 28px; }

/* ======================================================================
   Featured builds + screenshot cards + prominent open buttons
   ====================================================================== */
#modal-portfolio .pf[data-view="detail"] .pf-featured { display: none; }
#modal-portfolio .pf-featured { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 4vw, 48px); position: relative; }
#modal-portfolio .pf-feat-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { #modal-portfolio .pf-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#modal-portfolio .pf-feat {
    --pf-accent: var(--e-ember);
    position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: linear-gradient(170deg, color-mix(in srgb, var(--pf-accent) 9%, var(--e-char)), var(--e-coal) 55%);
    transition: transform var(--e-t-std) var(--e-ease-out), border-color var(--e-t-std), box-shadow var(--e-t-std);
}
#modal-portfolio .pf-feat:hover, #modal-portfolio .pf-feat:focus-within {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--pf-accent) 55%, transparent);
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--pf-accent) 55%, transparent);
}
#modal-portfolio .pf-feat-media { position: relative; padding: 14px 14px 0; }
#modal-portfolio .pf-feat .pf-shot { border-radius: 12px 12px 4px 4px; }
#modal-portfolio .pf-feat-num {
    position: absolute; right: 24px; top: 22px; z-index: 2;
    font-family: var(--e-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
    padding: 5px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: var(--e-bone);
    border: 1px solid color-mix(in srgb, var(--pf-accent) 50%, transparent); backdrop-filter: blur(6px);
}
#modal-portfolio .pf-feat-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
#modal-portfolio .pf-feat-top { display: flex; align-items: center; gap: 10px; }
#modal-portfolio .pf-feat-top .pf-badges { margin-left: auto; }
#modal-portfolio .pf-feat-meta { font-size: var(--e-fs-xs); color: var(--e-smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#modal-portfolio .pf-feat h3 { font-size: 1.3rem; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
#modal-portfolio .pf-feat-tag { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.5; margin: 0; }
#modal-portfolio .pf-feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#modal-portfolio .pf-feat-list li { position: relative; padding-left: 18px; font-size: 0.82rem; color: var(--e-bone); line-height: 1.45; }
#modal-portfolio .pf-feat-list li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 9px; height: 2px; border-radius: 2px; background: var(--pf-accent); }
#modal-portfolio .pf-feat-ai { margin: 0; font-size: 0.8rem; color: var(--e-smoke); line-height: 1.45; }
#modal-portfolio .pf-feat-ai b { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; font-size: 0.66rem; letter-spacing: 0.04em; background: var(--e-ember-12); color: var(--e-ember-hot); border: 1px solid var(--e-ember-25); }
#modal-portfolio .pf-feat-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
#modal-portfolio .pf-feat-actions .x-btn { min-height: 46px; padding: 0 20px; font-size: var(--e-fs-sm); }
#modal-portfolio .pf-feat-actions .x-btn svg { width: 16px; height: 16px; }

/* hero featured card: wide, screenshot beside the copy */
@media (min-width: 760px) {
    #modal-portfolio .pf-feat.is-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
    #modal-portfolio .pf-feat.is-hero .pf-feat-media { padding: 18px 0 18px 18px; }
    #modal-portfolio .pf-feat.is-hero .pf-shot { border-radius: 14px; height: 100%; aspect-ratio: auto; min-height: 320px; }
    #modal-portfolio .pf-feat.is-hero .pf-feat-body { padding: clamp(24px, 3vw, 40px); justify-content: center; }
    #modal-portfolio .pf-feat.is-hero h3 { font-size: var(--e-fs-xl); }
    #modal-portfolio .pf-feat.is-hero .pf-feat-num { left: 32px; right: auto; top: 32px; }
}

/* screenshot frame (featured + regular cards) */
#modal-portfolio .pf-shot {
    position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
#modal-portfolio .pf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transform: scale(1.001); transition: transform 1.2s var(--e-ease-out); }
#modal-portfolio .pf-feat:hover .pf-shot img, #modal-portfolio .pf-card:hover .pf-shot img { transform: scale(1.05); }
#modal-portfolio .pf-shot::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.45)); pointer-events: none; }
#modal-portfolio .pf-shot-empty { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--pf-accent) 30%, transparent), transparent 60%), var(--e-coal); }

/* regular cards: screenshot on top */
#modal-portfolio .pf-card.has-shot { padding-top: 14px; }
#modal-portfolio .pf-card .pf-shot { margin: 0 -8px 2px; border-radius: 10px; }

/* the open button: always visible, primary gradient */
#modal-portfolio .pf-open-btn { box-shadow: 0 10px 26px -12px var(--e-ember-45); }
#modal-portfolio .pf-card-actions .pf-open-btn { min-height: 44px; padding: 0 20px; font-size: var(--e-fs-sm); }
#modal-portfolio .pf-card-actions .pf-open-btn svg { width: 16px; height: 16px; transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-portfolio .pf-card:hover .pf-open-btn svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    #modal-portfolio .pf-feat, #modal-portfolio .pf-shot img { transition: none; }
    #modal-portfolio .pf-feat:hover .pf-shot img, #modal-portfolio .pf-card:hover .pf-shot img { transform: none; }
}
#modal-portfolio .pf-feat-num { top: auto !important; bottom: 12px; right: 26px !important; left: auto !important; }
@media (min-width: 760px) { #modal-portfolio .pf-feat.is-hero .pf-feat-num { bottom: 30px; right: 14px !important; } }


/* ======================================================================
   Live filters: search + industry + "built on" segment, one row of type
   chips with live counts (choices that lead nowhere are disabled)
   ====================================================================== */
#modal-portfolio .pf-filters { gap: 14px; }
#modal-portfolio .pf-filters-row { gap: 10px; }
#modal-portfolio .pf-search { flex: 1 1 300px; }
#modal-portfolio .pf-select {
    position: relative; flex: 0 1 auto; display: inline-flex; align-items: center; min-height: 46px; padding: 0 38px 0 18px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.45); color: var(--e-smoke);
    transition: border-color var(--e-t-quick), color var(--e-t-quick), box-shadow var(--e-t-quick);
}
#modal-portfolio .pf-select[hidden] { display: none; }
#modal-portfolio .pf-select::after { content: ''; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
#modal-portfolio .pf-select:hover, #modal-portfolio .pf-select:focus-within { border-color: var(--e-ember); color: var(--e-bone); }
#modal-portfolio .pf-select.is-on { border-color: var(--e-ember); color: var(--e-bone); box-shadow: 0 0 0 3px var(--e-ember-12); }
#modal-portfolio .pf-select select {
    -webkit-appearance: none; appearance: none; border: 0; outline: 0; background: transparent; color: inherit; cursor: pointer;
    font: 600 var(--e-fs-sm)/1.2 var(--e-body); padding: 12px 0; max-width: 240px; text-overflow: ellipsis;
}
#modal-portfolio .pf-select option { background: #120f0c; color: var(--e-bone); }
#modal-portfolio .pf-select option:disabled { color: #6f665c; }

/* built on: a compact segmented control */
#modal-portfolio .pf-seg {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: none;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.45);
}
#modal-portfolio .pf-seg[hidden] { display: none; }
#modal-portfolio .pf-seg .pf-chip { min-height: 38px; padding: 0 14px; border: 0; background: transparent; font-weight: 600; }
#modal-portfolio .pf-seg .pf-chip:hover:not(:disabled) { background: rgba(244, 239, 231, 0.06); }
#modal-portfolio .pf-seg .pf-chip[aria-pressed="true"] { background: var(--e-ember); color: #100800; }

/* type chips */
#modal-portfolio .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#modal-portfolio .pf-chip { min-height: 40px; padding: 0 12px 0 14px; gap: 7px; font-weight: 500; }
@media (min-width: 700px) { #modal-portfolio .pf-types .pf-chip { font-size: 0.86rem; padding: 0 10px 0 13px; } #modal-portfolio .pf-types { gap: 6px 5px; } }
#modal-portfolio .pf-chip-l { pointer-events: none; }
#modal-portfolio .pf-chip-n {
    min-width: 1.7em; padding: 2px 7px; border-radius: 999px; text-align: center;
    background: rgba(244, 239, 231, 0.1); color: var(--e-smoke); font-size: 0.74rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
    transition: background var(--e-t-quick), color var(--e-t-quick);
}
#modal-portfolio .pf-chip[aria-pressed="true"] .pf-chip-n { background: rgba(16, 8, 0, 0.18); color: #1a0d00; }
#modal-portfolio .pf-chip[aria-pressed="true"] { box-shadow: 0 8px 22px -10px var(--e-ember-45); }
#modal-portfolio .pf-chip:disabled { opacity: 0.36; cursor: not-allowed; }
#modal-portfolio .pf-chip:disabled:hover { color: var(--e-smoke); border-color: var(--e-line); background: transparent; }
#modal-portfolio .pf-chip:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 2px; }
#modal-portfolio .pf-chip-ic { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; color: var(--e-ember-hot); }
#modal-portfolio .pf-chip-ic svg { width: 16px; height: 16px; }
#modal-portfolio .pf-chip-ic img { width: 15px; height: 15px; border-radius: 3px; }
#modal-portfolio .pf-chip[aria-pressed="true"] .pf-chip-ic { color: #100800; }

#modal-portfolio .pf-filters-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
#modal-portfolio .pf-results { margin: 0; color: var(--e-smoke); font-size: var(--e-fs-sm); }
#modal-portfolio .pf-results b { color: var(--e-bone); font-weight: 700; font-variant-numeric: tabular-nums; }
#modal-portfolio .pf-clear { flex: none; padding: 4px 0; }

/* the unfiltered grid starts at one screenful */
#modal-portfolio .pf-more-wrap { display: flex; justify-content: center; margin-top: 26px; }
#modal-portfolio .pf-more[hidden] { display: none; }
#modal-portfolio .pf-more { min-height: 50px; padding: 0 26px; gap: 10px; }
#modal-portfolio .pf-more span { font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--e-ember-12); color: var(--e-ember-hot); }

/* phones + small tablets: panel goes full bleed; the type chips become one swipeable row with edge fades */
@media (max-width: 699px) {
    #modal-portfolio .pf-filters { padding: 14px 0; border-left: 0; border-right: 0; border-radius: 0; margin-left: calc(var(--e-gutter) * -1); margin-right: calc(var(--e-gutter) * -1); }
    #modal-portfolio .pf-filters-row, #modal-portfolio .pf-filters-foot { padding: 0 var(--e-gutter); }
    #modal-portfolio .pf-search { flex: 1 1 100%; }
    #modal-portfolio .pf-select { flex: 1 1 100%; }
    #modal-portfolio .pf-select select { max-width: none; width: 100%; font-size: 16px; } /* 16px: iOS does not zoom into the select */
    #modal-portfolio .pf-seg { flex: 1 1 100%; }
    #modal-portfolio .pf-seg .pf-chip { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
    #modal-portfolio .pf-seg .pf-chip-ic { display: none; }
    #modal-portfolio .pf-chips {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        padding: 2px var(--e-gutter) 4px; scroll-padding-inline: var(--e-gutter); scrollbar-width: none;
        --pf-fade-l: #000; --pf-fade-r: #000;
        -webkit-mask-image: linear-gradient(90deg, var(--pf-fade-l), #000 28px, #000 calc(100% - 36px), var(--pf-fade-r));
        mask-image: linear-gradient(90deg, var(--pf-fade-l), #000 28px, #000 calc(100% - 36px), var(--pf-fade-r));
    }
    #modal-portfolio .pf-chips.is-scroll-start { --pf-fade-l: transparent; }
    #modal-portfolio .pf-chips.is-scroll-end { --pf-fade-r: transparent; }
    #modal-portfolio .pf-chips::-webkit-scrollbar { display: none; }
    #modal-portfolio .pf-chips > * { flex: none; scroll-snap-align: start; }
}

/* featured: 2 columns until the cards have room for 3; an odd last card spans the row; phones swipe */
@media (min-width: 760px) and (max-width: 1319px) {
    #modal-portfolio .pf-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #modal-portfolio .pf-feat:not(.is-hero):last-child:nth-child(even) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    #modal-portfolio .pf-feat:not(.is-hero):last-child:nth-child(even) .pf-feat-media { padding: 18px 0 18px 18px; }
    #modal-portfolio .pf-feat:not(.is-hero):last-child:nth-child(even) .pf-shot { height: 100%; aspect-ratio: auto; min-height: 260px; border-radius: 14px; }
}
@media (min-width: 1320px) { #modal-portfolio .pf-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 760px) and (max-width: 1099px) {
    #modal-portfolio .pf-feat.is-hero, #modal-portfolio .pf-feat:not(.is-hero):last-child:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* two narrow columns: the case-study link becomes a quiet text button so both actions stay on one line */
@media (min-width: 760px) and (max-width: 1099px), (max-width: 420px) {
    #modal-portfolio .pf-feat-actions { gap: 4px; }
    #modal-portfolio .pf-feat-actions .pf-open-btn { padding: 0 18px; }
    #modal-portfolio .pf-feat-actions .x-btn-ghost { border-color: transparent; background: transparent; padding: 0 10px; text-decoration: underline; text-underline-offset: 4px; }
}
#modal-portfolio .pf-feat-actions .x-btn { white-space: nowrap; }
#modal-portfolio .pf-feat-top .pf-badges { flex-wrap: nowrap; }
@media (max-width: 759px) {
    #modal-portfolio .pf-feat-grid {
        display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 calc(var(--e-gutter) * -1); padding: 4px var(--e-gutter) 14px; scroll-padding-inline: var(--e-gutter);
    }
    #modal-portfolio .pf-feat-grid::-webkit-scrollbar { display: none; }
    #modal-portfolio .pf-feat { flex: 0 0 min(86vw, 380px); scroll-snap-align: start; }
    #modal-portfolio .pf-feat-list, #modal-portfolio .pf-feat-ai { display: none; }
    #modal-portfolio .pf-feat-top { flex-wrap: wrap; }
    #modal-portfolio .pf-feat:hover, #modal-portfolio .pf-feat:focus-within { transform: none; }
}

/* card groups: the entrance fades in place (a staggered lift reads as misaligned rows mid-way) */
html.m-on #modal-portfolio #pf-feat-grid[data-reveal-group]:not(.is-in) > *,
html.m-on #modal-portfolio #pf-grid[data-reveal-group]:not(.is-in) > * { transform: none; }
html.m-on #modal-portfolio #pf-feat-grid[data-reveal-group].is-in:not(.m-done) > *,
html.m-on #modal-portfolio #pf-grid[data-reveal-group].is-in:not(.m-done) > * { transition-property: opacity; }

/* no one-word orphans in taglines */
#modal-portfolio .pf-tagline, #modal-portfolio .pf-feat-tag, #modal-portfolio .pf-d-tagline, #modal-portfolio .pf-feat-list li { text-wrap: pretty; }

/* FLIP grid: leaving cards float at their old spot while the rest re-flow */
#modal-portfolio .pf-grid { position: relative; }
#modal-portfolio .pf-card[hidden] { display: none; }
#modal-portfolio .pf-card.is-leaving { position: absolute; z-index: 0; margin: 0; pointer-events: none; }
#modal-portfolio .pf-ext-note { color: var(--e-dust); }

/* empty state */
#modal-portfolio .pf-empty { gap: 14px; background: radial-gradient(420px 220px at 50% 0%, var(--e-ember-12), transparent 70%); }
#modal-portfolio .pf-empty-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; border: 1px solid var(--e-ember-25); background: var(--e-ember-12); color: var(--e-ember-hot); }
#modal-portfolio .pf-empty-ic svg { width: 26px; height: 26px; }
#modal-portfolio .pf-empty h3 { font-size: var(--e-fs-lg); color: var(--e-bone); }
#modal-portfolio .pf-empty p { max-width: 46ch; }
#modal-portfolio .pf-empty-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#modal-portfolio .pf-empty-tips[hidden] { display: none; }

/* the stage owns the screen: nothing underneath may scroll */
html.pf-stage-lock, html.pf-stage-lock body { overflow: hidden; }


/* ===== pricing.css ===== */
/* ==========================================================================
   Pricing page (#modal-pricing), built on the eas.css design system.
   Sales order: Premium partnership, Monthly retainer, Project-based.
   Everything is scoped under #modal-pricing. Mobile first.
   Motion: transform and opacity only; every animated block has a fixed box, so nothing
   around it moves. Loops run only while on screen (.is-live, set by pricing.js).
   Reduced motion gets the final state.
   ========================================================================== */

/* ---------- 1. Base --------------------------------------------------------- */
#modal-pricing {
    --pr-top: var(--sticky-top, 88px); /* clearance under the navbar (+ section strip on laptops) */
    --pr-green: #6ee7a8;
    color: var(--e-bone);
    font-family: var(--e-body);
    font-size: var(--e-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (min-width: 1100px) and (max-width: 1599px) { #modal-pricing { --pr-top: var(--sticky-top, 142px); } }
#modal-pricing h1, #modal-pricing h2, #modal-pricing h3 {
    font-family: var(--e-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05;
    text-wrap: balance; margin: 0; color: var(--e-bone);
}
#modal-pricing h2 { font-size: var(--e-fs-2xl); }
#modal-pricing h3 { font-size: var(--e-fs-lg); }
#modal-pricing p { margin: 0; }
#modal-pricing a { color: inherit; }
#modal-pricing strong { color: var(--e-bone); font-weight: 600; }
#modal-pricing ::selection { background: var(--e-ember); color: #000; }
#modal-pricing section[id] { scroll-margin-top: var(--pr-top); }
/* legacy widget.css paints the FAQ id with !important gradients */
#modal-pricing #pricing-faq { background: transparent !important; overflow: visible; }
#modal-pricing section:focus { outline: none; }
#modal-pricing .x-lede a { color: var(--e-bone); text-decoration: underline; text-underline-offset: 3px; }
#modal-pricing .x-lede a:hover { color: var(--e-ember-hot); }
#modal-pricing .pr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#modal-pricing svg { flex: none; }
#modal-pricing ul, #modal-pricing ol { list-style: none; margin: 0; padding: 0; }
#modal-pricing .x-section { padding-block: clamp(36px, 4.1vw, 60px); }
#modal-pricing .x-head { margin-bottom: clamp(20px, 2.4vw, 30px); }
#modal-pricing .pr-mark-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 6px; background: var(--e-ember); color: #100800; }
#modal-pricing .pr-card-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#modal-pricing .pr-card-actions .x-btn { min-height: 50px; }

/* ---------- 2. Hero: headline + three doors ---------------------------------- */
#modal-pricing .pr-hero { position: relative; overflow: clip; isolation: isolate; padding: clamp(28px, 4.4vw, 64px) 0 clamp(40px, 4.4vw, 64px); }
#modal-pricing .pr-hero-glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 55% at 12% 0%, rgba(255, 107, 0, 0.14), transparent 62%),
        radial-gradient(40% 50% at 18% 78%, rgba(255, 107, 0, 0.08), transparent 70%),
        radial-gradient(40% 40% at 100% 20%, rgba(255, 140, 58, 0.06), transparent 70%);
}
#modal-pricing .pr-hero-top { display: grid; gap: 18px; margin-bottom: clamp(26px, 3.6vw, 44px); }
#modal-pricing .pr-hero-copy .x-mark { margin-bottom: 12px; }
#modal-pricing .pr-title { font-size: var(--e-fs-hero); line-height: 1; letter-spacing: -0.03em; max-width: 17ch; }
#modal-pricing .pr-em { color: var(--e-ember); }
#modal-pricing .pr-lede { font-size: var(--e-fs-md); line-height: 1.55; color: var(--e-smoke); max-width: 48ch; margin-bottom: 20px; }
#modal-pricing .pr-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#modal-pricing .pr-hero-actions .x-btn { min-height: 52px; }
@media (min-width: 1024px) {
    #modal-pricing .pr-hero-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
}

/* doors */
#modal-pricing .pr-doors { display: grid; gap: 12px; perspective: 1400px; }
#modal-pricing .pr-door-li { display: grid; min-width: 0; }
#modal-pricing .pr-door {
    --door-bg: linear-gradient(165deg, #1a1511 0%, var(--e-coal) 70%);
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "name name" "for for" "price price" "sub sub" "go go";
    align-content: start; gap: 6px;
    padding: 22px 22px 18px; border-radius: 22px;
    border: 1px solid var(--e-line); background: var(--door-bg);
    color: inherit; text-decoration: none;
    box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.9);
    transition: border-color var(--e-t-std), box-shadow var(--e-t-slow) var(--e-ease-out);
}
#modal-pricing .pr-door-glow {
    position: absolute; z-index: -1; top: -40%; right: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.22), transparent 65%);
    opacity: 0.35; transform: scale(0.9);
    transition: opacity var(--e-t-slow) var(--e-ease-out), transform var(--e-t-slow) var(--e-ease-out);
}
#modal-pricing .pr-door:hover { border-color: var(--e-ember-45); box-shadow: 0 34px 70px -38px rgba(255, 107, 0, 0.45); }
#modal-pricing .pr-door:hover .pr-door-glow { opacity: 1; transform: scale(1.08); }
#modal-pricing .pr-door:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 3px; }
#modal-pricing .pr-door-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#modal-pricing .pr-door-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line-strong); color: var(--e-ember-hot); }
#modal-pricing .pr-door-ico svg { width: 21px; height: 21px; }
#modal-pricing .pr-door-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); color: var(--e-smoke); white-space: nowrap; }
#modal-pricing .pr-door-name { grid-area: name; font-family: var(--e-display); font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
#modal-pricing .pr-door-for { grid-area: for; color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.5; min-height: 3em; }
@media (min-width: 1280px) { #modal-pricing .pr-door { padding: 20px 22px 16px; } #modal-pricing .pr-door-top { margin-bottom: 4px; } #modal-pricing .pr-door-go { margin-top: 10px; padding-top: 12px; } }
#modal-pricing .pr-door-price { grid-area: price; margin-top: 10px; font: 700 clamp(1.7rem, 1.3rem + 1.3vw, 2.35rem)/1.05 var(--e-display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-pricing .pr-door-price small { font-size: 0.5em; font-weight: 600; color: var(--e-smoke); letter-spacing: 0; margin-left: 2px; }
#modal-pricing .pr-door-price em { font-style: normal; font-size: 0.45em; font-weight: 600; color: var(--e-smoke); letter-spacing: 0; vertical-align: 0.35em; margin-right: 4px; text-transform: uppercase; }
#modal-pricing .pr-door-sub { grid-area: sub; font-size: var(--e-fs-xs); color: var(--e-dust); }
#modal-pricing .pr-door-go {
    grid-area: go; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--e-line);
    font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-bone);
}
#modal-pricing .pr-door-go svg { width: 18px; height: 18px; color: var(--e-ember); transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-pricing .pr-door:hover .pr-door-go svg { transform: translateX(4px); }

/* Premium door: a live ember edge travels round the card (a rotating conic layer under an inner fill) */
#modal-pricing .pr-door.is-premium {
    --door-bg: radial-gradient(90% 70% at 100% 0%, rgba(255, 107, 0, 0.16), transparent 62%), linear-gradient(165deg, #22170e 0%, #100c09 70%);
    border-color: transparent; background: transparent;
    box-shadow: 0 40px 80px -46px rgba(255, 107, 0, 0.55);
}
#modal-pricing .pr-door.is-premium::before {
    content: ''; position: absolute; z-index: -3; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(255, 107, 0, 0.35), rgba(255, 107, 0, 0.35) 55%, #ffb47d 72%, var(--e-ember) 80%, rgba(255, 107, 0, 0.35) 92%);
    animation: pr-spin 7s linear infinite;
}
#modal-pricing .pr-door.is-premium::after { content: ''; position: absolute; z-index: -2; inset: 1px; border-radius: 21px; background: var(--door-bg); pointer-events: none; }
#modal-pricing .pr-door.is-premium .pr-door-glow { opacity: 0.7; }
#modal-pricing .pr-door.is-premium .pr-door-tag { background: var(--e-ember); border-color: var(--e-ember); color: #100800; }
#modal-pricing .pr-door.is-premium .pr-door-ico { background: var(--e-ember); border-color: var(--e-ember); color: #100800; box-shadow: 0 10px 26px -10px rgba(255, 107, 0, 0.8); }
#modal-pricing .pr-door.is-premium .pr-door-price { background: linear-gradient(100deg, #fff4ea 0%, #ffc59a 55%, var(--e-ember-hot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#modal-pricing .pr-door.is-premium .pr-door-price small { -webkit-text-fill-color: var(--e-smoke); }
@keyframes pr-spin { to { transform: rotate(1turn); } }

@media (min-width: 760px) {
    #modal-pricing .pr-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
    #modal-pricing .pr-door { padding: 18px 16px 16px; }
    #modal-pricing .pr-door-tag { display: none; }
}
/* phones: compact doors, name and price on one line */
@media (max-width: 759px) {
    #modal-pricing .pr-door {
        grid-template-areas: "top top" "name price" "for for"; column-gap: 12px; row-gap: 4px;
        padding: 16px 16px 16px; border-radius: 18px;
    }
    #modal-pricing .pr-door.is-premium::after { border-radius: 17px; }
    #modal-pricing .pr-door-top { margin-bottom: 4px; }
    #modal-pricing .pr-door-ico { display: none; }
    #modal-pricing .pr-door-tag { padding: 4px 9px; font-size: 0.7rem; }
    #modal-pricing .pr-door-name { align-self: center; font-size: 1.1rem; }
    #modal-pricing .pr-door-price { margin: 0; align-self: center; text-align: right; font-size: 1.3rem; }
    #modal-pricing .pr-door-price em { display: none; }
    #modal-pricing .pr-door-for { min-height: 0; font-size: var(--e-fs-xs); }
    #modal-pricing .pr-door-sub, #modal-pricing .pr-door-go { display: none; }
}

/* proof strip */
#modal-pricing .pr-proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(20px, 2.6vw, 30px); color: var(--e-smoke); font-size: var(--e-fs-sm); }
#modal-pricing .pr-proof li { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
#modal-pricing .pr-proof b { font: 700 clamp(1.1rem, 1rem + 0.4vw, 1.3rem)/1 var(--e-display); color: var(--e-bone); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#modal-pricing .pr-proof .is-term { align-items: center; }
#modal-pricing .pr-proof .is-term b { color: var(--e-ember-hot); }
#modal-pricing .pr-proof .is-term svg { width: 16px; height: 16px; color: var(--e-ember-hot); }
#modal-pricing .pr-n { display: inline-grid; }
#modal-pricing .pr-n > span { grid-area: 1 / 1; justify-self: start; }
#modal-pricing .pr-n-ghost { visibility: hidden; }
@media (max-width: 559px) { #modal-pricing .pr-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: var(--e-fs-xs); } }

/* ---------- 3. Finder: tabs ------------------------------------------------- */
#modal-pricing .pr-finder { isolation: isolate; border-top: 1px solid var(--e-line); }
#modal-pricing .pr-tabs {
    --tab-x: 0%;
    position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr;
    width: 100%; max-width: 560px; margin: 0 0 16px; padding: 5px;
    border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); background: rgba(13, 11, 9, 0.9);
}
#modal-pricing .pr-tabs::before {
    content: ''; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
    border-radius: var(--e-r-pill); background: linear-gradient(135deg, var(--e-ember-hot), var(--e-ember) 55%, var(--e-ember-deep));
    box-shadow: 0 10px 26px -10px rgba(255, 107, 0, 0.7);
    transform: translateX(var(--tab-x)); transition: transform 420ms var(--e-ease-out);
}
#modal-pricing .pr-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px;
    border: 0; border-radius: var(--e-r-pill); background: transparent; cursor: pointer;
    color: var(--e-smoke); font: 600 var(--e-fs-sm)/1.2 var(--e-body); text-align: center; transition: color var(--e-t-std);
}
#modal-pricing .pr-tab svg { width: 18px; height: 18px; }
#modal-pricing .pr-tab[aria-selected="true"] { color: #100800; }
#modal-pricing .pr-tab:not([aria-selected="true"]):hover { color: var(--e-bone); }
#modal-pricing .pr-tab:focus-visible { outline: 2px solid var(--e-bone); outline-offset: -4px; }
#modal-pricing .pr-tabpanel[hidden] { display: none; }
#modal-pricing .pr-tabpanel.is-in-tab { animation: pr-tab-in 460ms var(--e-ease-out) both; }
@keyframes pr-tab-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) { #modal-pricing .pr-tab svg { display: none; } #modal-pricing .pr-tab { padding: 0 8px; } }

/* ---------- 4. Estimator ---------------------------------------------------- */
#modal-pricing .pr-est {
    position: relative; isolation: isolate; display: grid; gap: 14px;
    padding: clamp(14px, 2.2vw, 24px); border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line-strong);
    background: radial-gradient(80% 60% at 100% 0%, rgba(255, 107, 0, 0.08), transparent 60%), rgba(13, 11, 9, 0.94);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
#modal-pricing .pr-est-controls { display: grid; gap: 14px; }
#modal-pricing .pr-est-hours, #modal-pricing .pr-est-opts { min-width: 0; padding: clamp(14px, 2.2vw, 22px); border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.35); }
#modal-pricing .pr-est-hours { display: grid; gap: 12px; align-content: start; }
#modal-pricing .pr-est-hours-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#modal-pricing .pr-est-label, #modal-pricing .pr-seg legend { font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-smoke); }
#modal-pricing .pr-est-readout { display: flex; align-items: baseline; gap: 6px; color: var(--e-smoke); font-size: var(--e-fs-sm); }
#modal-pricing .pr-est-readout b { font: 700 clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem)/1 var(--e-display); color: var(--e-bone); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

#modal-pricing .pr-dual { --lo: 0.2593; --span: 0.1852; position: relative; height: 44px; }
#modal-pricing .pr-dual-track { position: absolute; left: 14px; right: 14px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(244, 239, 231, 0.1); overflow: hidden; }
#modal-pricing .pr-dual-track i {
    position: absolute; inset: 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) 60%, var(--e-ember-hot));
    transform-origin: 0 50%; transform: translateX(calc(var(--lo) * 100%)) scaleX(var(--span));
    transition: transform 220ms var(--e-ease-out);
}
#modal-pricing .pr-dual input {
    position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; touch-action: pan-y;
}
#modal-pricing .pr-dual input:focus { outline: none; }
#modal-pricing .pr-dual input:focus-visible, #modal-pricing .pr-dual.lo-top input[data-est-lo] { z-index: 2; }
#modal-pricing .pr-dual input::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; }
#modal-pricing .pr-dual input::-moz-range-track { height: 44px; background: transparent; border: 0; }
#modal-pricing .pr-dual input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
    width: 28px; height: 28px; margin-top: 8px; border-radius: 50%;
    background: var(--e-bone); border: 4px solid var(--e-ember); box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.6);
    transition: transform var(--e-t-quick) var(--e-ease-out), box-shadow var(--e-t-std);
}
#modal-pricing .pr-dual input::-moz-range-thumb {
    pointer-events: auto; cursor: grab; width: 20px; height: 20px; border-radius: 50%;
    background: var(--e-bone); border: 4px solid var(--e-ember); box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.6);
}
#modal-pricing .pr-dual input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); box-shadow: 0 0 0 10px rgba(255, 107, 0, 0.22), 0 6px 16px rgba(0, 0, 0, 0.6); }
#modal-pricing .pr-dual input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--e-black), 0 0 0 6px var(--e-ember-hot); }
#modal-pricing .pr-dual input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--e-black), 0 0 0 6px var(--e-ember-hot); }
#modal-pricing .pr-dual-scale { position: relative; height: 16px; margin-top: -6px; }
#modal-pricing .pr-dual-scale span { position: absolute; top: 0; left: calc(14px + var(--at) * (100% - 28px)); transform: translateX(-50%); font-size: 0.7rem; color: var(--e-dust); font-variant-numeric: tabular-nums; }

#modal-pricing .pr-est-fields { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#modal-pricing .pr-est-fields label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--e-fs-xs); color: var(--e-dust); }
#modal-pricing .pr-est-fields input {
    width: 7.5ch; min-height: 44px; padding: 0 10px; border-radius: 10px;
    border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.5); color: var(--e-bone);
    font: 600 var(--e-fs-md) var(--e-body); font-variant-numeric: tabular-nums; text-align: center;
    transition: border-color var(--e-t-quick), box-shadow var(--e-t-quick);
}
#modal-pricing .pr-est-fields input:focus { outline: none; border-color: var(--e-ember); box-shadow: 0 0 0 3px var(--e-ember-25); }
#modal-pricing .pr-est-fields em { font-style: normal; }
#modal-pricing .pr-est-dash { color: var(--e-dust); }
#modal-pricing .pr-est-presets { display: flex; flex-wrap: wrap; gap: 8px; }
#modal-pricing .pr-est-presets button {
    min-height: 40px; padding: 0 14px; border-radius: var(--e-r-pill); cursor: pointer;
    border: 1px solid var(--e-line-strong); background: transparent; color: var(--e-smoke);
    font: 600 var(--e-fs-sm) var(--e-body); font-variant-numeric: tabular-nums;
    transition: background var(--e-t-quick), border-color var(--e-t-quick), color var(--e-t-quick), transform var(--e-t-quick);
}
#modal-pricing .pr-est-presets button:hover { color: var(--e-bone); border-color: var(--e-ember-45); }
#modal-pricing .pr-est-presets button:active { transform: scale(0.96); }
#modal-pricing .pr-est-presets button[aria-pressed="true"] { background: var(--e-ember-12); border-color: var(--e-ember); color: var(--e-bone); }
@media (max-width: 559px) {
    #modal-pricing .pr-est-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
    #modal-pricing .pr-est-fields label { min-width: 0; }
    #modal-pricing .pr-est-fields input { flex: 1; width: 100%; min-width: 0; }
    #modal-pricing .pr-est-fields em { display: none; }
    #modal-pricing .pr-est .pr-est-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    #modal-pricing .pr-est .pr-est-presets button { padding: 0 4px; font-size: var(--e-fs-xs); }
}

/* segmented controls (size, timeline, months) and the support switch */
#modal-pricing .pr-est-opts { display: grid; gap: 12px; align-content: start; }
#modal-pricing .pr-seg { margin: 0; padding: 0; border: 0; min-width: 0; transition: opacity var(--e-t-std); }
#modal-pricing .pr-seg legend { padding: 0; margin-bottom: 6px; }
#modal-pricing .pr-seg legend small { font-weight: 500; color: var(--e-dust); }
#modal-pricing .pr-seg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line); }
#modal-pricing .pr-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#modal-pricing .pr-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#modal-pricing .pr-seg label { position: relative; display: grid; cursor: pointer; }
#modal-pricing .pr-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
#modal-pricing .pr-seg label span {
    display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 5px 8px; border-radius: 10px; text-align: center;
    font-size: var(--e-fs-xs); font-weight: 600; line-height: 1.25; color: var(--e-smoke);
    transition: background var(--e-t-std), color var(--e-t-std), box-shadow var(--e-t-std);
}
#modal-pricing .pr-seg label:hover span { color: var(--e-bone); }
#modal-pricing .pr-seg input:checked + span { background: var(--e-char); color: var(--e-bone); box-shadow: inset 0 0 0 1px var(--e-ember-45), 0 6px 16px -8px rgba(255, 107, 0, 0.5); }
#modal-pricing .pr-seg input:focus-visible + span { outline: 2px solid var(--e-ember-hot); outline-offset: 1px; }
#modal-pricing .pr-seg-months.is-off { opacity: 0.42; }
#modal-pricing .pr-seg-months.is-off label { cursor: default; }
#modal-pricing .pr-seg-months.is-off input:checked + span { box-shadow: none; background: rgba(244, 239, 231, 0.05); }

#modal-pricing .pr-switch { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: center; cursor: pointer; min-height: 44px; }
#modal-pricing .pr-switch input { position: absolute; left: 0; top: 50%; width: 50px; height: 30px; margin: -15px 0 0; opacity: 0; cursor: pointer; }
#modal-pricing .pr-switch-ui { position: relative; width: 50px; height: 30px; border-radius: 15px; background: rgba(244, 239, 231, 0.12); border: 1px solid var(--e-line-strong); transition: background var(--e-t-std), border-color var(--e-t-std); }
#modal-pricing .pr-switch-ui i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--e-bone); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
#modal-pricing .pr-switch input:checked + .pr-switch-ui { background: var(--e-ember); border-color: var(--e-ember); }
#modal-pricing .pr-switch input:checked + .pr-switch-ui i { transform: translateX(20px); }
#modal-pricing .pr-switch input:focus-visible + .pr-switch-ui { outline: 2px solid var(--e-ember-hot); outline-offset: 3px; }
#modal-pricing .pr-switch-text b { display: block; font-size: var(--e-fs-sm); font-weight: 600; }
#modal-pricing .pr-switch-text small { display: block; font-size: var(--e-fs-xs); color: var(--e-dust); line-height: 1.4; }
@media (min-width: 560px) and (max-width: 1023px) {
    #modal-pricing .pr-est-opts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
}
@media (min-width: 1024px) {
    #modal-pricing .pr-est-controls { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
    #modal-pricing .pr-est-opts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    #modal-pricing .pr-est-opts .pr-switch { align-self: end; }
}

/* recommendation banner: fixed min height, text swaps in place */
#modal-pricing .pr-est-why {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 14px 16px; border-radius: var(--e-r-md);
    border: 1px solid var(--e-ember-45); background: linear-gradient(120deg, rgba(255, 107, 0, 0.14), rgba(255, 107, 0, 0.03) 70%);
}
#modal-pricing .pr-est-why::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 170, 110, 0.22) 50%, transparent 70%);
    transform: translateX(-110%);
}
#modal-pricing .pr-est.is-changed .pr-est-why::after { animation: pr-sweep 1s var(--e-ease-out) both; }
@keyframes pr-sweep { 0% { transform: translateX(-110%); opacity: 1; } 100% { transform: translateX(110%); opacity: 1; } }
#modal-pricing .pr-est-why-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--e-ember); color: #100800; }
#modal-pricing .pr-est.is-changed .pr-est-why-ico { animation: pr-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes pr-pop { 0% { transform: scale(0.7) rotate(-40deg); } 100% { transform: none; } }
#modal-pricing .pr-est-why-ico svg { width: 18px; height: 18px; }
#modal-pricing .pr-est-why p { font-size: var(--e-fs-sm); line-height: 1.5; color: var(--e-smoke); }
/* the sizer holds the longest possible reason in the same cell, so the banner never changes height */
#modal-pricing .pr-est-why-ico { grid-column: 1; grid-row: 1; }
#modal-pricing .pr-est-why-text, #modal-pricing .pr-est-why-sizer { grid-column: 2; grid-row: 1; }
#modal-pricing .pr-est-why-sizer { visibility: hidden; pointer-events: none; font-weight: 700; }
#modal-pricing .pr-est-why b { color: var(--e-bone); font-weight: 700; }

/* the three plans, in sales order */
#modal-pricing .pr-paths { display: grid; gap: 12px; }
#modal-pricing .pr-path {
    position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px;
    padding: 20px 18px 16px; border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: var(--e-coal);
    transition: border-color 400ms var(--e-ease-out), box-shadow 500ms var(--e-ease-out), transform 500ms var(--e-ease-out), background 400ms;
}
#modal-pricing .pr-path.is-rec { border-color: var(--e-ember); background: linear-gradient(165deg, #22160c, var(--e-coal) 65%); box-shadow: 0 30px 70px -40px rgba(255, 107, 0, 0.75), inset 0 1px 0 rgba(255, 170, 110, 0.15); }
#modal-pricing .pr-path-badge {
    position: absolute; top: -11px; left: 16px; padding: 4px 10px; border-radius: var(--e-r-pill);
    background: var(--e-ember); color: #100800; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    box-shadow: 0 6px 16px -4px rgba(255, 107, 0, 0.7);
    opacity: 0; transform: translateY(6px) scale(0.8); transition: opacity 280ms, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#modal-pricing .pr-path.is-rec .pr-path-badge { opacity: 1; transform: none; }
#modal-pricing .pr-path-kicker { font-size: var(--e-fs-xs); font-weight: 600; color: var(--e-dust); }
#modal-pricing .pr-path.is-rec .pr-path-kicker { color: var(--e-ember-hot); }
#modal-pricing .pr-path h3 { font-size: var(--e-fs-lg); margin-top: -4px; }
#modal-pricing .pr-path-total { display: grid; gap: 3px; padding-top: 2px; }
#modal-pricing .pr-path-total b { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.85rem)/1.05 var(--e-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#modal-pricing .pr-path-total b.is-long { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }
#modal-pricing .pr-path-total small { font-size: var(--e-fs-xs); color: var(--e-dust); }
#modal-pricing .pr-path-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--e-fs-sm); font-variant-numeric: tabular-nums; }
#modal-pricing .pr-path-meta [data-p-rate] { font-weight: 600; color: var(--e-bone); }
#modal-pricing .pr-path-save { padding: 3px 9px; border-radius: var(--e-r-pill); background: rgba(61, 220, 132, 0.1); border: 1px solid rgba(61, 220, 132, 0.3); color: var(--pr-green); font-size: var(--e-fs-xs); font-weight: 600; white-space: nowrap; }
#modal-pricing .pr-path-save.is-muted { background: rgba(244, 239, 231, 0.05); border-color: var(--e-line); color: var(--e-dust); }
#modal-pricing .pr-path[data-path="vip"] .pr-path-save { background: var(--e-ember-12); border-color: var(--e-ember-25); color: var(--e-ember-hot); }
#modal-pricing .pr-path-fit { min-height: 2.9em; font-size: var(--e-fs-sm); line-height: 1.45; color: var(--e-bone); font-weight: 500; }
#modal-pricing .pr-path-list { padding: 10px 0 0; border-top: 1px solid var(--e-line); display: grid; gap: 6px; }
#modal-pricing .pr-path-list li { position: relative; padding-left: 22px; font-size: var(--e-fs-sm); color: var(--e-smoke); line-height: 1.45; }
#modal-pricing .pr-path-list li::before { content: ''; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 6px; border-left: 2px solid var(--e-ember); border-bottom: 2px solid var(--e-ember); transform: rotate(-45deg); }
#modal-pricing .pr-path-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; align-self: flex-start; color: var(--e-bone); font-size: var(--e-fs-sm); font-weight: 600; text-decoration: none; }
#modal-pricing .pr-path-more svg { width: 15px; height: 15px; color: var(--e-ember); transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-pricing .pr-path-more:hover { color: var(--e-ember-hot); }
#modal-pricing .pr-path-more:hover svg { transform: translateX(4px); }

#modal-pricing .pr-est-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding-top: 2px; }
#modal-pricing .pr-est-foot .x-btn { min-height: 48px; }
#modal-pricing .pr-est-share { gap: 8px; }
#modal-pricing .pr-est-share svg { width: 17px; height: 17px; }
#modal-pricing .pr-est-share.is-copied { border-color: rgba(61, 220, 132, 0.5); color: var(--pr-green); }
#modal-pricing .pr-est-note { flex: 1 1 100%; color: var(--e-dust); font-size: var(--e-fs-xs); line-height: 1.5; max-width: 96ch; }
@media (min-width: 1100px) { #modal-pricing .pr-est-note { flex: 1 1 300px; } }

@media (min-width: 700px) {
    #modal-pricing .pr-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 10px; }
    #modal-pricing .pr-path.is-rec { transform: translateY(-6px); }
}
@media (min-width: 700px) and (max-width: 899px) { #modal-pricing .pr-path { padding: 20px 14px 16px; } }
@media (max-width: 899px) { #modal-pricing .pr-path-list { display: none; } }
/* phones: plan cards as compact rows (name + total, then rate and why) */
@media (max-width: 699px) {
    #modal-pricing .pr-path { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 14px 12px; }
    #modal-pricing .pr-path-kicker { grid-column: 1; grid-row: 1; }
    #modal-pricing .pr-path h3 { grid-column: 1; grid-row: 2; margin: 0; font-size: 1.05rem; align-self: center; }
    #modal-pricing .pr-path-total { grid-column: 2; grid-row: 1 / span 2; text-align: right; align-self: center; }
    #modal-pricing .pr-path-total b, #modal-pricing .pr-path-total b.is-long { font-size: 1.2rem; }
    #modal-pricing .pr-path-meta, #modal-pricing .pr-path-fit, #modal-pricing .pr-path-more { grid-column: 1 / -1; }
    #modal-pricing .pr-path-fit { min-height: 2.9em; font-size: var(--e-fs-xs); color: var(--e-smoke); }
    #modal-pricing .pr-path-total small { white-space: nowrap; }
    #modal-pricing .pr-path-meta { font-size: var(--e-fs-xs); }
    #modal-pricing .pr-path-more { min-height: 36px; font-size: var(--e-fs-xs); }
    #modal-pricing .pr-paths { gap: 14px; padding-top: 6px; }
}

/* ---------- 5. Plan finder quiz ------------------------------------------------ */
#modal-pricing .pr-quiz { display: grid; gap: 16px; }
#modal-pricing .pr-quiz-main { border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: rgba(13, 11, 9, 0.92); padding: clamp(18px, 3vw, 34px); min-width: 0; }
#modal-pricing .pr-quiz-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 16px; margin-bottom: 26px; }
#modal-pricing .pr-quiz-count { font-size: var(--e-fs-sm); color: var(--e-dust); white-space: nowrap; }
#modal-pricing .pr-quiz-count b { color: var(--e-bone); font-weight: 600; }
#modal-pricing .pr-quiz-track { display: flex; justify-content: flex-end; gap: 4px; }
#modal-pricing .pr-quiz-dot {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px; border-radius: var(--e-r-pill);
    border: 1px solid transparent; background: transparent; color: var(--e-smoke); font: 500 var(--e-fs-xs) var(--e-body); cursor: pointer;
    transition: color var(--e-t-quick), border-color var(--e-t-quick), background var(--e-t-quick);
}
#modal-pricing .pr-quiz-dot em { display: none; font-style: normal; padding-right: 8px; }
#modal-pricing .pr-quiz-dot span {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(244, 239, 231, 0.06); color: var(--e-smoke); font: 700 0.74rem var(--e-display);
    transition: background var(--e-t-std), color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-pricing .pr-quiz-dot:disabled { cursor: default; opacity: 0.8; }
#modal-pricing .pr-quiz-dot:not(:disabled):hover { color: var(--e-bone); border-color: var(--e-line-strong); }
#modal-pricing .pr-quiz-dot.is-done span { background: var(--e-ember-25); color: var(--e-ember-hot); }
#modal-pricing .pr-quiz-dot[aria-current="step"] { color: var(--e-bone); border-color: var(--e-ember-45); opacity: 1; }
#modal-pricing .pr-quiz-dot[aria-current="step"] span { background: var(--e-ember); color: #100800; transform: scale(1.06); }
#modal-pricing .pr-quiz-progress { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(244, 239, 231, 0.08); overflow: hidden; }
#modal-pricing .pr-quiz-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) 70%, #ffb47d); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--e-ease-out); }
@media (min-width: 1180px) { #modal-pricing .pr-quiz-dot em { display: inline; } #modal-pricing .pr-quiz-dot { padding-right: 4px; } }
@media (max-width: 559px) { #modal-pricing .pr-quiz-top { grid-template-columns: minmax(0, 1fr); } #modal-pricing .pr-quiz-track { justify-content: flex-start; } }

/* all five questions share one grid cell, so the card keeps the height of the tallest */
#modal-pricing .pr-quiz-stage { display: grid; }
#modal-pricing .pr-quiz-q {
    grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translate3d(32px, 0, 0);
    transition: opacity 260ms var(--e-ease-std), transform 420ms var(--e-ease-out), visibility 0s linear 420ms;
}
#modal-pricing .pr-quiz-q.is-past { transform: translate3d(-32px, 0, 0); }
#modal-pricing .pr-quiz-q.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms var(--e-ease-out) 120ms, transform 560ms var(--e-ease-out) 120ms, visibility 0s; }
#modal-pricing .pr-quiz:not(.is-ready) .pr-quiz-q:first-child { opacity: 1; visibility: visible; transform: none; }
#modal-pricing .pr-quiz-q h3 { font-size: var(--e-fs-xl); margin-bottom: 20px; max-width: 30ch; }
#modal-pricing .pr-quiz-options { display: grid; gap: 10px; }
#modal-pricing .pr-opt {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 3px; align-items: center;
    min-height: 76px; padding: 14px 44px 14px 14px; text-align: left;
    border-radius: var(--e-r-md); border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
    color: var(--e-bone); font-family: inherit; cursor: pointer;
    transition: border-color var(--e-t-std), background var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
    -webkit-tap-highlight-color: transparent;
}
#modal-pricing .pr-opt::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 107, 0, 0.22), transparent 60%); opacity: 0; transition: opacity var(--e-t-slow) var(--e-ease-out); }
#modal-pricing .pr-opt-ico {
    grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(244, 239, 231, 0.05); border: 1px solid var(--e-line); color: var(--e-ember-hot);
    transition: background var(--e-t-std), color var(--e-t-std), border-color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-pricing .pr-opt-ico svg { width: 22px; height: 22px; }
#modal-pricing .pr-opt b { align-self: end; font-weight: 600; font-size: var(--e-fs-md); line-height: 1.3; }
#modal-pricing .pr-opt small { align-self: start; color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.45; }
#modal-pricing .pr-opt-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--e-ember); color: #100800; transform: scale(0); opacity: 0; transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--e-t-quick); }
#modal-pricing .pr-opt-check svg { width: 13px; height: 13px; }
#modal-pricing .pr-opt:hover { border-color: var(--e-line-strong); background: var(--e-char); }
#modal-pricing .pr-opt:hover .pr-opt-ico { transform: translateY(-2px); }
#modal-pricing .pr-opt:active { transform: scale(0.985); }
#modal-pricing .pr-opt[aria-checked="true"] { border-color: var(--e-ember-45); background: rgba(40, 20, 6, 0.6); }
#modal-pricing .pr-opt[aria-checked="true"]::before { opacity: 1; }
#modal-pricing .pr-opt[aria-checked="true"] .pr-opt-ico { background: var(--e-ember); border-color: var(--e-ember); color: #100800; }
#modal-pricing .pr-opt[aria-checked="true"] .pr-opt-check { transform: scale(1); opacity: 1; }
@media (min-width: 640px) {
    #modal-pricing .pr-quiz-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #modal-pricing .pr-opt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; align-items: start; row-gap: 6px; min-height: 176px; padding: 18px; }
    #modal-pricing .pr-opt-ico { grid-row: auto; margin-bottom: 10px; }
    #modal-pricing .pr-opt b { align-self: start; }
    #modal-pricing .pr-opt-check { top: 16px; right: 16px; }
}
#modal-pricing .pr-quiz-nav { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--e-line); }
#modal-pricing .pr-quiz-back { min-height: 44px; padding: 0 18px 0 14px; gap: 8px; }
#modal-pricing .pr-quiz-back svg { width: 16px; height: 16px; }
#modal-pricing .pr-quiz-back:disabled { opacity: 0.55; cursor: default; }
#modal-pricing .pr-quiz-hint { color: var(--e-dust); font-size: var(--e-fs-sm); line-height: 1.35; min-width: 0; }

#modal-pricing .pr-quiz-live {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line-strong);
    background: linear-gradient(160deg, rgba(23, 19, 15, 0.97), rgba(13, 11, 9, 0.97));
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: clamp(20px, 3vw, 28px);
}
#modal-pricing .pr-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#modal-pricing .pr-live-head strong { font-family: var(--e-display); font-size: 0.95rem; letter-spacing: 0.02em; }
#modal-pricing .pr-live-state span { min-width: 7.5ch; }
#modal-pricing .pr-quiz:not(.is-listening) .pr-live-state i { animation: none; background: var(--e-dust); }
#modal-pricing .pr-live-bars { display: grid; gap: 14px; }
#modal-pricing .pr-live-bar { display: grid; grid-template-columns: minmax(0, 1fr) 4.5ch; gap: 7px 12px; align-items: center; }
#modal-pricing .pr-live-name { font-size: var(--e-fs-sm); font-weight: 500; color: var(--e-smoke); transition: color var(--e-t-std); }
#modal-pricing .pr-live-pct { font: 700 0.9rem var(--e-display); color: var(--e-dust); font-variant-numeric: tabular-nums; text-align: right; transition: color var(--e-t-std); }
#modal-pricing .pr-live-track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(244, 239, 231, 0.08); overflow: hidden; }
#modal-pricing .pr-live-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember)); opacity: 0.5; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--e-t-slow) var(--e-ease-out), opacity var(--e-t-std); }
#modal-pricing .pr-live-bar.is-lead .pr-live-name { color: var(--e-bone); }
#modal-pricing .pr-live-bar.is-lead .pr-live-pct { color: var(--e-ember-hot); }
#modal-pricing .pr-live-bar.is-lead .pr-live-track i { opacity: 1; background: linear-gradient(90deg, var(--e-ember), var(--e-ember-hot)); }
#modal-pricing .pr-verdict { position: relative; display: grid; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--e-line); }
#modal-pricing .pr-verdict-wait, #modal-pricing .pr-verdict-result { grid-area: 1 / 1; min-width: 0; }
#modal-pricing .pr-verdict-wait { align-self: center; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 12px 8px; transition: opacity 280ms var(--e-ease-std), transform 420ms var(--e-ease-out); }
#modal-pricing .pr-verdict-wait p { color: var(--e-dust); font-size: var(--e-fs-sm); max-width: 30ch; }
#modal-pricing .pr-verdict-dots { display: flex; gap: 8px; }
#modal-pricing .pr-verdict-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(244, 239, 231, 0.12); transition: background var(--e-t-std), transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
#modal-pricing .pr-verdict-dots i.is-on { background: var(--e-ember); transform: scale(1.25); }
#modal-pricing .pr-verdict-result { opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); transition: opacity 240ms, transform 240ms, visibility 0s linear 240ms; }
#modal-pricing .pr-verdict.is-resolved .pr-verdict-wait { opacity: 0; transform: scale(0.96); pointer-events: none; }
#modal-pricing .pr-verdict.is-resolved .pr-verdict-result { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--e-ease-out) 120ms, transform 620ms var(--e-ease-out) 120ms, visibility 0s; }
#modal-pricing .pr-verdict-result > * { transition: opacity 500ms var(--e-ease-out), transform 700ms var(--e-ease-out); }
#modal-pricing .pr-verdict:not(.is-resolved) .pr-verdict-result > * { opacity: 0; transform: translate3d(0, 10px, 0); transition: none; }
#modal-pricing .pr-verdict.is-resolved .pr-verdict-name { transition-delay: 180ms; }
#modal-pricing .pr-verdict.is-resolved .pr-verdict-price { transition-delay: 240ms; }
#modal-pricing .pr-verdict.is-resolved .pr-verdict-why { transition-delay: 300ms; }
#modal-pricing .pr-verdict.is-resolved .pr-verdict-actions { transition-delay: 360ms; }
#modal-pricing .pr-verdict.is-resolved .pr-quiz-reset { transition-delay: 420ms; }
#modal-pricing .pr-quiz-live::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 140, 58, 0.16) 50%, transparent 70%); transform: translateX(-110%); opacity: 0; }
#modal-pricing .pr-quiz-live:has(.is-resolved)::after { animation: pr-sweep 1.2s var(--e-ease-out) 60ms both; }
#modal-pricing .pr-quiz-live:has(.is-resolved) { border-color: var(--e-ember-45); }
#modal-pricing .pr-verdict-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--e-fs-xs); font-weight: 600; color: var(--e-ember-hot); margin-bottom: 8px; }
#modal-pricing .pr-verdict-label em { font-style: normal; padding: 3px 9px; border-radius: var(--e-r-pill); background: var(--e-ember-12); border: 1px solid var(--e-ember-25); }
#modal-pricing .pr-verdict-name { font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-2xl); line-height: 1.02; letter-spacing: -0.02em; }
#modal-pricing .pr-verdict-price { font-family: var(--e-display); font-weight: 600; color: var(--e-bone); margin: 8px 0 10px; }
#modal-pricing .pr-verdict-why { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }
#modal-pricing .pr-verdict-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#modal-pricing .pr-verdict-actions .x-btn { min-height: 46px; padding: 0 20px; }
#modal-pricing .pr-quiz-reset { justify-self: start; margin-top: 10px; min-height: 36px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--e-dust); font: 500 var(--e-fs-xs) var(--e-body); text-decoration: underline; text-underline-offset: 3px; }
#modal-pricing .pr-quiz-reset:hover { color: var(--e-ember-hot); }
@media (min-width: 1024px) {
    #modal-pricing .pr-quiz { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px; align-items: start; }
    #modal-pricing .pr-quiz-live { position: sticky; top: calc(var(--pr-top) + 8px); }
}

/* ---------- 6. Premium partnership ------------------------------------------- */
#modal-pricing .pr-plan-premium { position: relative; isolation: isolate; overflow: clip; }
#modal-pricing .pr-premium-aura {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(50% 40% at 85% 22%, rgba(255, 107, 0, 0.12), transparent 70%),
        radial-gradient(40% 30% at 0% 60%, rgba(255, 107, 0, 0.06), transparent 70%);
}
#modal-pricing .pr-prem-grid { display: grid; gap: 14px; }
#modal-pricing .pr-prem-card {
    position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0;
    padding: clamp(20px, 3vw, 34px); border-radius: var(--e-r-lg);
    border: 1px solid var(--e-ember-25);
    background: radial-gradient(90% 60% at 0% 0%, rgba(255, 107, 0, 0.13), transparent 60%), linear-gradient(160deg, #1d150e, var(--e-coal) 70%);
    box-shadow: 0 50px 100px -60px rgba(255, 107, 0, 0.5), inset 0 1px 0 rgba(255, 170, 110, 0.12);
}
#modal-pricing .pr-prem-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
#modal-pricing .pr-prem-amt {
    font: 700 clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem)/1 var(--e-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, #fff4ea 0%, #ffc59a 50%, var(--e-ember-hot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#modal-pricing .pr-prem-price small { font-size: var(--e-fs-md); color: var(--e-smoke); font-weight: 500; }
#modal-pricing .pr-prem-sub { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; max-width: 54ch; }

/* priority lane: three response races; Premium arrives first */
#modal-pricing .pr-lane { display: grid; gap: 9px; padding: 14px 16px 16px; border-radius: var(--e-r-md); background: rgba(0, 0, 0, 0.42); border: 1px solid var(--e-line); }
#modal-pricing .pr-lane-title { display: flex; justify-content: space-between; gap: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-dust); }
#modal-pricing .pr-lane-title span { font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
#modal-pricing .pr-lane-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 68px; align-items: center; gap: 12px; }
#modal-pricing .pr-lane-name { font-size: var(--e-fs-xs); font-weight: 600; color: var(--e-smoke); }
#modal-pricing .pr-lane-track { position: relative; height: 8px; border-radius: 4px; background: rgba(244, 239, 231, 0.07); }
#modal-pricing .pr-lane-fill { position: absolute; inset: 0; border-radius: 4px; background: rgba(244, 239, 231, 0.24); transform-origin: 0 50%; }
#modal-pricing .pr-lane-run { position: absolute; inset: 0; pointer-events: none; }
#modal-pricing .pr-lane-run b { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--e-bone); box-shadow: 0 0 0 3px rgba(244, 239, 231, 0.12); }
#modal-pricing .pr-lane-time { font-size: var(--e-fs-xs); font-weight: 600; color: var(--e-bone); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#modal-pricing .pr-lane-row.is-top .pr-lane-name, #modal-pricing .pr-lane-row.is-top .pr-lane-time { color: var(--e-ember-hot); }
#modal-pricing .pr-lane-row.is-top .pr-lane-fill { background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) 70%, var(--e-ember-hot)); box-shadow: 0 0 14px rgba(255, 107, 0, 0.45); }
#modal-pricing .pr-lane-row.is-top .pr-lane-run b { background: #fff1e4; box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.3), 0 0 18px 4px rgba(255, 107, 0, 0.6); }
#modal-pricing .pr-lane.is-live .pr-lane-fill { animation: pr-lane-fill-1 5.6s var(--e-ease-std) infinite; }
#modal-pricing .pr-lane.is-live .pr-lane-run { animation: pr-lane-run-1 5.6s var(--e-ease-std) infinite; }
#modal-pricing .pr-lane.is-live .pr-lane-time { animation: pr-lane-time-1 5.6s linear infinite; }
#modal-pricing .pr-lane.is-live .pr-lane-row:nth-child(3) .pr-lane-fill { animation-name: pr-lane-fill-2; }
#modal-pricing .pr-lane.is-live .pr-lane-row:nth-child(3) .pr-lane-run { animation-name: pr-lane-run-2; }
#modal-pricing .pr-lane.is-live .pr-lane-row:nth-child(3) .pr-lane-time { animation-name: pr-lane-time-2; }
#modal-pricing .pr-lane.is-live .pr-lane-row:nth-child(4) .pr-lane-fill { animation-name: pr-lane-fill-3; }
#modal-pricing .pr-lane.is-live .pr-lane-row:nth-child(4) .pr-lane-run { animation-name: pr-lane-run-3; }
#modal-pricing .pr-lane.is-live .pr-lane-row:nth-child(4) .pr-lane-time { animation-name: pr-lane-time-3; }
@keyframes pr-lane-fill-1 { 0% { transform: scaleX(0); opacity: 1; } 18%, 86% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes pr-lane-run-1 { 0% { transform: translateX(-100%); opacity: 1; } 18%, 86% { transform: none; opacity: 1; } 96% { transform: none; opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes pr-lane-time-1 { 0%, 16% { opacity: 0.35; } 19%, 92% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes pr-lane-fill-2 { 0% { transform: scaleX(0); opacity: 1; } 50%, 86% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes pr-lane-run-2 { 0% { transform: translateX(-100%); opacity: 1; } 50%, 86% { transform: none; opacity: 1; } 96% { transform: none; opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes pr-lane-time-2 { 0%, 48% { opacity: 0.35; } 51%, 92% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes pr-lane-fill-3 { 0% { transform: scaleX(0); opacity: 1; } 78%, 86% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes pr-lane-run-3 { 0% { transform: translateX(-100%); opacity: 1; } 78%, 86% { transform: none; opacity: 1; } 96% { transform: none; opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes pr-lane-time-3 { 0%, 76% { opacity: 0.35; } 79%, 92% { opacity: 1; } 100% { opacity: 0.35; } }

#modal-pricing .pr-checks { display: grid; gap: 9px; }
#modal-pricing .pr-checks li { position: relative; padding-left: 30px; color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.5; }
#modal-pricing .pr-checks li::before { content: ''; position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; border-radius: 50%; background: var(--e-ember-12); border: 1px solid var(--e-ember-45); }
#modal-pricing .pr-checks li::after { content: ''; position: absolute; left: 6px; top: calc(0.1em + 6px); width: 8px; height: 5px; border-left: 2px solid var(--e-ember-hot); border-bottom: 2px solid var(--e-ember-hot); transform: rotate(-45deg); }
#modal-pricing .pr-checks b { color: var(--e-bone); font-weight: 600; }

/* embedded team orbit (fx.js orbit3d) */
#modal-pricing .pr-team {
    position: relative; isolation: isolate; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px;
    padding: clamp(18px, 2.6vw, 28px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: radial-gradient(60% 55% at 50% 55%, rgba(255, 107, 0, 0.12), transparent 70%), linear-gradient(180deg, #0f0c0a, #070605);
}
#modal-pricing .pr-team-cap { display: grid; gap: 2px; }
#modal-pricing .pr-team-cap b { font-family: var(--e-display); font-size: var(--e-fs-lg); }
#modal-pricing .pr-team-cap span { color: var(--e-smoke); font-size: var(--e-fs-sm); }
#modal-pricing .pr-orbit { height: clamp(280px, 25vw, 360px); }
#modal-pricing .pr-orbit .fx-orbit-core { width: clamp(84px, 22%, 136px); }
#modal-pricing .pr-orbit .fx-chip-zoho::before { content: none; }
#modal-pricing .pr-prem-side { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1024px) {
    #modal-pricing .pr-prem-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
    #modal-pricing .pr-prem-side { grid-template-rows: minmax(0, 1fr) auto; }
    #modal-pricing .pr-orbit { height: auto; min-height: 250px; align-self: stretch; }
}

/* remote IT grid: status lights come on one after another while the grid is on screen */
#modal-pricing .pr-it { padding: clamp(18px, 2.6vw, 28px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--e-coal); }
#modal-pricing .pr-it-head { display: grid; gap: 2px; margin-bottom: 14px; }
#modal-pricing .pr-it-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--e-fs-lg); }
#modal-pricing .pr-it-badge { font: 700 0.68rem var(--e-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: rgba(61, 220, 132, 0.12); border: 1px solid rgba(61, 220, 132, 0.35); color: var(--pr-green); }
#modal-pricing .pr-it-head p { color: var(--e-smoke); font-size: var(--e-fs-sm); max-width: 52ch; }
#modal-pricing .pr-it-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#modal-pricing .pr-it-grid li {
    position: relative; isolation: isolate; display: grid; gap: 6px; align-content: start; min-width: 0;
    padding: 14px 14px 14px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
}
#modal-pricing .pr-it-grid li::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--e-ember-45); opacity: 0; pointer-events: none; }
#modal-pricing .pr-it-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--e-ember-12); border: 1px solid var(--e-ember-25); color: var(--e-ember-hot); }
#modal-pricing .pr-it-ico svg { width: 18px; height: 18px; }
#modal-pricing .pr-it-grid b { font-size: var(--e-fs-sm); font-weight: 600; line-height: 1.3; padding-right: 10px; }
#modal-pricing .pr-it-grid small { font-size: var(--e-fs-xs); color: var(--e-dust); line-height: 1.4; }
#modal-pricing .pr-it-led { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--pr-green); box-shadow: 0 0 10px rgba(61, 220, 132, 0.6); }
#modal-pricing .pr-it.is-live .pr-it-led { animation: pr-led 6s var(--e-ease-std) infinite; animation-delay: calc(var(--i) * 0.28s); }
#modal-pricing .pr-it.is-live .pr-it-grid li::after { animation: pr-led-ring 6s var(--e-ease-std) infinite; animation-delay: calc(var(--i) * 0.28s); }
@keyframes pr-led { 0% { opacity: 0.18; transform: scale(0.7); } 6% { opacity: 1; transform: scale(1.5); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0.18; transform: scale(0.7); } }
@keyframes pr-led-ring { 0% { opacity: 0; } 6% { opacity: 1; } 22%, 100% { opacity: 0; } }
@media (min-width: 560px) {
    #modal-pricing .pr-it-grid li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: center; padding: 10px 14px 10px 12px; }
    #modal-pricing .pr-it-ico { grid-row: 1 / span 2; }
    #modal-pricing .pr-it-grid b { align-self: end; }
    #modal-pricing .pr-it-grid small { align-self: start; }
    #modal-pricing .pr-it-led { top: 10px; right: 10px; width: 6px; height: 6px; }
}
@media (min-width: 700px) and (max-width: 1023px) { #modal-pricing .pr-it-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { #modal-pricing .pr-it-grid small { display: none; } #modal-pricing .pr-it-grid li { padding: 12px; } }

/* ROI: compact openers for the case dialogs (inside the team card) */
#modal-pricing .pr-roi { display: grid; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--e-line); }
#modal-pricing .pr-roi-title { font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-smoke); }
#modal-pricing .pr-roi-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#modal-pricing .pr-roi-card {
    position: relative; display: grid; gap: 2px; align-content: start; text-align: left; min-height: 44px;
    padding: 10px 30px 10px 12px; border-radius: 12px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.4);
    color: var(--e-bone); font-family: inherit; cursor: pointer;
    transition: border-color var(--e-t-std), background var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-pricing .pr-roi-card::after { content: ''; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid var(--e-ember); border-right: 2px solid var(--e-ember); transform: rotate(45deg); transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-pricing .pr-roi-card:hover { border-color: var(--e-ember-45); background: var(--e-char); transform: translateY(-2px); }
#modal-pricing .pr-roi-card:hover::after { transform: translateX(3px) rotate(45deg); }
#modal-pricing .pr-roi-card b { font-size: var(--e-fs-sm); font-weight: 600; }
#modal-pricing .pr-roi-card small { font-size: var(--e-fs-xs); color: var(--e-dust); line-height: 1.35; }


/* ---------- 7. Monthly retainer ---------------------------------------------- */
#modal-pricing .pr-ret-grid { display: grid; gap: 14px; }
#modal-pricing .pr-ret-card {
    display: grid; gap: 18px; align-content: start; justify-items: start; min-width: 0;
    padding: clamp(20px, 3vw, 32px); border-radius: var(--e-r-lg); border: 1px solid var(--e-ember-25);
    background: radial-gradient(90% 70% at 100% 0%, rgba(255, 107, 0, 0.10), transparent 60%), linear-gradient(160deg, var(--e-char), var(--e-coal));
}
#modal-pricing .pr-tiers { margin: 0; padding: 0; border: 0; min-width: 0; width: 100%; }
#modal-pricing .pr-tiers legend { padding: 0; margin-bottom: 8px; font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-smoke); }
#modal-pricing .pr-tiers-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 18px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line); }
#modal-pricing .pr-tiers label { position: relative; display: grid; cursor: pointer; }
#modal-pricing .pr-tiers input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
#modal-pricing .pr-tiers label > span {
    display: grid; place-items: center; align-content: center; gap: 2px; min-height: 62px; padding: 6px 4px; border-radius: 13px; text-align: center;
    transition: background var(--e-t-std), box-shadow var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-pricing .pr-tiers label b { font: 700 clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem)/1.1 var(--e-display); color: var(--e-smoke); transition: color var(--e-t-std); }
#modal-pricing .pr-tiers label small { font-size: 0.72rem; color: var(--e-dust); font-variant-numeric: tabular-nums; transition: color var(--e-t-std); }
#modal-pricing .pr-tiers label:hover b { color: var(--e-bone); }
#modal-pricing .pr-tiers input:checked + span { background: var(--e-char); box-shadow: inset 0 0 0 1px var(--e-ember), 0 10px 24px -12px rgba(255, 107, 0, 0.7); }
#modal-pricing .pr-tiers input:checked + span b { color: var(--e-bone); }
#modal-pricing .pr-tiers input:checked + span small { color: var(--e-ember-hot); }
#modal-pricing .pr-tiers input:focus-visible + span { outline: 2px solid var(--e-ember-hot); outline-offset: 2px; }
#modal-pricing .pr-ret-out { display: grid; gap: 4px; }
#modal-pricing .pr-ret-price { display: flex; align-items: baseline; gap: 6px; }
#modal-pricing .pr-ret-price b { display: inline-block; min-width: 4.8ch; font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.1rem)/1 var(--e-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#modal-pricing .pr-ret-price small { color: var(--e-smoke); font-size: var(--e-fs-md); }
#modal-pricing .pr-ret-line { color: var(--e-smoke); font-size: var(--e-fs-sm); }
#modal-pricing .pr-ret-save { font-size: var(--e-fs-xs); color: var(--e-dust); }
#modal-pricing .pr-ret-save span { display: inline-block; margin-right: 4px; padding: 3px 9px; border-radius: var(--e-r-pill); background: rgba(61, 220, 132, 0.1); border: 1px solid rgba(61, 220, 132, 0.3); color: var(--pr-green); font-weight: 600; font-variant-numeric: tabular-nums; }
#modal-pricing .pr-ret-facts { display: grid; gap: 8px; }
#modal-pricing .pr-ret-facts li { position: relative; padding-left: 26px; font-size: var(--e-fs-sm); color: var(--e-bone); }
#modal-pricing .pr-ret-facts li::before { content: ''; position: absolute; left: 3px; top: 0.45em; width: 10px; height: 6px; border-left: 2px solid var(--e-ember); border-bottom: 2px solid var(--e-ember); transform: rotate(-45deg); }
#modal-pricing .pr-ret-card .x-btn { min-height: 50px; }

/* hours bank */
#modal-pricing .pr-bank {
    position: relative; isolation: isolate; min-width: 0; display: grid; gap: 16px; align-content: start;
    padding: clamp(18px, 2.8vw, 30px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: radial-gradient(60% 60% at 80% 60%, rgba(255, 107, 0, 0.09), transparent 70%), linear-gradient(180deg, #0f0c0a, #070605);
}
#modal-pricing .pr-bank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#modal-pricing .pr-bank-head > p:first-child { display: grid; gap: 2px; }
#modal-pricing .pr-bank-head b { font-family: var(--e-display); font-size: var(--e-fs-lg); }
#modal-pricing .pr-bank-head span { color: var(--e-dust); font-size: var(--e-fs-xs); }
#modal-pricing .pr-bank-stat { display: flex; align-items: baseline; gap: 6px; }
#modal-pricing .pr-bank-stat span { font-size: var(--e-fs-xs); color: var(--e-dust); }
#modal-pricing .pr-bank-stat b { display: inline-block; min-width: 3ch; text-align: right; font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--e-display); color: var(--e-ember-hot); font-variant-numeric: tabular-nums; }
#modal-pricing .pr-bank-stat em { font-style: normal; font-size: var(--e-fs-xs); color: var(--e-smoke); }
#modal-pricing .pr-bank-stage { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(96px, 128px); gap: 12px; height: clamp(200px, 17vw, 232px); }
#modal-pricing .pr-bank-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; min-width: 0; }
#modal-pricing .pr-bank-col, #modal-pricing .pr-bank-vault { display: grid; grid-template-rows: 20px minmax(0, 1fr) 18px; justify-items: center; gap: 4px; min-width: 0; }
#modal-pricing .pr-bank-tok { grid-row: 1; font: 700 0.72rem/20px var(--e-display); color: var(--e-ember-hot); opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--e-ease-out), transform 500ms var(--e-ease-out); font-variant-numeric: tabular-nums; }
#modal-pricing .pr-bank-col.is-tok .pr-bank-tok { opacity: 1; transform: translateY(-2px); }
#modal-pricing .pr-bank-cells { grid-row: 2; display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; max-width: 38px; height: 100%; }
#modal-pricing .pr-bank-cells i { position: relative; flex: 1 1 0; min-height: 0; border-radius: 3px; border: 1px solid rgba(244, 239, 231, 0.09); background: rgba(244, 239, 231, 0.02); overflow: hidden; }
#modal-pricing .pr-bank-cells i::before { content: ''; position: absolute; inset: 0; transform: scaleY(0); transform-origin: 50% 100%; opacity: 0; transition: transform 320ms var(--e-ease-out), opacity 240ms; transition-delay: calc(var(--c) * 28ms); }
#modal-pricing .pr-bank-cells i.is-used::before { background: rgba(244, 239, 231, 0.42); }
#modal-pricing .pr-bank-cells i.is-kept::before { background: linear-gradient(180deg, var(--e-ember-hot), var(--e-ember)); box-shadow: 0 0 10px rgba(255, 107, 0, 0.5); }
#modal-pricing .pr-bank-col.is-on .pr-bank-cells i::before { transform: none; opacity: 1; }
/* rolled: the kept hours slide out towards the bank, their slot keeps an ember outline */
#modal-pricing .pr-bank-col.is-rolled .pr-bank-cells i.is-kept { border-color: rgba(255, 107, 0, 0.4); border-style: dashed; }
#modal-pricing .pr-bank-col.is-rolled .pr-bank-cells i.is-kept::before { transform: translateX(140%); opacity: 0; transition: transform 520ms var(--e-ease-in), opacity 420ms; transition-delay: calc(var(--c) * 18ms); }
#modal-pricing .pr-bank-mo { grid-row: 3; font-size: 0.68rem; color: var(--e-dust); line-height: 18px; }
#modal-pricing .pr-bank-vault::before { content: ''; grid-row: 2; grid-column: 1; width: 100%; height: 100%; border-radius: 10px; border: 1px solid var(--e-ember-45); background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 18px rgba(255, 107, 0, 0.12); }
#modal-pricing .pr-bank-vault-fill {
    grid-row: 2; grid-column: 1; align-self: stretch; width: calc(100% - 8px); height: calc(100% - 8px); margin: 4px; border-radius: 7px;
    background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0, 0, 0, 0.28) 7px 8px), linear-gradient(0deg, var(--e-ember-deep), var(--e-ember) 55%, var(--e-ember-hot));
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.45);
    transform: scaleY(0); transform-origin: 50% 100%; transition: transform 620ms var(--e-ease-out);
}
#modal-pricing .pr-bank.is-spent .pr-bank-vault-fill { transition-duration: 760ms; transition-timing-function: var(--e-ease-in); }
#modal-pricing .pr-bank-vault-label { grid-row: 3; grid-column: 1; font-size: 0.68rem; font-weight: 700; color: var(--e-ember-hot); line-height: 18px; }
#modal-pricing .pr-bank-big {
    align-self: center; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 10px; border-radius: var(--e-r-md);
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.45);
    opacity: 0.38; transform: scale(0.94);
    transition: opacity 420ms var(--e-ease-out), transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 420ms, box-shadow 620ms;
}
#modal-pricing .pr-bank-big.is-on { opacity: 1; transform: none; border-color: var(--e-ember); box-shadow: 0 24px 50px -24px rgba(255, 107, 0, 0.8), inset 0 1px 0 rgba(255, 170, 110, 0.2); background: linear-gradient(170deg, #2a1a0c, #120d09); }
#modal-pricing .pr-bank-big-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--e-ember); color: #100800; }
#modal-pricing .pr-bank-big-ico svg { width: 18px; height: 18px; }
#modal-pricing .pr-bank-big b { display: inline-block; min-width: 3ch; font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1 var(--e-display); color: var(--e-bone); font-variant-numeric: tabular-nums; }
#modal-pricing .pr-bank-big small { font-size: 0.7rem; color: var(--e-smoke); line-height: 1.3; }
#modal-pricing .pr-bank-foot { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.5; min-height: 3em; }
@media (max-width: 480px) {
    #modal-pricing .pr-bank-stage { grid-template-columns: minmax(0, 1fr) 34px 86px; gap: 8px; height: 190px; }
    #modal-pricing .pr-bank-months { gap: 4px; }
    #modal-pricing .pr-bank-big { padding: 12px 6px; }
    #modal-pricing .pr-bank-head b { font-size: var(--e-fs-md); }
}
@media (min-width: 1024px) {
    #modal-pricing .pr-ret-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
    #modal-pricing .pr-bank { align-content: space-between; }
}

/* ---------- 8. Project-based ------------------------------------------------- */
#modal-pricing .pr-proj {
    display: grid; gap: 22px; padding: clamp(20px, 3vw, 36px); border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line); background: radial-gradient(70% 90% at 0% 100%, rgba(255, 107, 0, 0.07), transparent 60%), linear-gradient(160deg, #15110d, var(--e-coal));
}
#modal-pricing .pr-proj-main { display: grid; gap: 12px; align-content: start; }
#modal-pricing .pr-proj-main .x-mark { margin-bottom: 0; }
#modal-pricing .pr-proj-copy { color: var(--e-smoke); max-width: 50ch; }
#modal-pricing .pr-proj-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; }
#modal-pricing .pr-proj-rate b { font: 700 clamp(2rem, 1.5rem + 1.8vw, 2.8rem)/1 var(--e-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#modal-pricing .pr-proj-rate small { color: var(--e-smoke); font-size: var(--e-fs-md); }
#modal-pricing .pr-proj-rate span { font-size: var(--e-fs-xs); color: var(--e-dust); padding: 3px 9px; border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); }
#modal-pricing .pr-proj-side { display: grid; gap: 14px; align-content: start; }
#modal-pricing .pr-proj-label { font-size: var(--e-fs-sm); font-weight: 600; color: var(--e-smoke); }
#modal-pricing .pr-proj-factors { display: flex; flex-wrap: wrap; gap: 8px; }
#modal-pricing .pr-proj-factors li { padding: 7px 13px; border-radius: var(--e-r-pill); border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.35); font-size: var(--e-fs-xs); font-weight: 500; color: var(--e-bone); }
#modal-pricing .pr-proj-note { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--e-r-md); background: var(--e-ember-12); border: 1px solid var(--e-ember-25); color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.5; }
#modal-pricing .pr-proj-note svg { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--e-ember); color: #100800; }
#modal-pricing .pr-proj-note b { color: var(--e-bone); font-weight: 600; }
#modal-pricing .pr-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--e-fs-sm); font-weight: 600; text-decoration: none; color: var(--e-bone); }
#modal-pricing .pr-link svg { width: 16px; height: 16px; color: var(--e-ember); transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-pricing .pr-link:hover { color: var(--e-ember-hot); }
#modal-pricing .pr-link:hover svg { transform: translateX(4px); }
@media (min-width: 1024px) { #modal-pricing .pr-proj { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; } }

/* ---------- 9. Comparison ------------------------------------------------------ */
#modal-pricing .pr-cmp-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line); }
#modal-pricing .pr-cmp-pick button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--e-smoke); font: 600 var(--e-fs-xs) var(--e-body); cursor: pointer; transition: background var(--e-t-std), color var(--e-t-std), box-shadow var(--e-t-std); }
#modal-pricing .pr-cmp-pick button[aria-pressed="true"] { background: var(--e-char); color: var(--e-bone); box-shadow: inset 0 0 0 1px var(--e-ember-45); }
#modal-pricing .pr-cmp-pick button:focus-visible { outline: 2px solid var(--e-ember-hot); outline-offset: 1px; }
#modal-pricing .pr-cmp-wrap { position: relative; isolation: isolate; border-radius: var(--e-r-lg); border: 1px solid var(--e-line); background: var(--e-coal); overflow: hidden; }
#modal-pricing .pr-cmp-lens {
    position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 107, 0, 0.16), rgba(255, 107, 0, 0.05) 45%, rgba(255, 107, 0, 0.02));
    box-shadow: inset 0 3px 0 var(--e-ember), inset 1px 0 0 var(--e-ember-25), inset -1px 0 0 var(--e-ember-25);
    opacity: 0; transition: transform 520ms var(--e-ease-out), opacity var(--e-t-std);
}
#modal-pricing .pr-cmp.is-lens .pr-cmp-lens { opacity: 1; }
#modal-pricing .pr-cmp-table { position: relative; z-index: 1; width: 100%; border-collapse: collapse; table-layout: fixed; }
#modal-pricing .pr-cmp-table th, #modal-pricing .pr-cmp-table td { padding: 12px 18px; text-align: left; vertical-align: top; font-size: var(--e-fs-sm); line-height: 1.45; }
#modal-pricing .pr-cmp-table thead th { padding: 18px 18px 14px; font: 700 clamp(1rem, 0.95rem + 0.3vw, 1.15rem)/1.2 var(--e-display); color: var(--e-smoke); transition: color var(--e-t-std); }
#modal-pricing .pr-cmp-tag { display: block; margin-bottom: 4px; font: 700 0.72rem var(--e-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-dust); transition: color var(--e-t-std); }
#modal-pricing .pr-cmp-table tbody th { width: 18%; font-weight: 600; color: var(--e-smoke); }
#modal-pricing .pr-cmp-corner { width: 18%; }
#modal-pricing .pr-cmp-table tbody td { color: var(--e-smoke); transition: color var(--e-t-std); }
#modal-pricing .pr-cmp-table tbody tr > * { border-top: 1px solid var(--e-line); }
#modal-pricing .pr-cmp-table b { color: var(--e-bone); font-weight: 600; }
#modal-pricing .pr-cmp[data-hl="vip"] [data-col="vip"], #modal-pricing .pr-cmp[data-hl="retainer"] [data-col="retainer"], #modal-pricing .pr-cmp[data-hl="project"] [data-col="project"] { color: var(--e-bone); }
#modal-pricing .pr-cmp[data-hl="vip"] thead [data-col="vip"] .pr-cmp-tag, #modal-pricing .pr-cmp[data-hl="retainer"] thead [data-col="retainer"] .pr-cmp-tag, #modal-pricing .pr-cmp[data-hl="project"] thead [data-col="project"] .pr-cmp-tag { color: var(--e-ember-hot); }
#modal-pricing .pr-yes, #modal-pricing .pr-no { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: var(--e-r-pill); font-size: var(--e-fs-xs); font-weight: 600; }
#modal-pricing .pr-yes { background: rgba(61, 220, 132, 0.1); border: 1px solid rgba(61, 220, 132, 0.3); color: var(--pr-green); }
#modal-pricing .pr-no { border: 1px solid var(--e-line); color: var(--e-dust); }
#modal-pricing .pr-cmp-cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 var(--e-fs-sm) var(--e-body); color: var(--e-ember-hot); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--e-ember-45); text-align: left; }
#modal-pricing .pr-cmp-cta:hover { color: var(--e-bone); text-decoration-color: var(--e-ember); }
@media (min-width: 700px) { #modal-pricing .pr-cmp-pick { display: none; } }
@media (max-width: 699px) {
    #modal-pricing .pr-cmp-lens { display: none; }
    #modal-pricing .pr-cmp[data-show="vip"] [data-col]:not([data-col="vip"]),
    #modal-pricing .pr-cmp[data-show="retainer"] [data-col]:not([data-col="retainer"]),
    #modal-pricing .pr-cmp[data-show="project"] [data-col]:not([data-col="project"]) { display: none; }
    #modal-pricing .pr-cmp-table thead { display: none; }
    #modal-pricing .pr-cmp-table tbody th { width: 36%; }
    #modal-pricing .pr-cmp-table th, #modal-pricing .pr-cmp-table td { padding: 12px 14px; font-size: var(--e-fs-xs); }
    #modal-pricing .pr-cmp-table tbody tr:first-child > * { border-top: 0; }
    #modal-pricing .pr-cmp-table tbody td { color: var(--e-bone); }
    #modal-pricing .pr-cmp-cta { font-size: var(--e-fs-xs); }
}

/* ---------- 10. FAQ (keeps .faq-split-item / .faq-answer-panel for the schema build) */
#modal-pricing .pr-faq-list { display: grid; gap: 0 40px; }
#modal-pricing .pr-faq-col { border-top: 1px solid var(--e-line); min-width: 0; }
#modal-pricing .pr-faq-col + .pr-faq-col { border-top: 0; }
@media (min-width: 900px) {
    #modal-pricing .pr-faq-list { grid-template-columns: 1fr 1fr; align-items: start; }
    #modal-pricing .pr-faq-col + .pr-faq-col { border-top: 1px solid var(--e-line); }
}
#modal-pricing .faq-split-item, #modal-pricing .faq-split-item:hover, #modal-pricing .faq-split-item.active {
    display: block; gap: 0; padding: 0; margin: 0; cursor: default;
    background: none; border: 0; border-bottom: 1px solid var(--e-line); border-radius: 0; box-shadow: none; transform: none; transition: none;
}
#modal-pricing .pr-faq-h { margin: 0; font-size: inherit; line-height: inherit; }
#modal-pricing .pr-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    min-height: 58px; padding: 14px 0; background: none; border: 0; color: var(--e-bone); text-align: left; cursor: pointer;
    font: 600 var(--e-fs-md)/1.4 var(--e-body); transition: color var(--e-t-quick);
}
#modal-pricing .pr-faq-q:hover { color: var(--e-ember-hot); }
#modal-pricing .faq-question-text { flex: 1; color: inherit; font: inherit; line-height: inherit; max-width: none; width: auto; }
#modal-pricing .pr-faq-icon {
    position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--e-line-strong); color: var(--e-bone);
    transition: background var(--e-t-std), border-color var(--e-t-std), color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
#modal-pricing .pr-faq-icon::before, #modal-pricing .pr-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--e-t-std) var(--e-ease-out); }
#modal-pricing .pr-faq-icon::before { width: 12px; height: 2px; }
#modal-pricing .pr-faq-icon::after { width: 2px; height: 12px; }
#modal-pricing .pr-faq-q[aria-expanded="true"] .pr-faq-icon { background: var(--e-ember); border-color: var(--e-ember); color: #100800; transform: rotate(180deg); }
#modal-pricing .pr-faq-q[aria-expanded="true"] .pr-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
#modal-pricing .faq-answer-panel, #modal-pricing .faq-answer-panel.active {
    position: static; top: auto; left: auto; right: auto; opacity: 1; visibility: visible; transform: none;
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--e-t-std) var(--e-ease-out);
}
#modal-pricing .faq-answer-panel.is-open { grid-template-rows: 1fr; }
#modal-pricing .faq-answer-panel[hidden] { display: none; }
#modal-pricing .faq-answer-inner { min-height: 0; overflow: hidden; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
#modal-pricing .faq-answer-inner p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.65; padding: 0 44px 20px 0; max-width: 68ch; opacity: 0; transform: translateY(-6px); transition: opacity var(--e-t-std) var(--e-ease-out), transform var(--e-t-std) var(--e-ease-out); }
#modal-pricing .faq-answer-panel.is-open .faq-answer-inner p { opacity: 1; transform: none; }
@media (max-width: 559px) { #modal-pricing .faq-answer-inner p { padding-right: 0; } #modal-pricing .pr-faq-q { font-size: var(--e-fs-sm); min-height: 56px; } }

/* ---------- 11. CTA ------------------------------------------------------------- */
#modal-pricing .x-cta { padding: clamp(26px, 3.2vw, 46px) clamp(22px, 4vw, 56px); }
#modal-pricing .pr-cta-section { padding-bottom: clamp(48px, 5vw, 72px); }

/* ---------- 12. Phones: a shorter page ---------------------------------------- */
@media (max-width: 699px) {
    #modal-pricing .pr-hide-sm { display: none; }
    #modal-pricing .x-section { padding-block: 32px; }
    #modal-pricing .x-head { margin-bottom: 16px; }
    #modal-pricing .pr-hero-actions .x-btn, #modal-pricing .pr-card-actions .x-btn { min-height: 48px; padding: 0 18px; font-size: var(--e-fs-sm); }
    #modal-pricing .pr-path-more, #modal-pricing .pr-path-kicker { display: none; }
    #modal-pricing .pr-path h3 { grid-row: 1 / span 2; }
    #modal-pricing .pr-it-head p { display: none; }
    #modal-pricing .pr-it-grid li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px; }
    #modal-pricing .pr-it-ico { width: 30px; height: 30px; border-radius: 9px; }
    #modal-pricing .pr-it-ico svg { width: 16px; height: 16px; }
    #modal-pricing .pr-it-grid b { font-size: var(--e-fs-xs); padding-right: 8px; }
    #modal-pricing .pr-it-led { top: 8px; right: 8px; width: 6px; height: 6px; }
    #modal-pricing .pr-roi-card { padding: 10px 26px 10px 12px; }
    #modal-pricing .pr-roi-card small { display: none; }
    #modal-pricing .pr-roi-card::after { right: 12px; }
    #modal-pricing .pr-orbit { height: 250px; }
    #modal-pricing .pr-proj-factors li { padding: 6px 11px; }
    #modal-pricing .pr-proj-rate b { font-size: 2rem; }
    #modal-pricing .pr-hero-actions { flex-wrap: nowrap; gap: 8px; }
    #modal-pricing .pr-card-actions { gap: 8px; }
    #modal-pricing .pr-hero-actions .x-btn { flex: 0 1 auto; white-space: nowrap; }
    #modal-pricing .pr-hero-actions .x-btn .x-btn-arrow { display: none; }
    #modal-pricing .x-cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    #modal-pricing .x-cta-actions .x-btn { min-height: 50px; padding: 0 18px; font-size: var(--e-fs-sm); }
    #modal-pricing .x-cta-actions .x-cta-contact { flex: 1 1 100%; }
    #modal-pricing .pr-proof .is-term { grid-column: 1 / -1; }
}
#modal-pricing .pr-hero-top > * { min-width: 0; }
@media (max-width: 359px) {
    #modal-pricing .pr-hero-actions { flex-wrap: wrap; }
    #modal-pricing .pr-proof li { white-space: normal; }
}
@media (max-width: 380px) {
    #modal-pricing .pr-hero-actions .x-btn, #modal-pricing .pr-card-actions .x-btn { padding: 0 14px; }
}

/* ---------- 13. Motion and input preferences ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #modal-pricing .pr-door.is-premium::before { animation: none; }
    #modal-pricing .pr-path.is-rec { transform: none; }
    #modal-pricing .pr-quiz-q, #modal-pricing .pr-quiz-q.is-active, #modal-pricing .pr-verdict-wait, #modal-pricing .pr-verdict-result,
    #modal-pricing .pr-verdict.is-resolved .pr-verdict-result, #modal-pricing .pr-verdict-result > *,
    #modal-pricing .pr-quiz-progress i, #modal-pricing .pr-live-track i, #modal-pricing .pr-tabs::before, #modal-pricing .pr-dual-track i,
    #modal-pricing .pr-path, #modal-pricing .pr-path-badge, #modal-pricing .pr-switch-ui i, #modal-pricing .pr-seg label span,
    #modal-pricing .faq-answer-panel, #modal-pricing .faq-answer-inner p, #modal-pricing .pr-door, #modal-pricing .pr-door-glow,
    #modal-pricing .pr-roi-card, #modal-pricing .pr-opt, #modal-pricing .pr-opt-check, #modal-pricing .pr-opt-ico,
    #modal-pricing .pr-bank-cells i::before, #modal-pricing .pr-bank-vault-fill, #modal-pricing .pr-bank-big, #modal-pricing .pr-bank-tok,
    #modal-pricing .pr-cmp-lens, #modal-pricing .pr-tiers label > span { transition: none; }
    #modal-pricing .pr-quiz-q, #modal-pricing .pr-quiz-q.is-past { transform: none; }
    #modal-pricing .pr-est.is-changed .pr-est-why::after, #modal-pricing .pr-est.is-changed .pr-est-why-ico, #modal-pricing .pr-tabpanel.is-in-tab { animation: none; }
}
@media (hover: none) {
    #modal-pricing .pr-roi-card:hover, #modal-pricing .pr-opt:hover .pr-opt-ico { transform: none; }
    #modal-pricing .pr-door:hover .pr-door-glow { opacity: 0.35; transform: scale(0.9); }
    #modal-pricing .pr-door.is-premium:hover .pr-door-glow { opacity: 0.7; }
    #modal-pricing .pr-opt:hover:not([aria-checked="true"]) { background: rgba(0, 0, 0, 0.4); border-color: var(--e-line); }
}


/* ===== showcase-api.css ===== */
/* ==========================================================================
   Showcases (src/js/pages/showcase-api.js)
   .ax  "API integrations, live": fabric of systems + packets, typed console,
        safeguard badges, event stream (+ delivery log and stats on the page variant)
   .dx  "Data, analytics and dashboards": sources -> pipeline -> live dashboard
   Home: #section-api, right after "Any stack". Service pages:
   .xa-show bands right under the hero of #modal-api and #modal-analytics.
   Every box the script fills has a fixed height here, so nothing shifts while it
   builds or plays. Motion is transform and opacity; loops only run while the
   showcase is on screen (.is-live) and none at all with reduced motion.
   ========================================================================== */
.ax, .dx {
    --sx-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace;
    --sx-ok: #34d399;
    --sx-warn: #fbbf24;
    font-family: var(--e-body);
    color: var(--e-bone);
    line-height: 1.5;
}
.ax p, .dx p { margin: 0; }
.ax button, .dx button { font-family: var(--e-body); -webkit-tap-highlight-color: transparent; }

/* the "Sample data" tag */
.sx-sample {
    display: inline-flex; align-items: center; flex: none;
    padding: 4px 9px; border-radius: 999px;
    border: 1px dashed rgba(244, 239, 231, 0.24);
    color: var(--e-dust);
    font: 600 0.62rem/1 var(--e-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}

/* wires and packets (shared by both showcases) */
/* its own layer: moving packets repaint only the wires, never the cards around them */
.sx-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; will-change: transform; }
.sx-wire { fill: none; stroke: rgba(244, 239, 231, 0.14); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.sx-wire-hot { fill: none; stroke: rgba(255, 122, 26, 0.5); stroke-width: 1.5; opacity: 0; transition: opacity 0.5s var(--e-ease-std); }
.sx-wire-hot.is-on { opacity: 1; }
.sx-pk-halo { fill: rgba(255, 107, 0, 0.2); }
.sx-pk-core { fill: #ffe6d2; stroke: var(--e-ember); stroke-width: 1.6; }
.sx-pk-t { fill: var(--e-ember-hot); }
.sx-pk-t:nth-child(1) { opacity: 0.6; }
.sx-pk-t:nth-child(2) { opacity: 0.4; }
.sx-pk-t:nth-child(3) { opacity: 0.24; }
.sx-pk-t:nth-child(4) { opacity: 0.12; }
.sx-pk.is-warn .sx-pk-halo { fill: rgba(251, 191, 36, 0.22); }
.sx-pk.is-warn .sx-pk-core { fill: #fff3c4; stroke: #f59e0b; }
.sx-pk.is-warn .sx-pk-t { fill: var(--sx-warn); }
.sx-pk.is-amb { opacity: 0.5; }
.sx-pk.is-amb .sx-pk-halo, .sx-pk.is-amb .sx-pk-t:nth-child(n+3) { display: none; }
.sx-pk.is-amb .sx-pk-core { r: 2.1px; stroke-width: 0; fill: var(--e-ember-hot); }

/* =========================================================================
   1. API integrations, live
   ========================================================================= */
.ax {
    position: relative; isolation: isolate;
    display: grid; gap: 12px;
    padding: clamp(10px, 1.4vw, 18px);
    border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line-strong);
    background:
        radial-gradient(70% 55% at 32% 0%, rgba(255, 107, 0, 0.08), transparent 62%),
        linear-gradient(180deg, #120e0b, #090705);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(244, 239, 231, 0.05);
}

/* scenario picker */
.ax-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ax-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ax-tab, .ax-replay {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px; padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--e-line-strong);
    background: rgba(0, 0, 0, 0.4);
    color: var(--e-smoke);
    font: 600 var(--e-fs-xs)/1 var(--e-body);
    white-space: nowrap; cursor: pointer;
    transition: color var(--e-t-quick), background var(--e-t-std), border-color var(--e-t-quick), transform var(--e-t-quick);
}
.ax-tab:hover, .ax-replay:hover { color: var(--e-bone); border-color: rgba(244, 239, 231, 0.32); }
.ax-tab:active, .ax-replay:active { transform: scale(0.97); }
.ax-tab[aria-pressed="true"] {
    color: #fff6ee; border-color: transparent;
    background: linear-gradient(180deg, #ff7d1f, #d45200);
    box-shadow: 0 8px 22px -10px var(--e-ember-45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ax-replay { flex: none; }
.ax-replay svg { width: 15px; height: 15px; }

.ax-main { display: grid; gap: 12px; }

/* the fabric: systems on both sides, the integration layer in the middle */
.ax-fabric {
    position: relative; isolation: isolate; overflow: hidden; contain: layout paint;
    height: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(156px, 196px) minmax(0, 1fr);
    column-gap: clamp(24px, 6%, 64px);
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--e-line);
    background:
        radial-gradient(38% 46% at 50% 44%, rgba(255, 107, 0, 0.12), transparent 70%),
        #0b0907;
}
.ax-fabric::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(75% 80% at 50% 50%, transparent 30%, #0b0907 85%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23f4efe7' fill-opacity='0.09'/%3E%3C/svg%3E") 0 0 / 22px 22px;
}
.ax-col { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-around; }
.ax-col-l { align-items: flex-start; }
.ax-col-r { align-items: flex-end; }
.ax-mid { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; }

.ax-node, .dx-src {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 100%;
    padding: 6px 13px 6px 6px;
    border-radius: 14px;
    border: 1px solid var(--e-line-strong);
    background: rgba(14, 11, 9, 0.94);
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.9);
}
.ax-ic {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: rgba(244, 239, 231, 0.05); border: 1px solid var(--e-line);
    color: var(--e-ember-hot);
}
.ax-ic svg { width: 16px; height: 16px; }
.ax-nt, .dx-src-t { display: grid; min-width: 0; }
.ax-nt b, .dx-src-t b { font: 600 0.8rem/1.2 var(--e-display); letter-spacing: 0.01em; white-space: nowrap; }
.ax-nt small, .dx-src-t small { font-size: 0.66rem; line-height: 1.3; color: var(--e-dust); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ax-node.is-zoho b { color: var(--e-ember-hot); }
.ax-node.is-zoho .ax-ic { background: rgba(255, 107, 0, 0.12); border-color: rgba(255, 107, 0, 0.35); }
/* states: a glow ring (opacity), a check badge (scale), a short bump on arrival */
.ax-node::before, .dx-src::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 1px solid var(--e-ember);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12), 0 0 16px -3px rgba(255, 107, 0, 0.6);
    opacity: 0; transition: opacity 0.4s var(--e-ease-std);
}
.ax-node.is-src::before, .ax-node.is-ok::before { opacity: 1; }
.ax-node.is-wait::before { opacity: 1; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14), 0 0 16px -3px rgba(245, 158, 11, 0.6); }
.ax-st {
    position: absolute; top: -7px; right: -7px;
    width: 19px; height: 19px; border-radius: 50%;
    display: grid; place-items: center;
    background: #10b981; color: #03140c;
    box-shadow: 0 0 0 3px #0b0907;
    opacity: 0; transform: scale(0.3);
    transition: opacity 0.2s, transform 0.4s var(--e-ease-out);
}
.ax-st svg { width: 11px; height: 11px; }
.ax-node.is-ok .ax-st { opacity: 1; transform: none; }

/* the integration layer */
.ax-hub {
    position: relative; width: 100%;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 107, 0, 0.45);
    background: linear-gradient(180deg, rgba(44, 21, 5, 0.96), rgba(17, 11, 7, 0.97));
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.06), 0 24px 50px -20px rgba(255, 107, 0, 0.4);
}
.ax-hub::after {
    content: ''; position: absolute; inset: -22px; z-index: -1; border-radius: 34px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 107, 0, 0.3), transparent);
    opacity: 0.35;
    animation: ax-breathe 2.6s ease-in-out infinite paused;
}
.ax.is-live .ax-hub.is-busy::after { animation-play-state: running; }
.ax-hub-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ax-hub-h > span:last-child { display: grid; min-width: 0; }
.ax-hub-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--e-ember); color: #1a0b01; box-shadow: 0 0 18px rgba(255, 107, 0, 0.55); }
.ax-hub-ic svg { width: 16px; height: 16px; }
.ax-hub-h b { font: 700 0.84rem/1.15 var(--e-display); }
.ax-hub-h small { font-size: 0.64rem; line-height: 1.3; color: var(--e-dust); }
.ax-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ax-steps li {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 5px 6px; border-radius: 8px; text-align: center;
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38);
    color: var(--e-dust); font: 600 0.68rem/1.2 var(--e-body);
    transition: color 0.3s, border-color 0.3s;
}
.ax-steps li::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.42), rgba(255, 107, 0, 0.14));
    opacity: 0; transition: opacity 0.3s;
}
.ax-steps li.is-on { color: #fff; border-color: rgba(255, 107, 0, 0.65); }
.ax-steps li.is-on::before { opacity: 1; }
.ax-steps li.is-done { color: var(--e-bone); border-color: rgba(52, 211, 153, 0.35); }

/* the console */
.ax-con {
    position: relative; overflow: hidden;
    height: 430px;
    display: flex; flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--e-line);
    background: #070504;
}
.ax-con-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.025); }
.ax-dots { display: inline-flex; gap: 6px; }
.ax-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 239, 231, 0.13); }
.ax-dots i:first-child { background: rgba(255, 107, 0, 0.6); }
.ax-con-t { flex: 1; min-width: 0; font: 500 0.72rem/1 var(--sx-mono); color: var(--e-smoke); }
.ax-con-body {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    padding: 12px 14px 0;
    contain: layout paint;
}
.ax-con-body::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #070504, rgba(7, 5, 4, 0)); }
.ax-lines {
    list-style: none; margin: 0; padding: 0;
    font: 400 0.72rem/1.62 var(--sx-mono);
    transition: transform 0.4s var(--e-ease-out);
    will-change: transform;
}
.ax-ln { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--e-smoke); }
.ax-ln.is-new { animation: ax-in 0.35s var(--e-ease-out); }
.ax-ln-req { margin-top: 5px; }
.ax-ln-req:first-child { margin-top: 0; }
.ax-ln-res { margin-bottom: 2px; }
.ax-ln-done { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(52, 211, 153, 0.3); }
.tk-arw { color: var(--e-ember); }
.tk-arw2 { color: var(--e-dust); }
.tk-m { color: var(--e-ember-hot); font-weight: 700; }
.tk-u { color: var(--e-bone); }
.tk-k { color: #9fb6d6; }
.tk-v { color: var(--e-dust); }
.tk-p { color: #6e655c; }
.tk-jk { color: #93c5fd; }
.tk-js { color: #86efac; }
.tk-jn { color: #fcd34d; }
.tk-ok { color: var(--sx-ok); font-weight: 600; }
.tk-warn { color: var(--sx-warn); font-weight: 600; }
.tk-dim { color: var(--e-dust); }
.tk-c { color: var(--e-smoke); }
.tk-tag { display: inline-block; min-width: 7.4ch; padding: 0 4px; border-radius: 4px; background: rgba(255, 107, 0, 0.13); color: var(--e-ember-hot); font-weight: 600; text-align: center; line-height: 1.45; }
.ax-caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 1px; vertical-align: -0.18em; background: var(--e-ember-hot); animation: ax-blink 1s steps(1) infinite paused; }
.ax.is-live .ax-caret { animation-play-state: running; }
.ax-ln-wait { margin-top: 4px; }
.ax-bo { display: inline-block; vertical-align: middle; width: 64px; height: 5px; border-radius: 3px; background: rgba(251, 191, 36, 0.16); overflow: hidden; }
.ax-bo i { display: block; height: 100%; background: var(--sx-warn); transform-origin: 0 50%; transform: scaleX(0); }

/* safeguards */
.ax-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ax-badges li {
    display: flex; align-items: center; gap: 9px;
    min-height: 42px; padding: 7px 12px;
    border-radius: 12px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38);
    color: var(--e-dust); font: 600 var(--e-fs-xs)/1.25 var(--e-body);
    transition: color 0.35s, border-color 0.35s, background-color 0.35s;
}
.ax-badges i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.ax-badges i::after {
    content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
    border: solid #1a0b01; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition: transform 0.35s var(--e-ease-out);
}
.ax-badges li.is-on { color: var(--e-bone); border-color: rgba(255, 107, 0, 0.5); background-color: rgba(255, 107, 0, 0.08); }
.ax-badges li.is-on i { background-color: var(--e-ember); border-color: var(--e-ember); box-shadow: 0 0 12px rgba(255, 107, 0, 0.7); }
.ax-badges li.is-on i::after { transform: rotate(45deg) scale(1); }
.ax-badges li.is-warn { color: #fde68a; border-color: rgba(245, 158, 11, 0.5); background-color: rgba(245, 158, 11, 0.07); }
.ax-badges li.is-warn i { border-color: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }

/* event stream */
.ax-ticker {
    display: flex; align-items: center; gap: 12px;
    height: 44px; padding: 0 4px 0 6px;
    border-radius: 12px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38);
    overflow: hidden;
}
.ax-tk-live {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px;
    border-radius: 9px; border: 1px solid rgba(255, 107, 0, 0.4); background: rgba(255, 107, 0, 0.1);
    font: 600 0.72rem/1 var(--sx-mono); color: var(--e-bone);
}
.ax-tk-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--e-ember); box-shadow: 0 0 10px var(--e-ember); animation: ax-live 1.6s ease-in-out infinite paused; }
.ax.is-live .ax-tk-live i { animation-play-state: running; }
.ax-tk-lbl { font: 700 0.6rem/1 var(--e-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-ember-hot); }
.ax-tk-live b { display: inline-block; }
.ax-tk-win { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.ax-tk-win::before, .ax-tk-win::after { content: ''; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none; }
.ax-tk-win::before { left: 0; background: linear-gradient(90deg, #0b0806, rgba(11, 8, 6, 0)); }
.ax-tk-win::after { right: 0; background: linear-gradient(270deg, #0b0806, rgba(11, 8, 6, 0)); }
.ax-tk-track { display: flex; width: max-content; animation: ax-marquee 56s linear infinite paused; will-change: transform; }
.ax.is-live .ax-tk-track { animation-play-state: running; }
.ax-ev {
    display: inline-flex; align-items: baseline; gap: 7px; margin-right: 8px;
    padding: 6px 10px; border-radius: 8px; border: 1px solid var(--e-line);
    font: 500 0.68rem/1 var(--sx-mono); color: var(--e-smoke); white-space: nowrap;
}
.ax-ev small { font: 500 0.6rem/1 var(--e-body); color: var(--e-dust); }

/* page variant: delivery log and run stats */
.ax-more { display: grid; gap: 12px; }
.ax-log { height: 296px; overflow: hidden; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38); }
.ax-more-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; font: 700 0.84rem/1.2 var(--e-display); }
.ax-log table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.72rem; }
.ax-log th { padding: 7px 8px; text-align: left; font-size: 0.66rem; font-weight: 600; color: var(--e-dust); border-bottom: 1px solid var(--e-line); }
.ax-log th:nth-child(1) { width: 27%; }
.ax-log th:nth-child(3) { width: 64px; }
.ax-log th:nth-child(4) { width: 70px; text-align: right; }
.ax-log td { height: 35px; padding: 0 8px; border-bottom: 1px solid rgba(244, 239, 231, 0.05); color: var(--e-smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-log td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.ax-log td:first-child { color: var(--e-bone); font-weight: 600; }
.ax-log code { font: 500 0.7rem/1 var(--sx-mono); color: var(--e-bone); }
.ax-log tr.is-new { animation: ax-in 0.4s var(--e-ease-out); }
.ax-code { display: inline-block; padding: 3px 7px; border-radius: 6px; background: rgba(52, 211, 153, 0.12); color: var(--sx-ok); font: 700 0.68rem/1 var(--sx-mono); }
.ax-code.is-warn { background: rgba(251, 191, 36, 0.12); color: var(--sx-warn); }
.ax-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ax-stats > div { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38); }
.ax-stats dt { font-size: 0.7rem; line-height: 1.3; color: var(--e-dust); }
.ax-stats dd { margin: 0; font: 700 clamp(1.25rem, 1rem + 0.7vw, 1.6rem)/1 var(--e-display); font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
    .ax-more { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
    .ax-main { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 1099px) {
    .ax-fabric { height: 400px; }
    .ax-con { height: 336px; }
}
@media (max-width: 899px) {
    .ax-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: sources on top, the layer in the middle, destinations below */
@media (max-width: 699px) {
    .ax-bar { flex-wrap: wrap; align-items: flex-start; }
    .ax-tabs { flex: 1 1 0; }
    .ax-tab, .ax-replay { min-height: 40px; padding: 0 13px; }
    .ax-replay span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .ax-replay { width: 40px; padding: 0; justify-content: center; }
    .ax-fabric {
        height: 440px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: 12px 10px;
    }
    /* compact tiles: icon over name, four to a row */
    .ax-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .ax-col-l { grid-row: 1; }
    .ax-col-r { grid-row: 3; }
    .ax-mid { grid-row: 2; flex-direction: row; align-items: center; gap: 22px; padding: 0 4px; }
    .ax-hub { flex: 1 1 auto; min-width: 0; padding: 10px; }
    .ax-mid > .ax-node { flex: none; width: 78px; }
    .ax-node { flex-direction: column; justify-content: center; gap: 5px; height: 66px; padding: 6px 3px; border-radius: 12px; text-align: center; }
    .ax-col .ax-node { width: 100%; }
    .ax-nt b { font-size: 0.64rem; line-height: 1.15; white-space: normal; }
    .ax-nt small { display: none; }
    .ax-ic { width: 26px; height: 26px; border-radius: 8px; }
    .ax-ic svg { width: 14px; height: 14px; }
    .ax-st { top: -6px; right: -5px; width: 17px; height: 17px; }
    .ax-hub-h { margin-bottom: 8px; }
    .ax-con { height: 360px; }
    .ax-lines { font-size: 0.68rem; }
    .ax-con-body { padding: 10px 11px 0; }
    .ax-badges li { padding: 7px 10px; font-size: 0.7rem; }
    .ax-tk-lbl { display: none; }
    .ax-log { height: auto; min-height: 296px; padding: 10px; }
    .ax-log th:nth-child(1) { width: 25%; }
    .ax-log th:nth-child(3) { width: 50px; }
    .ax-log th:nth-child(4) { width: 58px; }
    .ax-log td, .ax-log th { padding-inline: 5px; }
}

/* =========================================================================
   2. Data, analytics and dashboards
   ========================================================================= */
.dx { position: relative; isolation: isolate; display: grid; gap: 38px; }
.dx-flow { position: relative; z-index: 1; display: grid; gap: 44px; align-content: start; min-width: 0; }
.dx-srcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dx-src { padding-right: 14px; }
.dx-src::before { border-color: rgba(255, 107, 0, 0.55); box-shadow: 0 0 22px -6px rgba(255, 107, 0, 0.5); }
.dx.is-live .dx-src::before { animation: dx-src 5s ease-in-out infinite; }
.dx-src:nth-child(2)::before { animation-delay: -1s; }
.dx-src:nth-child(3)::before { animation-delay: -2s; }
.dx-src:nth-child(4)::before { animation-delay: -3s; }
.dx-src:nth-child(5)::before { animation-delay: -4s; }
.dx-pipe {
    justify-self: center; width: min(100%, 660px);
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 107, 0, 0.42);
    background: linear-gradient(180deg, rgba(44, 21, 5, 0.94), rgba(17, 11, 7, 0.97));
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.05), 0 24px 50px -22px rgba(255, 107, 0, 0.4);
}
.dx-pipe-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 700 0.84rem/1.2 var(--e-display); }
.dx-sync { display: inline-flex; align-items: center; gap: 6px; font: 600 0.64rem/1 var(--e-body); color: var(--e-dust); white-space: nowrap; }
.dx-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--sx-ok); box-shadow: 0 0 8px var(--sx-ok); animation: ax-live 1.8s ease-in-out infinite paused; }
.dx.is-live .dx-sync i { animation-play-state: running; }
.dx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dx-steps li {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px 8px; align-items: center;
    padding: 8px 10px 9px; border-radius: 10px;
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.38);
    transition: border-color 0.3s;
}
.dx-steps li.is-on { border-color: rgba(255, 107, 0, 0.6); }
.dx-st-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #4a3f35; color: transparent; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.dx-st-ic svg { width: 11px; height: 11px; }
.dx-steps li.is-on .dx-st-ic { border-color: var(--e-ember); }
.dx-steps li.is-done .dx-st-ic { background-color: #10b981; border-color: #10b981; color: #03140c; }
.dx-st-t { display: grid; min-width: 0; }
.dx-st-t b { font: 600 0.76rem/1.2 var(--e-body); }
.dx-st-t small { min-height: 2.6em; font-size: 0.64rem; line-height: 1.3; color: var(--e-dust); font-variant-numeric: tabular-nums; }
.dx-st-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(244, 239, 231, 0.08); overflow: hidden; }
.dx-st-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember-hot)); transform-origin: 0 50%; transform: scaleX(0); }

/* the dashboard */
.dx.no-tr *, .dx.no-tr *::before { transition: none !important; }
.dx-dash {
    position: relative; z-index: 1; min-width: 0;
    padding: clamp(10px, 1.2vw, 16px);
    border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line-strong);
    background:
        radial-gradient(60% 40% at 80% 0%, rgba(255, 107, 0, 0.06), transparent 70%),
        linear-gradient(180deg, #120e0b, #090705);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(244, 239, 231, 0.05);
}
.dx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 12px; }
.dx-title { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 0.98rem/1.2 var(--e-display); }
.dx-range { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.45); }
.dx-range button, .dx-dp-tabs button {
    min-width: 50px; height: 34px; padding: 0 12px;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--e-smoke); font: 600 0.74rem/1 var(--e-body);
    cursor: pointer; transition: color var(--e-t-quick), background-color var(--e-t-std);
}
.dx-range button:hover, .dx-dp-tabs button:hover { color: var(--e-bone); }
.dx-range button[aria-pressed="true"], .dx-dp-tabs button[aria-pressed="true"] { background: var(--e-ember); color: #1a0b01; }
.dx-drill {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 15px;
    border-radius: 999px; border: 1px solid var(--e-line-strong); background: rgba(0, 0, 0, 0.4);
    color: var(--e-bone); font: 600 0.74rem/1 var(--e-body);
    cursor: pointer; transition: border-color var(--e-t-quick), color var(--e-t-quick), transform var(--e-t-quick);
}
.dx-drill:hover { border-color: rgba(255, 107, 0, 0.6); }
.dx-drill:active { transform: scale(0.97); }
.dx-drill[aria-expanded="true"] { border-color: var(--e-ember); color: var(--e-ember-hot); }
.dx-drill svg { width: 16px; height: 16px; }
.dx-body { position: relative; display: grid; gap: 10px; }

.dx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.dx-kpi { position: relative; height: 88px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.025); }
.dx-kpi dt { font-size: 0.7rem; font-weight: 500; line-height: 1.2; color: var(--e-dust); white-space: nowrap; }
.dx-kv { margin: 7px 0 0; font: 700 clamp(1.1rem, 0.86rem + 0.6vw, 1.45rem)/1 var(--e-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-kd { position: absolute; left: 14px; bottom: 11px; margin: 0; font: 600 0.66rem/1 var(--e-body); color: var(--sx-ok); }
.dx-spark { position: absolute; right: 12px; bottom: 11px; width: 38%; max-width: 110px; height: 24px; overflow: visible; }
.dx-spark-l { fill: none; stroke: var(--e-ember-hot); stroke-width: 1.6; stroke-linecap: round; opacity: 0.9; }

.dx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dx-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 11px 13px 12px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(244, 239, 231, 0.02); }
.dx-card figcaption { font: 600 0.72rem/1.2 var(--e-body); color: var(--e-smoke); }
.dx-plot { position: relative; flex: none; min-width: 0; }
.dx-c-line { grid-column: span 2; }
.dx-c-donut { container-type: inline-size; }
.dx-c-line .dx-plot { height: 184px; }
.dx-c-donut .dx-plot { height: 184px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.dx-c-bars .dx-plot, .dx-c-funnel .dx-plot, .dx-c-heat .dx-plot { height: 150px; }

/* line */
.dx-line { display: block; width: 100%; height: 100%; overflow: visible; }
.dx-grid-g line { stroke: rgba(244, 239, 231, 0.07); stroke-width: 1; }
.dx-grid-g text { fill: var(--e-dust); font: 500 10px var(--e-body); font-variant-numeric: tabular-nums; }
.dx-line-p { fill: none; stroke: var(--e-ember-hot); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dx-clip { transform-origin: 0 0; transform: scaleX(1); transition: transform 1.25s var(--e-ease-out) 0.08s; }
.dx:not(.is-loaded) .dx-clip, .dx.is-redraw .dx-clip { transform: scaleX(0); transition: none; }
.dx-end { transition: opacity 0.3s 1.1s; }
.dx:not(.is-loaded) .dx-end, .dx.is-redraw .dx-end { opacity: 0; transition: none; }
.dx-end-c { fill: #ffe6d2; stroke: var(--e-ember); stroke-width: 2; }
.dx-end-r { fill: rgba(255, 107, 0, 0.3); transform-box: fill-box; transform-origin: center; animation: dx-ping 2.2s ease-out infinite paused; }
.dx.is-live .dx-end-r { animation-play-state: running; }
.dx-hov { opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.dx-hov-x { stroke: rgba(244, 239, 231, 0.3); stroke-dasharray: 3 3; }
.dx-hov-c { fill: var(--e-ember); stroke: #fff6ee; stroke-width: 2; }
.dx-hit { fill: transparent; cursor: crosshair; }

/* donut */
.dx-donut { flex: none; width: 108px; height: 108px; overflow: visible; }
.dx-donut-bg { fill: none; stroke: rgba(244, 239, 231, 0.06); stroke-width: 13; }
.dx-seg {
    fill: none; stroke-width: 13; cursor: pointer;
    transform-origin: 60px 60px;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s var(--e-ease-out) calc(0.3s + var(--i) * 0.12s), stroke-dasharray 0.8s var(--e-ease-out), transform 0.8s var(--e-ease-out), stroke-width 0.2s;
}
.dx:not(.is-loaded) .dx-seg { stroke-dashoffset: var(--len); }
.dx-seg:hover { stroke-width: 16; }
.dx-donut-v { fill: var(--e-bone); font: 700 16px var(--e-display); font-variant-numeric: tabular-nums; }
.dx-donut-l { fill: var(--e-dust); font: 500 9px var(--e-body); }
.dx-legend { list-style: none; margin: 0; padding: 0; flex: none; width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.dx-legend li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--e-smoke); }
.dx-legend i { width: 9px; height: 9px; border-radius: 3px; }
.dx-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-legend b { color: var(--e-bone); font-weight: 600; font-variant-numeric: tabular-nums; }

/* a wide donut card puts the legend beside the ring */
@container (min-width: 250px) {
    .dx-c-donut .dx-plot { flex-direction: row; justify-content: flex-start; gap: 22px; }
    .dx-c-donut .dx-legend { flex: 1; width: auto; grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

/* bars */
.dx-bars { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.dx-bar { height: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; text-align: center; }
.dx-bar-v { font: 600 0.68rem/1 var(--e-body); color: var(--e-bone); font-variant-numeric: tabular-nums; }
.dx-bar-tr { position: relative; border-radius: 6px 6px 3px 3px; background: rgba(244, 239, 231, 0.04); overflow: hidden; }
.dx-bar-tr i {
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, var(--e-ember-hot), var(--e-ember-deep));
    transform-origin: 50% 100%;
    transition: transform 0.9s var(--e-ease-out) calc(0.25s + var(--i) * 0.09s), filter 0.2s;
}
.dx:not(.is-loaded) .dx-bar-tr i { transform: scaleY(0) !important; }
.dx-bar:hover .dx-bar-tr i { filter: brightness(1.18); }
.dx-bar-l { font-size: 0.6rem; line-height: 1.2; color: var(--e-dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* funnel */
.dx-funnel { height: 100%; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dx-fn { display: grid; grid-template-columns: 62px minmax(0, 1fr) 42px; align-items: center; gap: 8px; min-height: 0; }
.dx-fn-l { font-size: 0.68rem; color: var(--e-smoke); white-space: nowrap; }
.dx-fn-v { font: 600 0.7rem/1 var(--e-body); text-align: right; font-variant-numeric: tabular-nums; }
.dx-fn-tr { position: relative; height: 100%; max-height: 26px; }
.dx-fn-tr i {
    position: absolute; inset: 0; border-radius: 5px;
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.45), var(--e-ember) 50%, rgba(255, 107, 0, 0.45));
    transform-origin: 50% 50%;
    transition: transform 0.9s var(--e-ease-out) calc(0.35s + var(--i) * 0.1s), filter 0.2s;
}
.dx-fn:nth-child(2) .dx-fn-tr i { opacity: 0.86; }
.dx-fn:nth-child(3) .dx-fn-tr i { opacity: 0.74; }
.dx-fn:nth-child(4) .dx-fn-tr i { opacity: 0.62; }
.dx:not(.is-loaded) .dx-fn-tr i { transform: scaleX(0) !important; }
.dx-fn:hover .dx-fn-tr i { filter: brightness(1.2); }

/* heat grid */
.dx-heat { height: 100%; display: grid; grid-template-columns: 12px repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)) 12px; gap: 3px; }
.dx-heat i { border-radius: 3px; background: var(--e-ember); transition: opacity 0.6s var(--e-ease-out) calc(0.3s + var(--i) * 0.03s); }
.dx:not(.is-loaded) .dx-heat i { opacity: 0 !important; }
.dx-heat i:hover { box-shadow: inset 0 0 0 1.5px #fff6ee; }
.dx-hd { display: grid; place-items: center; font: 600 0.64rem/1 var(--e-body); color: var(--e-dust); }
.dx-hx { font: 500 0.64rem/12px var(--e-body); color: var(--e-dust); white-space: nowrap; }

/* tooltip */
.dx-tip {
    position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
    display: grid; gap: 3px;
    padding: 8px 11px; border-radius: 10px;
    border: 1px solid rgba(255, 107, 0, 0.42); background: rgba(12, 9, 7, 0.97);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.9);
    white-space: nowrap; opacity: 0; transition: opacity 0.15s;
}
.dx-tip.is-on { opacity: 1; }
.dx-tip b { font: 700 0.82rem/1.1 var(--e-display); font-variant-numeric: tabular-nums; }
.dx-tip small { font-size: 0.66rem; line-height: 1.2; color: var(--e-smoke); }

/* insights (page variant) */
.dx-insights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dx-insights li { display: grid; align-content: start; gap: 5px; height: 96px; padding: 11px 13px; border-radius: 14px; border: 1px solid rgba(255, 107, 0, 0.2); background: rgba(255, 107, 0, 0.045); }
.dx-insights b { font: 700 0.62rem/1.2 var(--e-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-ember-hot); }
.dx-insights span { font-size: 0.76rem; line-height: 1.42; color: var(--e-smoke); }
.dx-insights li.is-new { animation: ax-in 0.45s var(--e-ease-out) both; }
.dx-insights li.is-new:nth-child(2) { animation-delay: 0.07s; }
.dx-insights li.is-new:nth-child(3) { animation-delay: 0.14s; }

/* drill-down: covers the KPIs and charts, never resizes the dashboard */
.dx-drillpanel {
    position: absolute; inset: 0; z-index: 5; overflow: auto; overscroll-behavior: contain;
    padding: 16px; border-radius: 16px;
    border: 1px solid rgba(255, 107, 0, 0.38); background: #0b0806;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    opacity: 0; transform: translate3d(0, 10px, 0);
    transition: opacity 0.28s var(--e-ease-std), transform 0.4s var(--e-ease-out);
}
.dx-drillpanel.is-in { opacity: 1; transform: none; }
.dx-dp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dx-dp-h { margin: 0; font: 700 1.02rem/1.2 var(--e-display); color: var(--e-bone); }
.dx-dp-h:focus { outline: none; }
.dx-dp-h small { display: block; margin-top: 4px; font: 500 0.7rem/1.3 var(--e-body); color: var(--e-dust); }
.dx-dp-x { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--e-line-strong); background: transparent; color: var(--e-bone); cursor: pointer; transition: border-color var(--e-t-quick); }
.dx-dp-x:hover { border-color: var(--e-ember); }
.dx-dp-x svg { width: 16px; height: 16px; }
.dx-dp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.dx-dp-tabs button { border: 1px solid var(--e-line); }
.dx-dp-t { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.dx-dp-t th, .dx-dp-t td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--e-line); white-space: nowrap; }
.dx-dp-t thead th { font-size: 0.66rem; font-weight: 600; color: var(--e-dust); }
.dx-dp-t th:first-child { text-align: left; }
.dx-dp-t tbody th { font-weight: 600; color: var(--e-bone); }
.dx-dp-t td { color: var(--e-smoke); }
.dx-dp-t .dx-dp-share { width: 34%; text-align: left; }
.dx-dp-bar { display: inline-block; vertical-align: middle; width: calc(100% - 46px); max-width: 180px; height: 6px; margin-right: 8px; border-radius: 3px; background: rgba(244, 239, 231, 0.06); overflow: hidden; }
.dx-dp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember-hot)); transform-origin: 0 50%; animation: dx-grow 0.7s var(--e-ease-out) both; animation-delay: calc(var(--i) * 0.06s); }
.dx-dp-t tfoot th, .dx-dp-t tfoot td { border-bottom: 0; color: var(--e-bone); font-weight: 700; }
.dx-dp-t .is-up { color: var(--sx-ok); }
.dx .dx-dp-note { margin-top: 14px; font-size: 0.7rem; color: var(--e-dust); }
.dx-dp-t .is-down { color: #f87171; }
.dx .dx-foot { margin-top: 12px; font-size: var(--e-fs-xs); line-height: 1.5; color: var(--e-dust); }

/* wide: the pipeline is a column beside the dashboard */
@media (min-width: 1280px) {
    .dx { grid-template-columns: clamp(330px, 26vw, 372px) minmax(0, 1fr); gap: clamp(32px, 2.8vw, 40px); align-items: stretch; }
    .dx-flow { grid-template-columns: clamp(140px, 11vw, 156px) minmax(0, 1fr); align-items: center; align-content: center; gap: clamp(24px, 2.2vw, 30px); }
    .dx-srcs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
    .dx-src { display: flex; }
    .dx-pipe { width: 100%; }
    .dx-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1600px) {
    .dx-c-line .dx-plot, .dx-c-donut .dx-plot { height: 200px; }
    .dx-donut { width: 120px; height: 120px; }
    .dx-c-bars .dx-plot, .dx-c-funnel .dx-plot, .dx-c-heat .dx-plot { height: 160px; }
}
/* tablets and phones: compact source tiles in one row, charts in two columns */
@media (max-width: 899px) {
    .dx-srcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .dx-src { flex-direction: column; justify-content: center; gap: 6px; padding: 8px 4px; text-align: center; }
    .dx-src-t b { font-size: 0.75rem; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
    .dx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-c-funnel, .dx-c-heat { grid-column: span 2; }
    .dx-insights { grid-template-columns: minmax(0, 1fr); }
    .dx-insights li { height: 78px; }
}
@media (max-width: 559px) {
    .dx { gap: 34px; }
    .dx-flow { gap: 38px; }
    .dx-src-t small { display: none; }
    .dx-src-t b { font-size: 0.62rem; letter-spacing: -0.01em; }
    .dx-src { padding-inline: 2px; }
    .dx-pipe { padding: 10px; }
    .dx-steps { gap: 6px; }
    .dx-steps li { grid-template-columns: minmax(0, 1fr); padding: 7px 8px 8px; gap: 5px; }
    .dx-st-ic { display: none; }
    .dx-steps li.is-done .dx-st-t b::after { content: ' \2713'; color: var(--sx-ok); }
    .dx-st-t small { font-size: 0.6rem; }
    .dx-top { gap: 8px; }
    .dx-title { flex-basis: 100%; }
    .dx-range { flex: 1 1 auto; justify-content: space-between; }
    .dx-range button { flex: 1; min-width: 0; }
    .dx-kpi { height: 80px; padding: 10px 12px; }
    .dx-kd { left: 12px; bottom: 10px; }
    .dx-spark { right: 10px; bottom: 10px; width: 42%; }
    .dx-c-donut, .dx-c-bars { grid-column: span 2; }
    .dx-c-donut .dx-plot { height: auto; min-height: 124px; }
    .dx-c-bars .dx-plot { height: 150px; }
    .dx-donut { width: 112px; height: 112px; }
    .dx-c-line .dx-plot { height: 170px; }
    .dx-bars { gap: 6px; }
    .dx-insights li { height: 92px; }
    .dx-drillpanel { padding: 12px; }
    .dx-dp-t th, .dx-dp-t td { padding: 9px 5px; }
    .dx-dp-t .dx-dp-share { display: none; }
}

@media (max-width: 379px) {
    .dx-st-t small { min-height: 3.9em; }
}

/* =========================================================================
   3. Service pages: the live band right under the hero
   ========================================================================= */
.xa-show {
    position: relative;
    padding: clamp(24px, 3vw, 40px) 0 clamp(36px, 5vw, 64px);
    border-bottom: 1px solid var(--e-line);
    background: linear-gradient(180deg, var(--e-black), var(--e-coal) 55%, var(--e-black));
}
.xa-show-head { display: grid; gap: 10px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.xa-show-mark { display: inline-flex; align-items: center; gap: 10px; font-size: var(--e-fs-sm); font-weight: 500; color: var(--e-smoke); }
.xa-show-mark::before { content: ''; width: 24px; height: 2px; border-radius: 2px; background: var(--e-ember); }
.xa .xa-show-head h2 { font: 700 clamp(1.4rem, 1.05rem + 1.3vw, 2.2rem)/1.08 var(--e-display); letter-spacing: -0.02em; text-wrap: balance; color: var(--e-bone); }
.xa-show-head > p:last-child { max-width: 60ch; font-size: var(--e-fs-md); color: var(--e-smoke); text-wrap: pretty; }
@media (min-width: 1024px) {
    .xa-show-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
    .xa-show-head > .xa-show-mark { grid-column: 1; }
    .xa-show-head > h2 { grid-column: 1; }
    .xa-show-head > p:last-child { grid-column: 2; grid-row: 1 / span 2; }
}

/* without the script the empty stages step aside (the badges and KPIs still read) */
html:not(.js) .ax-main, html:not(.js) .ax-ticker, html:not(.js) .ax-bar, html:not(.js) .ax-more,
html:not(.js) .dx-flow, html:not(.js) .dx-grid, html:not(.js) .dx-range, html:not(.js) .dx-drill { display: none; }

@keyframes ax-in { from { opacity: 0; transform: translate3d(-4px, 0, 0); } }
@keyframes ax-breathe { 0%, 100% { opacity: 0.3; transform: scale(0.96); } 50% { opacity: 0.75; transform: scale(1.04); } }
@keyframes ax-blink { 50% { opacity: 0; } }
@keyframes ax-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
@keyframes ax-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes dx-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes dx-grow { from { transform: scaleX(0); } }
@keyframes dx-src { 0%, 70%, 100% { opacity: 0; } 82% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .ax *, .ax *::before, .ax *::after, .dx *, .dx *::before, .dx *::after { animation: none !important; transition: none !important; }
    .ax-caret { display: none; }
}

/* the live band pulls up under the hero on these two pages (the showcase is the page's best asset) */
.xa-hero:has(+ .xa-show) { padding-bottom: clamp(28px, 3.4vw, 48px); }

/* deep audit (Sept 2026): small phones get the five source tiles as 3 + 2 so every label fits */
@media (max-width: 399px) { .dx-srcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-sample { font-size: 0.75rem; }