/* ===== Edi Page ===== */

/* ── Scroll animations ── */
.edi-page [data-anim] {
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(80ms + var(--delay, 0ms));
    will-change: opacity, transform;
}

.edi-page [data-anim="fade-up"] { transform: translateY(40px); }
.edi-page [data-anim].in-view {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .edi-page [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.edi-page {
    --ed-pad: 2rem;
    background: #f8fafc;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem var(--ed-pad) 1.5rem;
    overflow-x: clip;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Glow blobs ── */
.ed-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
    filter: blur(60px);
}

.ed-glow--tl {
    top: -100px; left: -120px;
    width: 580px; height: 580px;
    background: radial-gradient(circle, rgba(0,168,150,0.08) 0%, transparent 65%);
}

.ed-glow--br {
    bottom: -80px; right: -100px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(0,168,150,0.06) 0%, transparent 65%);
}

/* ── Hero wrapper ── */
.ed-hero {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ed-title {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: clamp(24px, min(4.3vw, 6.2vh), 46px);
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.022em;
    line-height: 1.08;
}

.ed-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(34px, 4.4vw, 46px);
    height: clamp(34px, 4.4vw, 46px);
    margin: 0 4px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    color: #00A896;
    vertical-align: middle;
    transform: translateY(-6%);
}

.ed-title-icon svg {
    width: 45%;
    height: 45%;
}

.ed-sub {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    max-width: 560px;
}

/* ── CTA row ── */
.ed-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.ed-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}

.ed-btn svg { width: 16px; height: 16px; }

.ed-btn--primary {
    background: linear-gradient(180deg, #00bfac 0%, #00A896 50%, #009688 100%);
    color: #ffffff;
}

.ed-btn--primary:hover {
    transform: translateY(-2px);
}

.ed-btn--primary:active {
    transform: translateY(0);
}

.ed-btn--ghost {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}

.ed-btn--ghost:hover {
    border-color: #00A896;
    color: #00A896;
    transform: translateY(-2px);
}

/* ══════════════════════
   PHOTO-WALL HERO
══════════════════════ */
.ed-hero--wall {
    --w-ghost-a: #eef2f6;
    --w-ghost-b: #e5eaf0;
    --w-line: rgba(15,23,42,.10);
    --w-accent: #00A896;
    --w-card-w: clamp(46px, min(8.4vw, 12.6vh), 116px);
    --w-card-h: calc(var(--w-card-w) * 1.18);
    --w-gap: clamp(5px, .7vw, 8px);
    --w-radius: clamp(8px, .9vw, 11px);
    width: 100%;
    margin-top: -5.5rem;
}

@media (max-width: 720px) {
    .ed-hero--wall { margin-top: -5.5rem; }
}

.ed-panel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

.ed-stage {
    position: relative;
    --w-up: calc((var(--w-card-h) + var(--w-gap)) * 3 + var(--w-card-h));
}

.ed-wall {
    position: absolute;
    top: calc(var(--w-up) * -1);
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: var(--w-up);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--w-gap);
    perspective: 900px;
    pointer-events: none;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ed-col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--w-gap);
    width: var(--w-card-w);
    flex: none;
    margin-top: calc((var(--w-card-h) + var(--w-gap)) * -3);
    transform: translateY(calc(var(--lift) * var(--w-card-h) * -1));
    transform-style: preserve-3d;
    animation: ed-wall-drop .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(var(--i) * 55ms);
}

.ed-col::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    height: calc(var(--w-card-h) * 2.4);
    border-left: 1px dashed var(--w-line);
    -webkit-mask: linear-gradient(180deg, #000, transparent);
            mask: linear-gradient(180deg, #000, transparent);
}

.ed-col--accent::after { border-left-color: rgba(0,168,150,.45); }

@keyframes ed-wall-drop {
    from { opacity: 0; translate: 0 calc(var(--w-card-h) * -.6); }
    to   { opacity: 1; translate: 0 0; }
}

.ed-wcard {
    position: relative;
    width: var(--w-card-w);
    height: var(--w-card-h);
    margin: 0;
    border-radius: var(--w-radius);
    flex: none;
}

.ed-wcard--ghost {
    background: linear-gradient(180deg, var(--w-ghost-a), var(--w-ghost-b));
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}

.ed-wcard--far1 { opacity: .75; }
.ed-wcard--far2 { opacity: .45; }
.ed-wcard--far3 { opacity: .2; }

.ed-wcard--photo {
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: 0 0 0 2px #f8fafc, 0 2px 6px rgba(15,23,42,.08);
    pointer-events: auto;
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
    will-change: transform;
}

.ed-wcard--photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 25%;
}

.ed-wcard--photo figcaption {
    display: none;
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 7px 6px;
    flex-direction: column;
    gap: 1px;
    color: #fff;
    font-size: clamp(7px, .72vw, 9.5px);
    line-height: 1.2;
    background: linear-gradient(180deg, transparent, rgba(15,23,42,.72));
    opacity: 0;
    translate: 0 6px;
    transition: opacity .35s ease, translate .35s ease;
}

.ed-wcard--photo figcaption strong { font-weight: 600; font-size: 1.08em; }
.ed-wcard--photo figcaption span { opacity: .8; }

.ed-wcard--photo.is-lifted {
    z-index: 5;
    transform: translateZ(60px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg)) scale(1.12);
    box-shadow: 0 0 0 2px #f8fafc, 0 26px 40px -10px rgba(15,23,42,.35), 0 10px 18px rgba(15,23,42,.12);
}

.ed-wcard--photo.is-lifted figcaption { opacity: 1; translate: 0 0; }

/* ── Copy overlaid on the wall ── */
.ed-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: calc(var(--w-card-h) * 2.28 + clamp(18px, 6vh, 72px)) clamp(20px, 5vw, 48px) clamp(18px, 5vh, 64px);
    gap: 16px;
}

@media (max-width: 1040px) {
    .ed-hero--wall { --w-card-w: clamp(46px, min(10.2vw, 12.6vh), 110px); }
    .ed-col--edge { display: none; }
    .ed-wcard--extra { display: none; }
    .ed-copy { padding-top: calc(var(--w-card-h) * 2.2 + clamp(18px, 6vh, 64px)); }
}

@media (max-width: 720px) {
    .ed-hero--wall { --w-card-w: clamp(46px, min(16vw, 10.6vh), 90px); }
    .ed-col--outer { display: none; }
    .ed-copy { padding-top: calc(var(--w-card-h) * 2.1 + clamp(18px, 5vh, 56px)); }
    .ed-wcard--photo figcaption { font-size: 9px; }
    .ed-wcard--photo.is-lifted { transform: translateZ(28px) rotateX(var(--rx, 5deg)) rotateY(var(--ry, -9deg)) scale(1.06); }
}

@media (max-width: 400px) {
    .ed-hero--wall { --w-card-w: min(17.4vw, 10.6vh); --w-gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-col { animation: none; }
    .ed-wcard--photo, .ed-wcard--photo figcaption { transition: none; }
}

/* ══════════════════════
   TRUSTED-BY LOGO STRIP
══════════════════════ */
.ed-logos {
    width: 100%;
    padding: 2.5rem 0 3.5rem;
    background: #f8fafc;
    overflow: hidden;
}

/* Track clips the strip; the fade mask hides the seam where it wraps */
.ed-logos-track {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.ed-logos-strip {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: ed-logos-scroll 26s linear infinite;
}

.ed-logos-track:hover .ed-logos-strip {
    animation-play-state: paused;
}

@keyframes ed-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ed-logo-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.ed-logo-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #cbd5e1;
}

/* Uploaded logo images (from the admin's Clients page) — muted to match
   the washed-out text/icon treatment, full color on hover. */
.ed-logo-item img {
    height: 26px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    opacity: 0.55;
    transition: opacity 0.2s, filter 0.2s;
}

.ed-logo-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 640px) {
    .ed-logos { padding: 2rem 0 2.75rem; }
    .ed-logos-strip { gap: 2.25rem; }
    .ed-logo-item { font-size: 0.92rem; }
    .ed-logo-item img { height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-logos-strip { animation: none; }
}

/* ══════════════════════
   THE PROBLEM
══════════════════════ */
.pr-section {
    width: 100%;
    background: #f8fafc;
    padding: 4.5rem 1.5rem;
    display: flex;
    justify-content: center;
}

.pr-inner {
    width: 100%;
    max-width: 1100px;
}

.pr-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pr-title {
    margin: 18px 0 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;   /* same as the hero title */
    font-weight: 500;
    font-size: clamp(28px, min(4.3vw, 6.2vh), 46px);
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: #0f172a;
    max-width: 22ch;
}

.pr-sub {
    margin: 18px 0 0;
    max-width: 640px;
    font-size: 1rem;
    line-height: 1.65;
    color: #64748b;
}

.pr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 44px;
}

.pr-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 16px 32px -26px rgba(15,23,42,.18);
    transition: transform 0.2s, border-color 0.2s;
}

.pr-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,168,150,.3);
}

.pr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f0fdfa;
    color: #00A896;
    margin-bottom: 14px;
}

.pr-icon svg { width: 18px; height: 18px; }

.pr-card h3 {
    margin: 0 0 8px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
}

.pr-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #64748b;
}

@media (max-width: 820px) {
    .pr-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .pr-section { padding: 3rem 1.25rem; }
    .pr-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════
   THE SHIFT (what if your website could show them?)
══════════════════════ */
.ws-section {
    width: 100%;
    background: #ffffff;
    padding: 5rem 1.5rem;
    display: flex;
    justify-content: center;
}

.ws-inner { width: 100%; max-width: 1100px; }

.ws-head { text-align: center; max-width: 680px; margin: 0 auto; }

.ws-title {
    margin: 18px 0 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    color: #0f172a;
}

.ws-accent { color: #00A896; }

.ws-lede {
    margin: 18px 0 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #64748b;
}

/* ── Closing line ── */
.ws-result {
    margin-top: 44px;
    text-align: center;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    letter-spacing: -.01em;
}

.ws-result span { color: #94a3b8; font-weight: 600; }
.ws-result strong { display: block; margin-top: 4px; color: #0f172a; font-weight: 800; }

@media (max-width: 560px) {
    .ws-section { padding: 3.5rem 1.25rem; }
}

/* ══════════════════════
   THE SHIFT: story stage (act 1: the hunt → act 2: ask and get shown)
   Base styles are the finished act-2 frame, so it reads fine without JS.
   JS adds .is-armed (hides act-2 pieces until played) and data-act="1|2".
══════════════════════ */
.sv { margin-top: 48px; }

/* ── Step switcher ── */
.sv-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sv-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}

.sv-step b {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    transition: background .2s, color .2s;
}

.sv-step:hover { border-color: #cbd5e1; }
.sv-step.is-active { color: #0f172a; border-color: #0f172a; }
.sv-step.is-active b { background: #0f172a; color: #fff; }
.sv-step[data-go="2"].is-active { color: #00897b; border-color: #00A896; }
.sv-step[data-go="2"].is-active b { background: #00A896; }

.sv-step-line {
    position: relative;
    width: 56px;
    height: 2px;
    background: #e2e8f0;
    overflow: hidden;
}
.sv-step-line i {
    position: absolute; inset: 0;
    background: #00A896;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .9s ease;
}
.sv[data-act="1"] .sv-step-line i { transform: scaleX(0); }

.sv-replay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.sv-replay svg { width: 13px; height: 13px; }
.sv-replay:hover { color: #00A896; border-color: #00A896; }
.sv-replay[hidden] { display: none; }

/* ── Stage ── */
.sv-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    container-type: inline-size;
    box-shadow: 0 40px 80px -48px rgba(15,23,42,.4);
}

/* everything inside scales with the stage width */
.sv-stage > * { font-size: clamp(9px, 1.35cqw, 15px); }

.sv-bg { position: absolute; inset: 0; transition: opacity 1s ease; }
.sv-bg--teal {
    background:
        radial-gradient(55% 65% at 72% 30%, rgba(0,168,150,.20), transparent 70%),
        radial-gradient(40% 50% at 20% 80%, rgba(45,212,191,.12), transparent 70%),
        linear-gradient(160deg, #f0fdfa, #ffffff 55%, #ecfdf9);
}
.sv-bg--grey {
    opacity: 0;
    background: linear-gradient(160deg, #f1f5f9, #e2e8f0 60%, #cbd5e1);
}
.sv[data-act="1"] .sv-bg--grey { opacity: 1; }

/* ── The browser window ── */
.sv-browser {
    position: absolute;
    left: 11%; right: 11%;
    top: 7%;
    height: 68%;
    z-index: 1;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0,168,150,.15), 0 30px 80px -30px rgba(0,168,150,.45);
    transition: box-shadow 1s ease;
}
.sv[data-act="1"] .sv-browser { box-shadow: 0 30px 60px -30px rgba(15,23,42,.35); }

.sv-bar {
    display: flex;
    align-items: center;
    gap: .45em;
    height: 2.75em;
    padding: 0 1em;
    border-bottom: 1px solid #f1f5f9;
}
.sv-dot { width: .6em; height: .6em; border-radius: 50%; background: #e2e8f0; transition: background .6s; }
.sv:not([data-act="1"]) .sv-dot:nth-child(1) { background: #ff5f57; }
.sv:not([data-act="1"]) .sv-dot:nth-child(2) { background: #febc2e; }
.sv:not([data-act="1"]) .sv-dot:nth-child(3) { background: #28c840; }

.sv-url {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-left: .6em;
    padding: .2em .8em;
    border-radius: .4em;
    background: #f1f5f9;
    color: #64748b;
    font-size: .8em;
}
.sv-url svg { width: .95em; height: .95em; color: #94a3b8; }
.sv-url-path { margin-left: -.4em; font-weight: 500; color: #00897b; transition: opacity .4s; }
.sv[data-act="1"] .sv-url-path { opacity: 0; }

.sv-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: #00A896;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: opacity .6s;
}
.sv-live i {
    width: .6em; height: .6em;
    border-radius: 50%;
    background: #00A896;
    animation: ws-pulse 1.8s infinite;
}
.sv[data-act="1"] .sv-live { opacity: 0; }

/* the page area under the address bar: real captures of the site */
.sv-view {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: 2.75em;
    overflow: hidden;
    background: #f8fafc;
}
.sv-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: filter 1s ease, opacity .5s ease;
}
/* act 1 is the tired, grey version of the same site */
.sv[data-act="1"] .sv-shot { filter: grayscale(.75) contrast(.96); }
.sv-shot.sv-a1, .sv-shot.sv-a1.on,
.sv.is-armed .sv-shot.sv-a2:not(.on) { transform: none; }
.sv.is-collapse .sv-shot.sv-a1.on { transform: none; }
.sv-shot--menu { z-index: 1; }
.sv-shot--echo { z-index: 1; }

/* ── Act 1 pieces (hidden unless .on) ── */
.sv-a1 {
    position: absolute;
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.sv-a1.on { opacity: 1; transform: none; }

/* the pile of windows collapses into the answer */
.sv.is-collapse .sv-a1.on {
    opacity: 0;
    transform: scale(.5) translateY(12%);
    transition: opacity .6s ease, transform .6s ease;
}

/* the pile of pages they open along the way */
.sv-win {
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .6em;
    box-shadow: 0 20px 40px -18px rgba(15,23,42,.5);
}
.sv-win-bar { display: flex; align-items: center; gap: .3em; padding: .45em .6em; border-bottom: 1px solid #f1f5f9; }
.sv-win-bar i { width: .45em; height: .45em; border-radius: 50%; background: #e2e8f0; }
.sv-win-bar em { margin-left: .5em; font-style: normal; font-size: .62em; color: #94a3b8; white-space: nowrap; }
.sv-win img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; filter: grayscale(.75); }

.sv-win--page   { left: 27%; top: 22%; width: 34%; }
.sv-win--page.on   { transform: rotate(-3deg); }
.sv-win--video  { left: 52%; top: 34%; width: 32%; }
.sv-win--video.on  { transform: rotate(2.5deg); }
.sv-win--search { left: 12%; top: 46%; width: 32%; }
.sv-win--search.on { transform: rotate(1.5deg); }

.sv-cursor {
    z-index: 6;
    width: 1.7em;
    height: 1.7em;
    left: 80%;
    top: 80%;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
    transition: left .55s cubic-bezier(.45,0,.2,1), top .55s cubic-bezier(.45,0,.2,1), opacity .3s ease;
}

/* ── Act 2 pieces (shown by default; hidden until .on once JS arms) ── */
.sv-a2 { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.sv.is-armed .sv-a2:not(.on) {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    pointer-events: none;
}

.sv-say {
    position: absolute;
    z-index: 5;
    left: 4%;
    top: 80%;
    max-width: 27%;
    display: flex;
    align-items: center;
    gap: .9em;
    padding: .75em .75em .75em 1.2em;
    background: #fff;
    border-radius: .9em;
    box-shadow: 0 0 0 1px rgba(0,168,150,.3), 0 18px 40px -16px rgba(0,168,150,.5);
    color: #0f172a;
    font-weight: 500;
    line-height: 1.4;
}
.sv-say-text { font-size: .98em; }
.sv-say-mic {
    position: relative;
    flex-shrink: 0;
    width: 2.3em; height: 2.3em;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #00A896;
    color: #fff;
}
.sv-say-mic svg { width: 1.1em; height: 1.1em; }
.sv-say.is-typing .sv-say-mic::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    animation: ws-pulse 1.2s infinite;
}

.sv-r { color: transparent; }
.sv-caret {
    display: none;
    width: 2px; height: 1em;
    margin: 0 1px -2px;
    background: #00A896;
    animation: ws-blink .8s steps(1) infinite;
}
.sv-say.is-typing .sv-caret { display: inline-block; }

.sv-orb {
    position: absolute;
    z-index: 5;
    left: 69.5%;
    top: 80%;
    width: 5.2%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #5eead4, #00A896 55%, #00695f);
    color: #fff;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 1.9cqw, 22px);
    box-shadow: 0 0 0 .25em rgba(0,168,150,.15), 0 12px 30px -8px rgba(0,168,150,.7);
}
.sv-orb::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    animation: sv-ring 2.2s ease-out infinite;
}
@keyframes sv-ring {
    0%   { box-shadow: 0 0 0 0 rgba(0,168,150,.45); }
    100% { box-shadow: 0 0 0 1.1em rgba(0,168,150,0); }
}

.sv-reply {
    position: absolute;
    z-index: 5;
    left: 76%;
    top: 79.5%;
    max-width: 21.5%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .5em .55em;
    padding: .7em 1em;
    background: #fff;
    border-radius: .9em;
    box-shadow: 0 0 0 1px #e2e8f0, 0 16px 36px -18px rgba(15,23,42,.35);
    color: #0f172a;
    font-size: .92em;
    font-weight: 500;
    line-height: 1.35;
}
.sv-reply > svg { width: 1.05em; height: 1.05em; margin-top: .15em; color: #8b5cf6; }

/* ── The answer: the real section of the page, pointed out ── */
.sv-hl {
    position: absolute;
    z-index: 2;
    left: 73.4%; top: 13.8%;
    width: 24.6%; height: 27%;
    border: 2px solid #00A896;
    border-radius: .7em;
    /* everything else on the page steps back */
    box-shadow: 0 0 0 100vmax rgba(248,250,252,.62), 0 0 0 .35em rgba(0,168,150,.16);
}
.sv-hl b {
    position: absolute;
    left: .8em; top: 0;
    transform: translateY(-55%);
    padding: .25em .7em;
    border-radius: .4em;
    background: #00A896;
    color: #fff;
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sv-echo-cta {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .5em .9em;
    border-radius: .5em;
    background: linear-gradient(180deg, #00bfac, #00A896);
    color: #fff;
    font-size: .82em;
    font-weight: 700;
    text-decoration: none;
}
.sv-echo-cta svg { width: 1em; height: 1em; }

/* ── The visitor ── */
.sv-person {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: -4%;
    width: 27%;
    transform: translateX(-50%);
}
.sv-person svg { display: block; width: 100%; height: auto; }
.sv-head {
    transform-box: fill-box;
    transform-origin: 50% 95%;
    transition: transform .8s ease;
}
.sv[data-act="1"] .sv-head { transform: rotate(-8deg) translateX(-2%); }

.sv-q {
    top: -6%;
    right: 8%;
    width: 2.6em; height: 2.6em;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 24px -12px rgba(15,23,42,.4);
    color: #94a3b8;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 1.3em;
    font-weight: 800;
}
.sv-q.on { animation: sv-float 2.4s ease-in-out infinite; }
@keyframes sv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.sv-sparks { position: absolute; top: 6%; right: 6%; width: 2em; height: 2.6em; }
.sv-sparks i {
    position: absolute;
    left: 0;
    width: 1.4em; height: .24em;
    border-radius: .2em;
    background: #00A896;
}
.sv-sparks i:nth-child(1) { top: 0;     transform: rotate(-35deg); }
.sv-sparks i:nth-child(2) { top: 1em;   }
.sv-sparks i:nth-child(3) { top: 2em;   transform: rotate(35deg); }

/* ── Caption under the stage ── */
.sv-caption {
    margin: 18px 0 0;
    text-align: center;
    color: #64748b;
    font-size: 1rem;
}
.sv-caption strong { color: #0f172a; }
.sv[data-act="1"] .sv-cap-2,
.sv:not([data-act="1"]) .sv-cap-1 { display: none; }

@keyframes ws-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,168,150,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(0,168,150,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,168,150,0); }
}
@keyframes ws-blink { 50% { opacity: 0; } }

/* ── Phones: taller stage, stacked composition ── */
@media (max-width: 700px) {
    .sv-stage { aspect-ratio: 4 / 5; border-radius: 16px; }
    .sv-stage > * { font-size: clamp(9px, 2.6cqw, 13px); }
    .sv-browser { left: 4%; right: 4%; top: 4%; height: 70%; }
    .sv-win--page { left: 16%; top: 20%; width: 62%; }
    .sv-win--video { left: 34%; top: 38%; width: 60%; }
    .sv-win--search { left: 6%; top: 56%; width: 60%; }
    .sv-say { left: 6%; right: 6%; top: 43%; max-width: none; }
    .sv-orb { left: 6%; top: 55%; width: 11%; }
    .sv-reply { left: 20%; top: 55%; max-width: 74%; }
    .sv-hl { left: 3%; top: 25%; width: 94%; height: 21%; }
    .sv-person { width: 46%; bottom: -5%; }
}

@media (max-width: 520px) {
    .sv-steps { gap: 6px; }
    .sv-step { padding: 6px 10px 6px 6px; font-size: 0.78rem; }
    .sv-step-line { display: none; }
    .sv-replay { padding: 6px 10px; }
}

/* ── The visitor as a 3D model (shift-visitor.js swaps this in for the SVG) ── */
.sv-person--3d { width: 36%; bottom: -2%; }
.sv-person--3d > svg { visibility: hidden; }     /* keeps the box's size */
.sv-person-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.sv-person--3d .sv-q { top: 4%; right: 16%; }
.sv-person--3d .sv-sparks { top: 14%; right: 14%; }

.sv-credit {
    margin: 6px 0 0;
    text-align: center;
    font-size: 0.7rem;
    color: #94a3b8;
}
.sv-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sv-credit a:hover { color: #00A896; }

@media (max-width: 700px) {
    .sv-person--3d { width: 60%; bottom: -3%; }
}

/* ══════════════════════
   EDI HERO: a dotted panel, the mascot and headline in the centre, moments from a
   live Edi session floating around it, and two tilted screens peeking in from the
   bottom corners. Prefixed edh- because this sheet is shared with the home page.
══════════════════════ */
/* Full-bleed from the very top of the page, like the home hero: the site header is
   sticky (in flow) and would push the hero down by its height, so on this page it
   floats over the hero instead. */
body:has(.edi-page) .site-header { position: fixed; top: 0; left: 0; right: 0; }
/* with the announcement bar showing, the floating header sits just below it (same as the other fixed-header pages) */
html.has-announce body:has(.edi-page) .site-header { top: var(--zn-announce-h, 40px); }

.edh {
    position: relative;
    width: auto;
    align-self: stretch;
    margin: -6rem calc(-1 * var(--ed-pad)) 0;
    padding: 0 0 3rem;
}

.edh-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    border-bottom: 1px solid #e2e8f0;
    background:
        radial-gradient(circle, rgba(15,23,42,.14) 1px, transparent 1.4px) 0 0 / 22px 22px,
        #ffffff;
}
/* fade the dot grid toward the middle so the headline sits on calm white */
.edh-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 48% 55% at 50% 48%, #ffffff 0%, rgba(255,255,255,.92) 45%, rgba(255,255,255,0) 100%);
    z-index: 0;
    pointer-events: none;
}

.edh-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.edh-glow--a { width: 620px; height: 620px; left: -6%; top: -30%; background: rgba(0,168,150,.20); }
.edh-glow--b { width: 660px; height: 660px; right: -8%; bottom: -35%; background: rgba(165,180,252,.30); }

/* ── Centre ── */
.edh-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 940px;
    margin: 0 auto;
    padding: 8rem 1.5rem 11rem;   /* clears the floating header; bottom leaves room for the screens */
}

.edh-mascot {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #e8edf3;
    box-shadow: 0 18px 40px -18px rgba(15,23,42,.45), 0 1px 0 rgba(15,23,42,.04);
    display: grid;
    place-items: center;
    margin-bottom: 26px;
}
.edh-mascot .edm { width: 72px; height: 72px; }

.edh-tag {
    display: inline-block;
    border: 1px solid rgba(0,168,150,0.4);
    color: #00A896;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.8);
}

.edh-title {
    margin: 18px 0 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(2.3rem, 4.6vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #0f172a;
    text-wrap: balance;
}
.edh-title span { color: inherit; }

.edh-sub {
    margin: 20px 0 0;
    max-width: 38rem;
    font-size: 1.06rem;
    line-height: 1.65;
    color: #475569;
}

.edh-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.edh-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform .15s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.edh-btn svg { width: 15px; height: 15px; }
.edh-btn--primary { background: #0f172a; color: #fff; box-shadow: 0 12px 28px -12px rgba(15,23,42,.7); }
.edh-btn--primary:hover { background: #1e293b; transform: translateY(-1px); }
.edh-btn--ghost { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.edh-btn--ghost:hover { border-color: #00A896; color: #00A896; transform: translateY(-1px); }

.edh-note { margin: 16px 0 0; font-size: .84rem; color: #94a3b8; }

.edh-orb {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #7dd3c8, #00A896 55%, #0f766e);
    box-shadow: 0 0 0 4px rgba(0,168,150,.16);
    animation: edh-breathe 2.4s ease-in-out infinite;
}
@keyframes edh-breathe { 50% { box-shadow: 0 0 0 7px rgba(0,168,150,.07); } }

.edh-mini-btn {
    display: inline-block;
    font-size: .82rem;
    font-weight: 600;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 6px 11px;
    white-space: nowrap;
}
.edh-mini-btn--dark { background: #0f172a; color: #fff; border-color: #0f172a; }

/* ── Tilted screens ── */
.edh-screen {
    position: absolute;
    z-index: 2;
    bottom: -3%;
    width: clamp(300px, 31%, 400px);
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 40px 80px -40px rgba(15,23,42,.5), 0 1px 0 rgba(15,23,42,.04);
    overflow: hidden;
    font-size: 12px;
}
.edh-screen--left  { left: 5%;  transform: rotate(-6deg); transform-origin: bottom left; }
.edh-screen--right { right: 5%; transform: rotate(6deg);  transform-origin: bottom right; }

.edh-screen-bar {
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .7em .9em;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
    color: #94a3b8;
    font-size: .9em;
}
.edh-screen-bar i { width: .7em; height: .7em; border-radius: 50%; background: #e2e8f0; }
.edh-screen-bar span { margin-left: .4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edh-screen-bar--chat { color: #0f172a; font-weight: 600; gap: .6em; }
.edh-screen-bar--chat .edh-orb { width: 1.4em; height: 1.4em; animation: none; }
.edh-screen-bar--chat em { margin-left: auto; font-style: normal; font-size: .78em; font-weight: 600; color: #0f766e; background: #e6f7f4; border-radius: 999px; padding: .2em .7em; }

.edh-app { display: grid; grid-template-columns: 5.5em 1fr; min-height: 15em; }
.edh-app-side { display: flex; flex-direction: column; gap: .55em; padding: .9em .7em; background: #f8fafc; border-right: 1px solid #eef2f6; }
.edh-app-side b { width: 1.6em; height: 1.6em; border-radius: .4em; background: #0f172a; margin-bottom: .5em; }
.edh-app-side em { height: .9em; border-radius: .3em; background: #e2e8f0; }
.edh-app-side em.is-on { background: #b8ece5; }
.edh-app-main { padding: .9em 1em; }
.edh-app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; }
.edh-app-head em { width: 4em; height: .9em; border-radius: .3em; background: #cbd5e1; }
.edh-mini-btn--ghost { font-size: .8em; padding: .4em .8em; }
.edh-app-form { display: flex; flex-direction: column; gap: .55em; }
.edh-app-form label { display: flex; flex-direction: column; gap: .2em; }
.edh-app-form small { font-size: .75em; color: #94a3b8; }
.edh-app-form span { font-size: .95em; color: #0f172a; padding: .35em .6em; border: 1px solid #e8edf3; border-radius: .4em; background: #f8fafc; }
.edh-app-form .edh-mini-btn { align-self: flex-start; margin-top: .3em; font-size: .8em; padding: .45em .9em; }

.edh-chat { display: flex; flex-direction: column; gap: .55em; padding: .9em; background: #f8fafc; }
.edh-msg {
    margin: 0; max-width: 92%;
    padding: .55em .8em; border-radius: .9em; border-top-left-radius: .3em;
    font-size: .95em; line-height: 1.4; color: #0f172a;
    background: #fff; border: 1px solid #e8edf3;
}
.edh-msg--user { align-self: flex-end; background: #0f172a; color: #fff; border-color: #0f172a; border-radius: .9em; border-top-right-radius: .3em; }
.edh-msg--done { border-color: rgba(0,168,150,.4); background: #e6f7f4; color: #0f766e; }

@media (prefers-reduced-motion: reduce) {
    .edh-orb { animation: none !important; }
}

/* ── Responsive ── */
@media (max-width: 1000px) {
    .edh-panel { min-height: 0; }
    .edh-center { padding: 7.5rem 1.5rem 15rem; }
    .edh-screen { width: 38%; bottom: -6%; }
}
@media (max-width: 760px) {
    .edh { padding-bottom: 2rem; }
    .edh-center { padding: 7.5rem 1.25rem 3rem; }
    .edh-mascot { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 20px; }
    .edh-mascot .edm { width: 60px; height: 60px; }
    .edh-screen--right { display: none; }
    /* on phones the product screen sits under the copy, straight, as the one visual */
    .edh-screen--left {
        position: relative;
        left: auto; bottom: auto;
        transform: none;
        width: calc(100% - 2.5rem);
        margin: 0 auto 1.25rem;
        font-size: 11px;
    }
}

/* ══════════════════════
   HOW IT WORKS: sticky stacked steps (same pattern as the Vocalis page), light panels
   that reuse the hero's screen pieces (edh-app, edh-msg, edh-mini-btn, edh-orb).
══════════════════════ */
.edw {
    width: 100%;
    background: #ffffff;
    padding: 5.5rem 0;
}
.edw-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

.edw-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.edw-eyebrow {
    display: inline-block;
    color: #00A896;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.edw-h2 {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #0f172a;
}
.edw-h2 span { color: #00A896; }
.edw-sub { margin: 16px 0 0; max-width: 640px; font-size: 1.02rem; line-height: 1.65; color: #64748b; }

.edw-steps { display: flex; flex-direction: column; }
.edw-step {
    position: sticky;
    top: 100px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 44px 52px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
    box-shadow: 0 12px 40px rgba(15,23,42,0.08);
    margin-bottom: 24px;
}
.edw-step:nth-child(2) { top: 116px; }
.edw-step:nth-child(3) { top: 132px; }
.edw-step:nth-child(4) { top: 148px; }
.edw-step:last-child { margin-bottom: 0; }
.edw-step--alt { grid-template-columns: 1.2fr 1fr; }
.edw-step--alt .edw-text { order: 2; }
.edw-step--alt .edw-panel { order: 1; }

.edw-text { display: flex; flex-direction: column; gap: 16px; }
.edw-badge {
    display: inline-block;
    align-self: flex-start;
    background: #00A896;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,168,150,0.3);
}
.edw-title {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #0f172a;
}
.edw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.edw-list li { position: relative; padding-left: 18px; font-size: 0.95rem; line-height: 1.6; color: #475569; }
.edw-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #00A896; }

/* ── Panels ── */
.edw-panel {
    position: relative;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 48px -28px rgba(15,23,42,.35);
    overflow: hidden;
    font-size: 13px;
    min-width: 0;
}
.edw-bar {
    display: flex;
    align-items: center;
    gap: .45em;
    padding: .75em 1em;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
    color: #94a3b8;
    font-size: .92em;
}
.edw-bar i { width: .7em; height: .7em; border-radius: 50%; background: #e2e8f0; }
.edw-bar span { margin-left: .4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edw-bar--chat { color: #0f172a; font-weight: 600; gap: .6em; }
.edw-bar--chat .edh-orb { width: 1.4em; height: 1.4em; }
.edw-bar em, .edw-live, .edw-count {
    margin-left: auto;
    font-style: normal;
    font-size: .78em;
    font-weight: 700;
    color: #0f766e;
    background: #e6f7f4;
    border-radius: 999px;
    padding: .25em .75em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
.edw-live { letter-spacing: .05em; text-transform: uppercase; }
.edw-live i { width: .55em; height: .55em; border-radius: 50%; background: #00A896; animation: edh-pulse 1.6s infinite; }

.edw-chat { display: flex; flex-direction: column; gap: .6em; padding: 1.1em; background: #f8fafc; min-height: 15em; }
.edw-chat .edh-msg { font-size: 1em; }
.edw-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: .4em;
    font-size: .8em;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 999px;
    padding: .35em .8em;
}
.edw-chip i { width: .5em; height: .5em; border-radius: 50%; background: #f59e0b; }

/* step 2: the product with the next target outlined */
.edw-app { min-height: 17em; position: relative; }
.edw-rows { display: flex; flex-direction: column; gap: .55em; }
.edw-rows span { display: block; height: 2.6em; border: 1px solid #eef2f6; border-radius: .6em; background: linear-gradient(90deg, #f1f5f9 0 2em, transparent 2em 2.8em, #f1f5f9 2.8em 60%, transparent 60%); }
.edw-target { outline: 2px solid #ef4444; outline-offset: 2px; box-shadow: 0 0 0 .4em rgba(239,68,68,.12); }
.edh-app-side em.edw-target { outline-offset: 3px; }
.edw-cursor {
    position: absolute;
    right: 20%;
    top: 24%;
    width: 1.6em;
    height: 1.6em;
    filter: drop-shadow(0 .2em .4em rgba(15,23,42,.35));
    animation: edw-nudge 2.6s ease-in-out infinite;
}
.edw-cursor svg { width: 100%; height: 100%; }
@keyframes edw-nudge { 0%,100% { transform: translate(.6em,.6em); } 45%,55% { transform: translate(0,0) scale(.88); } }

/* step 3: form beside the narration */
.edw-panel--split { display: grid; grid-template-columns: 1fr 1.1fr; }
.edw-form { display: flex; flex-direction: column; gap: .6em; padding: 1.1em; border-right: 1px solid #eef2f6; }
.edw-form label { display: flex; flex-direction: column; gap: .2em; }
.edw-form small { font-size: .78em; color: #94a3b8; }
.edw-form span { font-size: .95em; color: #0f172a; padding: .4em .65em; border: 1px solid #e8edf3; border-radius: .45em; background: #f8fafc; }
.edw-form span.edh-mini-btn { align-self: flex-start; margin-top: .3em; font-size: .85em; padding: .45em .9em; border-radius: 7px; background: #0f172a; color: #fff; border-color: #0f172a; outline: 2px solid #ef4444; outline-offset: 2px; }
.edw-chat--side { min-height: 0; }

/* step 4: playbooks + hand-off */
.edw-books { display: flex; flex-direction: column; gap: .6em; padding: 1.1em; background: #f8fafc; }
.edw-book {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .7em .9em;
    border-radius: .7em;
    background: #fff;
    border: 1px solid #e8edf3;
}
.edw-book svg { width: 1.3em; height: 1.3em; padding: .25em; border-radius: 50%; background: #e6f7f4; color: #0f766e; flex-shrink: 0; }
.edw-book b, .edw-handoff b { display: block; font-weight: 600; color: #0f172a; font-size: .98em; }
.edw-book small, .edw-handoff small { font-size: .8em; color: #64748b; }
.edw-book.is-new { border-color: rgba(0,168,150,.45); box-shadow: 0 0 0 .3em rgba(0,168,150,.08); }
.edw-handoff {
    display: flex;
    align-items: center;
    gap: .8em;
    margin-top: .3em;
    padding: .7em .9em;
    border-radius: .7em;
    background: #0f172a;
    color: #fff;
}
.edw-handoff b { color: #fff; }
.edw-handoff small { color: #94a3b8; }
.edw-handoff .edh-avatar { width: 2em; height: 2em; }
.edw-handoff em { margin-left: auto; font-style: normal; font-size: .76em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7dd3c8; white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .edw-step, .edw-step--alt { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
    .edw-step--alt .edw-text { order: 1; }
    .edw-step--alt .edw-panel { order: 2; }
}
@media (max-width: 640px) {
    .edw { padding: 4rem 0; }
    .edw-inner { padding: 0 1.25rem; }
    .edw-step { position: static; padding: 26px 20px; border-radius: 18px; margin-bottom: 18px; }
    .edw-panel { font-size: 12px; }
    .edw-panel--split { grid-template-columns: 1fr; }
    .edw-form { border-right: 0; border-bottom: 1px solid #eef2f6; }
    .edw-handoff em { display: none; }
}

/* ── Looping clips from a real session, one per step ── */
.edw-panel--clip { background: #0f172a; }
.edw-panel--clip .edw-bar span { color: #64748b; }
.edw-clip { position: relative; aspect-ratio: 960 / 460; background: #f1f5f9; }
.edw-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the clips are wide, so the panel takes more of the row than the text */
.edw-step:has(.edw-panel--clip) { grid-template-columns: 1fr 1.45fr; }
.edw-step--alt:has(.edw-panel--clip) { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 900px) {
    .edw-step:has(.edw-panel--clip), .edw-step--alt:has(.edw-panel--clip) { grid-template-columns: 1fr; }
}

/* ══════════════════════
   COMPARISON: Edi as the raised column, in the same style as the comparison
   tables on the Follow-up and industry pages.
══════════════════════ */
.edc { width: 100%; background: #f8fafc; padding: 5.5rem 0; }
.edc-inner { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }
.edc-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.edc-head .edw-sub { max-width: 700px; }

.edc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 24px 0 8px; }   /* no side padding, so the pinned labels have nothing peeking past them */
.edc-table {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.35fr) repeat(3, minmax(130px, .85fr));
    min-width: 860px;
}
.edc-cell {
    padding: 18px 20px;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* row labels */
.edc-cell--label {
    padding-left: 0;
    font-size: .92rem;
    font-weight: 700;
    color: #0f172a;
}
.edc-cell--corner { border-bottom-color: transparent; }

/* Edi: the raised white column */
.edc-cell--edi {
    background: #fff;
    box-shadow: 18px 0 28px -22px rgba(15,23,42,.16), -18px 0 28px -22px rgba(15,23,42,.16);
}
.edc-cell--edi p { margin: 0; font-size: .86rem; line-height: 1.5; color: #334155; }
.edc-cell--top {
    border-radius: 16px 16px 0 0;
    justify-content: center;
    padding: 22px;
    box-shadow: 18px 0 28px -22px rgba(15,23,42,.16), -18px 0 28px -22px rgba(15,23,42,.16), 0 -18px 28px -22px rgba(15,23,42,.16);
}
.edc-cell--bottom {
    border-radius: 0 0 16px 16px;
    border-bottom: none;
    box-shadow: 18px 0 28px -22px rgba(15,23,42,.16), -18px 0 28px -22px rgba(15,23,42,.16), 0 18px 28px -22px rgba(15,23,42,.16);
}
.edc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0f172a;
}
.edc-brand .edh-orb { width: 26px; height: 26px; }

/* the other three */
.edc-cell--other { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
.edc-cell--head { font-size: .85rem; font-weight: 700; color: #64748b; }
.edc-cell--other small { font-size: .74rem; line-height: 1.35; color: #94a3b8; }

.edc-yes {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,168,150,.12); color: #00A896;
}
.edc-yes svg { width: 14px; height: 14px; }
.edc-cell--other .edc-yes { width: 22px; height: 22px; background: #f1f5f9; color: #64748b; }
.edc-cell--other .edc-yes svg { width: 12px; height: 12px; }
.edc-no { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.edc-no svg { width: 16px; height: 16px; }
.edc-meh { color: #cbd5e1; font-weight: 700; font-size: 1rem; line-height: 1; }

/* phones: one card per comparison row instead of a sideways-scrolling table */
.edc-cards { display: none; }
.edc-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 14px 30px -24px rgba(15,23,42,.35);
}
.edc-card + .edc-card { margin-top: 12px; }
.edc-card h3 { margin: 0 0 12px; font-size: .98rem; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.edc-card-edi {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border-radius: 10px;
    background: #e6f7f4; border: 1px solid rgba(0,168,150,.3);
}
.edc-card-edi span, .edc-card li span { font-size: .86rem; line-height: 1.45; color: #334155; }
.edc-card b { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0f766e; margin-bottom: 1px; }
.edc-card ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.edc-card li { display: flex; gap: 10px; align-items: flex-start; padding: 0 12px; }
.edc-card li b { color: #94a3b8; }
.edc-card li span { color: #64748b; }
.edc-card li .edc-yes { width: 22px; height: 22px; background: #f1f5f9; color: #64748b; }
.edc-card li .edc-yes svg { width: 12px; height: 12px; }
.edc-card .edc-no, .edc-card .edc-meh { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

@media (max-width: 960px) {
    .edc-scroll { display: none; }
    .edc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .edc-card + .edc-card { margin-top: 0; }
}
@media (max-width: 640px) {
    .edc { padding: 4rem 0; }
    .edc-inner { padding: 0 1.25rem; }
    .edc-cards { grid-template-columns: 1fr; }
}

/* ══════════════════════
   WHAT EDI DOES: a four-column bento. Wide cards hold a small live visual beside
   the copy; square cards put the visual under it.
══════════════════════ */
.edf { width: 100%; background: #ffffff; padding: 5.5rem 0; }
.edf-inner { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.edf-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }

.edf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.edf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.edf-card:hover { transform: translateY(-3px); border-color: rgba(0,168,150,.35); box-shadow: 0 22px 44px -30px rgba(15,23,42,.35); }
.edf-card--wide { grid-column: span 2; flex-direction: row; align-items: center; }
.edf-card--wide .edf-copy { flex: 1 1 0; min-width: 0; }
.edf-card--wide .edf-art { flex: 1.15 1 0; min-width: 0; }

.edf-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,168,150,.1); color: #00A896;
}
.edf-icon svg { width: 20px; height: 20px; }
.edf-copy h3 {
    margin: 16px 0 8px;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #0f172a;
}
.edf-copy p { margin: 0; font-size: .92rem; line-height: 1.6; color: #64748b; }
.edf-art { margin-top: auto; }

.edf-btn {
    display: inline-block;
    font-size: .78rem; font-weight: 600;
    padding: 6px 11px; border-radius: 7px;
    background: #fff; color: #0f172a; border: 1px solid #e2e8f0;
    white-space: nowrap;
}
.edf-btn--dark { background: #0f172a; color: #fff; border-color: #0f172a; }
.edf-btn--target { outline: 2px solid #ef4444; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(239,68,68,.12); }

/* 1. mini product window */
.edf-mini { border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 18px 36px -24px rgba(15,23,42,.4); font-size: 11px; }
.edf-mini-bar { display: flex; align-items: center; gap: .45em; padding: .6em .8em; background: #f8fafc; border-bottom: 1px solid #eef2f6; color: #94a3b8; }
.edf-mini-bar i { width: .65em; height: .65em; border-radius: 50%; background: #e2e8f0; }
.edf-mini-bar span { margin-left: .4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edf-mini-body { position: relative; display: grid; grid-template-columns: 4.6em 1fr; min-height: 11.5em; }
.edf-mini-side { display: flex; flex-direction: column; gap: .5em; padding: .8em .6em; background: #f8fafc; border-right: 1px solid #eef2f6; }
.edf-mini-side b { width: 1.4em; height: 1.4em; border-radius: .35em; background: #0f172a; margin-bottom: .4em; }
.edf-mini-side em { height: .8em; border-radius: .3em; background: #e2e8f0; }
.edf-mini-side em.is-on { background: #b8ece5; }
.edf-mini-main { padding: .8em .9em; display: flex; flex-direction: column; gap: .8em; }
.edf-mini-head { display: flex; align-items: center; justify-content: space-between; }
.edf-mini-head em { width: 4.5em; height: .85em; border-radius: .3em; background: #cbd5e1; }
.edf-mini-head .edf-btn { font-size: .95em; padding: .35em .8em; }
.edf-bars { flex: 1; display: flex; align-items: flex-end; gap: .5em; padding-top: .4em; border-bottom: 1px solid #eef2f6; min-height: 6em; }
.edf-bars i { flex: 1; height: var(--h); border-radius: .3em .3em 0 0; background: linear-gradient(180deg, #7dd3c8, #00A896); opacity: .85; }
.edf-cursor { position: absolute; right: 14%; top: 22%; width: 1.7em; height: 1.7em; filter: drop-shadow(0 .2em .4em rgba(15,23,42,.35)); animation: edw-nudge 2.6s ease-in-out infinite; }
.edf-cursor svg { width: 100%; height: 100%; }
.edf-say {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 0; padding: 8px 12px;
    border-radius: 12px; background: #fff; border: 1px solid #e8edf3;
    font-size: .82rem; color: #0f172a;
}
.edf-say .edh-orb { width: 18px; height: 18px; }

/* 2. voice */
.edf-voice {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: #0f172a;
}
.edf-mic { width: 34px; height: 34px; border-radius: 50%; background: #00A896; color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 5px rgba(0,168,150,.25); }
.edf-mic svg { width: 16px; height: 16px; }
.edf-wave { flex: 1; display: flex; align-items: center; gap: 4px; height: 26px; }
.edf-wave b { flex: 1; height: 30%; border-radius: 2px; background: #7dd3c8; animation: edh-wave 1s ease-in-out infinite; }
.edf-wave b:nth-child(2n) { animation-delay: .15s; } .edf-wave b:nth-child(3n) { animation-delay: .3s; } .edf-wave b:nth-child(4n) { animation-delay: .45s; }
.edf-type {
    margin-top: 8px; padding: 10px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #e2e8f0;
    font-size: .82rem; color: #94a3b8;
}
.edf-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: text-bottom; background: #00A896; animation: vc-blink 1s steps(1) infinite; }
@keyframes vc-blink { 50% { opacity: 0; } }

/* 3. playbook speed */
.edf-pb { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; }
.edf-pb-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.edf-pb-row span { font-size: .76rem; font-weight: 600; color: #64748b; }
.edf-pb-row b { font-size: .74rem; font-weight: 700; color: #94a3b8; }
.edf-pb-row i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 99px; background: #eef2f6; position: relative; overflow: hidden; }
.edf-pb-row i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: #cbd5e1; }
.edf-pb-row.is-fast b { color: #0f766e; }
.edf-pb-row.is-fast i::after { background: #00A896; }

/* 4. confirm */
.edf-confirm { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 14px 30px -22px rgba(15,23,42,.4); }
.edf-confirm p { margin: 0 0 12px; font-size: .84rem; line-height: 1.45; color: #0f172a; }
.edf-confirm div { display: flex; gap: 8px; flex-wrap: wrap; }

/* 5. booking */
.edf-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.edf-slots span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 10px; border-radius: 9px;
    background: #fff; border: 1px solid #e2e8f0;
    font-size: .78rem; font-weight: 600; color: #64748b;
}
.edf-slots span.is-on { background: #0f172a; border-color: #0f172a; color: #fff; }
.edf-slots svg { width: 12px; height: 12px; color: #7dd3c8; }
.edf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.edf-tags span { padding: 4px 9px; border-radius: 99px; background: #e6f7f4; color: #0f766e; font-size: .72rem; font-weight: 600; }

/* 6. hand-off */
.edf-thread { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; font-size: 12.5px; }
.edf-thread .edh-msg { background: #f8fafc; }
.edf-thread .edh-msg--user { background: #0f172a; }
.edf-joined {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px; padding: 9px 12px; border-radius: 12px;
    background: #e6f7f4; border: 1px solid rgba(0,168,150,.35);
}
.edf-joined b { display: block; font-size: .95em; color: #0f766e; }
.edf-joined small { font-size: .85em; color: #475569; }

@media (prefers-reduced-motion: reduce) {
    .edf-cursor, .edf-wave b, .edf-caret { animation: none !important; }
}

/* ── Responsive ── */
@media (max-width: 1040px) {
    .edf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edf-card--wide { grid-column: span 2; }
}
@media (max-width: 680px) {
    .edf { padding: 4rem 0; }
    .edf-inner { padding: 0 1.25rem; }
    .edf-grid { grid-template-columns: 1fr; gap: 12px; }
    .edf-card, .edf-card--wide { grid-column: auto; flex-direction: column; align-items: stretch; padding: 22px; border-radius: 18px; }
}

/* ══════════════════════
   FAQ
══════════════════════ */
.edq { width: 100%; background: #f8fafc; padding: 5.5rem 0; }
.edq-inner { max-width: 860px; margin: 0 auto; padding: 0 2rem; }
.edq-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 36px; }
.edq-list { display: flex; flex-direction: column; gap: 12px; }
.edq-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0 22px;
    transition: border-color .2s, box-shadow .2s;
}
.edq-item[open] { border-color: rgba(0,168,150,.35); box-shadow: 0 16px 34px -26px rgba(15,23,42,.35); }
.edq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}
.edq-item summary::-webkit-details-marker { display: none; }
.edq-plus { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #e2e8f0; position: relative; transition: background .2s, border-color .2s; }
.edq-plus::before, .edq-plus::after { content: ''; position: absolute; top: 50%; left: 50%; background: #0f172a; transform: translate(-50%, -50%); }
.edq-plus::before { width: 10px; height: 1.5px; }
.edq-plus::after { width: 1.5px; height: 10px; transition: transform .2s; }
.edq-item[open] .edq-plus { background: #00A896; border-color: #00A896; }
.edq-item[open] .edq-plus::before, .edq-item[open] .edq-plus::after { background: #fff; }
.edq-item[open] .edq-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.edq-item p { margin: 0; padding: 0 0 20px; font-size: .95rem; line-height: 1.65; color: #64748b; }

/* ══════════════════════
   CLOSING CTA: the hero's dotted canvas, folded into one card
══════════════════════ */
.edz { width: 100%; background: #f8fafc; padding: 0 2rem 5.5rem; }
.edz-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 28px 56px;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    background:
        radial-gradient(ellipse 55% 70% at 50% 45%, #fff 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 100%),
        radial-gradient(circle, rgba(15,23,42,.14) 1px, transparent 1.4px) 0 0 / 22px 22px,
        #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.edz-glow { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; pointer-events: none; }
.edz-glow--a { width: 420px; height: 420px; left: -8%; top: -40%; background: rgba(0,168,150,.22); }
.edz-glow--b { width: 460px; height: 460px; right: -8%; bottom: -45%; background: rgba(165,180,252,.32); }
.edz-mascot {
    width: 84px; height: 84px; border-radius: 22px;
    background: #fff; border: 1px solid #e8edf3;
    box-shadow: 0 18px 40px -18px rgba(15,23,42,.45);
    display: grid; place-items: center;
    margin-bottom: 22px;
}
.edz-mascot .edm { width: 64px; height: 64px; }
.edz-title {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    letter-spacing: -.035em;
    line-height: 1.05;
    color: #0f172a;
}
.edz-title span { color: #00A896; }
.edz-sub { margin: 16px 0 0; max-width: 34rem; font-size: 1.04rem; line-height: 1.65; color: #475569; }
.edz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.edz-proof { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: .84rem; font-weight: 500; color: #64748b; }
.edz-proof li { display: inline-flex; align-items: center; gap: 8px; }
.edz-proof i { width: 7px; height: 7px; border-radius: 50%; background: #00A896; box-shadow: 0 0 0 3px rgba(0,168,150,.15); }

@media (max-width: 640px) {
    .edq { padding: 4rem 0; }
    .edq-inner { padding: 0 1.25rem; }
    .edq-item { padding: 0 16px; }
    .edq-item summary { font-size: .95rem; }
    .edz { padding: 0 1.25rem 4rem; }
    .edz-card { padding: 48px 20px 40px; border-radius: 22px; }
    .edz-mascot { width: 72px; height: 72px; border-radius: 18px; }
    .edz-mascot .edm { width: 54px; height: 54px; }
}