/* ====================================================================
   GO! Express v2 — design system (scoped to .gx-preview) + RTL + custom
   ==================================================================== */
.gx-preview {
    --lime: #b4f108; /* #ccec44;*/
    --lime2: #eaff86;
    --black: #050705;
    --ink: #101510;
    --muted: #64706a;
    --line: #e8eee6;
    --cream: #fbfcf5;
    --lime-deep: #4f7a00;
    --shadow: 0 26px 80px rgba(7, 18, 15, .18);
    --soft: 0 18px 46px rgba(7, 18, 15, .08);
    /* Lift for product visuals that sit directly on the page (no panel fill). */
    --float: 0 14px 32px rgba(17, 27, 33, .12), 0 2px 6px rgba(17, 27, 33, .05);
    --mock-bg: transparent;
    --mock-border: 0;
    --mock-radius: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
}
body.locale-ar .gx-preview,
body.locale-da .gx-preview,
body.locale-dr .gx-preview,
.gx-preview.v2-rtl {
    font-family: 'Noto Kufi Arabic', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Product visuals float on the page. No filled backdrop. */
.gx-preview .mock-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.gx-preview .section { max-width: 1200px; margin: 0 auto; padding: 88px 22px; }
.gx-preview .center { text-align: start; max-width: 820px; margin: 0 0 40px; }
.gx-preview .center .section-text { margin-inline: 0; }
.gx-preview .eyebrow {
    display: inline-block;
    /* font-family: 'JetBrains Mono', 'Courier New', ui-monospace, monospace; */
    font-size: 11px; letter-spacing: .14em; font-weight: 600;
    text-transform: uppercase; color: var(--lime-deep);
    margin-bottom: 14px; padding: 0;
    background: none; border-radius: 0;
}
.gx-preview h2 { margin: 0; font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: clamp(32px, 4.2vw, 42px); line-height: 1.16; letter-spacing: -.028em; font-weight: 500; color: var(--ink); }
.gx-preview .h2-sub { font-size: clamp(24px, 2.8vw, 36px); }
/* Arabic / Darija: Noto Kufi Arabic for headings */
body.locale-ar .gx-preview h2,
body.locale-da .gx-preview h2,
body.locale-dr .gx-preview h2 { font-family: 'Noto Kufi Arabic', sans-serif !important; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; }
.gx-preview .section-text { margin: 14px auto 0; color: rgba(31,42,40,.80); font-size: 15px; line-height: 1.6; max-width: 760px; font-weight: 400; }
/* Arabic / Darija: smaller body text */
body.locale-ar .gx-preview .section-text,
body.locale-da .gx-preview .section-text,
body.locale-dr .gx-preview .section-text { font-size: 16px; }

/* FAQ — WhatsApp help-center rows: title + contact link, chevron, hairline */
.gx-preview .v2-faq-section {
    padding-top: 96px;
    padding-bottom: 72px;
}
.gx-preview .v2-faq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    margin: 0 0 28px;
}
.gx-preview .v2-faq-head h2 {
    font-weight: 500;
    font-size: clamp(36px, 4.4vw, 48px);
    line-height: 1.12;
    letter-spacing: -.03em;
}
.gx-preview .v2-faq-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: #111b21;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.gx-preview .v2-faq-more span {
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}
.gx-preview .v2-faq-more svg {
    width: 16px;
    height: 16px;
    display: block;
}
.gx-preview.v2-rtl .v2-faq-more svg {
    transform: scaleX(-1);
}
.gx-preview .v2-faq-more:hover span {
    text-decoration-thickness: 2px;
}
.gx-preview .faq {
    max-width: none;
    margin: 0;
    border-top: 1px solid rgba(17, 27, 33, .12);
}
.gx-preview .faq details {
    border: 0;
    border-bottom: 1px solid rgba(17, 27, 33, .12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.gx-preview .faq summary {
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 4px;
    color: #111b21;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}
.gx-preview .faq summary::-webkit-details-marker,
.gx-preview .faq summary::marker {
    display: none;
    content: "";
}
.gx-preview .faq .fchev {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin: 0;
    border: 0;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0;
    background: none;
    color: #111b21;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}
.gx-preview.v2-rtl .faq .fchev {
    transform: rotate(135deg);
}
.gx-preview .faq details[open] .fchev,
.gx-preview.v2-rtl .faq details[open] .fchev {
    background: none;
    color: #111b21;
    transform: rotate(45deg);
}
.gx-preview .faq .fq {
    flex: 1 1 auto;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
}
.gx-preview .faq p {
    margin: 0;
    padding: 0 8px 22px;
    padding-inline-start: 26px;
    color: rgba(17, 27, 33, .72);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
}

/* Reports grid */
.gx-preview .reports-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.gx-preview .report { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--soft); }
.gx-preview .report b { display: block; font-size: 22px; letter-spacing: -.04em; margin-bottom: 8px; color: var(--ink); }
.gx-preview .report strong { display: block; font-size: 18px; letter-spacing: -.02em; margin: 4px 0 6px; color: var(--ink); }
.gx-preview .report p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14px; font-weight: 560; }
.gx-preview #v2-reports .v2-reports-head {
    max-width: 820px;
    margin-bottom: 34px;
}
.gx-preview #v2-reports .v2-report-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}
.gx-preview #v2-reports .v2-report-badges span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(79,122,0,.16);
    border-radius: 999px;
    background: rgba(204,236,68,.16);
    color: #344522;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.gx-preview #v2-reports .v2-report-badges i {
    color: var(--lime-deep);
    font-size: 12px;
}

/* Reports dashboard mockup */
.gx-preview .v2-report-mock {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 36px;
    direction: ltr;
    border: 1px solid #e7ece7;
    border-radius: 22px;
    background: #f5f6f4;
    box-shadow: var(--shadow);
    padding: 16px;
    overflow: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #070907;
}
.gx-preview .v2-report-mock * { box-sizing: border-box; letter-spacing: 0; }
.gx-preview .v2rm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.gx-preview .v2rm-top h3 {
    margin: 0;
    color: #080a08;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.1;
    font-weight: 850;
}
.gx-preview .v2rm-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.gx-preview .v2rm-filters span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid #dde3df;
    border-radius: 9px;
    background: #fff;
    color: #70756f;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.gx-preview .v2rm-filters .active {
    border-color: var(--lime);
    background: var(--lime);
    color: #11150e;
}
.gx-preview .v2rm-hero-grid {
    display: grid;
    grid-template-columns: minmax(260px, .95fr) 1.45fr;
    gap: 14px;
    margin-bottom: 26px;
}
.gx-preview .v2rm-payout {
    min-height: 180px;
    padding: 22px;
    border-radius: 15px;
    background: #161b2f;
    color: #fff;
    box-shadow: 0 12px 30px rgba(15, 20, 35, .22);
}
.gx-preview .v2rm-payout-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.gx-preview .v2rm-payout-top span { color: #d4dae8; font-size: 12px; }
.gx-preview .v2rm-payout-top b {
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(204, 236, 68, .36);
    color: #eaff86;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}
.gx-preview .v2rm-payout strong {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1;
    font-weight: 700;
}
.gx-preview .v2rm-payout strong small { font-size: 12px; font-weight: 700; color: #d4dae8; }
.gx-preview .v2rm-payout p {
    margin: 13px 0 18px;
    color: #d4dae8;
    font-size: 12px;
}
.gx-preview .v2rm-payout button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    background: var(--lime);
    color: #121810;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
}
.gx-preview .v2rm-alerts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.gx-preview .v2rm-alert {
    min-height: 83px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid #e6ebe7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(7, 18, 15, .08);
}
.gx-preview .v2rm-alert .v2rm-ic {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #f6f6f5;
    color: #7e8781;
    font-size: 16px;
}
.gx-preview .v2rm-alert.danger .v2rm-ic { background: #ffe9e9; color: #f04444; }
.gx-preview .v2rm-alert.warn .v2rm-ic { background: #fff4e6; color: #e07800; }
.gx-preview .v2rm-alert.blue .v2rm-ic { background: #ecefff; color: #5265ff; }
.gx-preview .v2rm-alert b {
    display: block;
    margin-bottom: 2px;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}
.gx-preview .v2rm-alert strong {
    display: block;
    margin-bottom: 2px;
    color: #111;
    font-size: 12px;
    font-weight: 850;
}
.gx-preview .v2rm-alert small { display: block; color: #808780; font-size: 10px; line-height: 1.2; }
.gx-preview .v2rm-alert > i { color: #b2bab3; font-size: 11px; }
.gx-preview .v2rm-main-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}
.gx-preview .v2rm-card {
    border: 1px solid #e1e7e2;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(7, 18, 15, .08);
    padding: 16px;
    min-width: 0;
}
.gx-preview .v2rm-card h4 {
    margin: 0;
    color: #101310;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 700;
}
.gx-preview .v2rm-wide { grid-column: span 6; min-height: 196px; }
.gx-preview .v2rm-team { grid-column: span 9; }
.gx-preview .v2rm-chats { grid-column: span 3; }
.gx-preview .v2rm-half { grid-column: span 6; min-height: 132px; }
.gx-preview .v2rm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.gx-preview .v2rm-card-head > div {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.gx-preview .v2rm-card-head span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 850;
}
.gx-preview .v2rm-card-head .ok { background: #e8faef; color: #10b962; }
.gx-preview .v2rm-card-head .bad { background: #fff0f0; color: #ea3f52; }
.gx-preview .v2rm-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.gx-preview .v2rm-stat {
    min-height: 78px;
    position: relative;
    border-radius: 8px;
    background: #f2f3f2;
    padding: 13px 10px;
}
.gx-preview .v2rm-stat.warm { background: #fbf3e8; color: #e07800; }
.gx-preview .v2rm-stat.good { background: #eaf9f0; color: #16b866; }
.gx-preview .v2rm-stat.bad { background: #fff0f0; color: #e21f3e; }
.gx-preview .v2rm-stat.blue { background: #ecefff; color: #5265ff; }
.gx-preview .v2rm-stat b {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
    line-height: 1;
    color: currentColor;
    font-weight: 700;
}
.gx-preview .v2rm-stat span {
    display: block;
    margin-bottom: 3px;
    color: #7d847e;
    font-size: 10px;
    line-height: 1.2;
}
.gx-preview .v2rm-stat strong {
    display: block;
    color: currentColor;
    font-size: 10px;
    font-weight: 700;
}
.gx-preview .v2rm-stat small {
    position: absolute;
    top: 16px;
    left: 34px;
    color: currentColor;
    font-size: 9px;
    font-weight: 700;
}
.gx-preview .v2rm-reason {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    color: #7b827d;
    font-size: 11px;
}
.gx-preview .v2rm-reason b { color: #7b827d; font-size: 12px; }
.gx-preview .v2rm-table { margin: 12px -16px -8px; }
.gx-preview .v2rm-tr {
    display: grid;
    grid-template-columns: minmax(170px, 1.7fr) repeat(5, minmax(58px, .55fr));
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 16px;
    border-top: 1px solid #edf0ed;
    color: #111;
    font-size: 13px;
    font-weight: 800;
}
.gx-preview .v2rm-th {
    min-height: 28px;
    color: #6e756f;
    font-size: 9px;
    font-weight: 800;
}
.gx-preview .v2rm-agent {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 10px;
    align-items: center;
    min-width: 0;
}
.gx-preview .v2rm-agent b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.gx-preview .v2rm-agent small {
    grid-column: 2;
    margin-top: -2px;
    color: #8b928c;
    font-size: 10px;
    font-weight: 600;
}
.gx-preview .v2rm-av {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9ede4;
    color: #20251f;
    font-size: 15px;
    font-weight: 850;
    overflow: hidden;
}
.gx-preview .v2rm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-preview .v2rm-av.letter.amber { background: #fbf0d6; }
.gx-preview .v2rm-av.ai { background: #e9f9c8; }
.gx-preview .v2rm-chats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gx-preview .v2rm-chat-line {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    background: #f4f5f4;
    padding: 0 12px;
}
.gx-preview .v2rm-chat-line.waiting { background: #fbf3e8; color: #e07800; }
.gx-preview .v2rm-chat-line span { color: #7b827d; font-size: 12px; }
.gx-preview .v2rm-chat-line b { color: #050805; font-size: 18px; font-weight: 700; }
.gx-preview .v2rm-chat-line.waiting b { color: #e07800; }
.gx-preview .v2rm-mini-table {
    display: grid;
    gap: 0;
    margin-top: 12px;
}
.gx-preview .v2rm-mini-table > div {
    display: grid;
    grid-template-columns: 1.6fr .65fr .9fr .75fr;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    border-top: 1px solid #eff2ef;
    color: #2d332f;
    font-size: 11px;
    font-weight: 750;
}
.gx-preview .v2rm-mini-table > div:first-child {
    min-height: 24px;
    border-top: 0;
    color: #6f7771;
    font-size: 10px;
    font-weight: 800;
}
.gx-preview .v2rm-mini-table b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #121612;
    font-size: 12px;
    font-weight: 850;
}

/* Delivery services */
.gx-preview .gx-services-section { background: #fff; }
.gx-preview .gx-services-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.gx-preview .service-item {
    position: relative;
    min-height: 360px;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 18px;
    background: #111;
    box-shadow: 0 18px 48px rgba(7,18,15,.12);
    isolation: isolate;
}
.gx-preview .service-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5,7,6,.04) 0%, rgba(5,7,6,.26) 42%, rgba(5,7,6,.92) 100%),
        linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
    transition: opacity .35s ease;
}
.gx-preview .service-item:hover::after { opacity: .96; }
.gx-preview .service-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 93%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .5s ease;
}
.gx-preview .service-item:hover .service-image { transform: scale(1.06); }
.gx-preview .service-content {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 24px 24px;
    color: #fff;
    text-align: left;
}
.gx-preview .service-content h3 {
    margin: 0;
    color: #fff !important;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0;
}

/* CTA */
.gx-preview .cta-section { max-width: 1200px; margin: 0 auto; padding: 88px 22px; }
.gx-preview .cta-box { background: radial-gradient(circle at 18% 0%, rgba(204,236,68,.28), transparent 35%), linear-gradient(135deg,#07120f,#111916); color: #fff; border-radius: 42px; padding: 60px; text-align: center; box-shadow: var(--shadow); }
.gx-preview .cta-box h2 { max-width: 850px; margin: 0 auto; color: #fff !important; }
.gx-preview .cta-box p { color: rgba(255,255,255,.72); max-width: 740px; margin: 18px auto 0; font-size: 18px; line-height: 1.65; font-weight: 550; }
.gx-preview .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.gx-preview .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 23px; border-radius: 999px; text-decoration: none; border: 1px solid transparent; font-weight: 700; letter-spacing: -.02em; cursor: pointer; transition: .16s; }
.gx-preview .btn-primary { background: var(--lime); color: var(--black); box-shadow: 0 16px 42px rgba(204,236,68,.24); }
.gx-preview .btn-primary:hover { transform: translateY(-2px); color: var(--black); }
.gx-preview .btn-secondary { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.gx-preview .btn-secondary:hover { color: #fff; border-color: var(--lime); }

/* Team panel + feature ticks */
.gx-preview .feature-ticks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gx-preview .feature-ticks li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: rgba(31,42,40,.82); font-weight: 400; line-height: 1.55; }
.gx-preview .feature-ticks li b { font-weight: 600; color: var(--ink); }
.gx-preview .feature-ticks .tick { flex: 0 0 auto; color: var(--lime-deep); font-size: 13px; font-weight: 700; margin-top: 1px; width: auto; height: auto; border-radius: 0; background: none; display: inline; }
.gx-preview .cf-feature-ticks li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.gx-preview .cf-feature-ticks .feature-line { min-width: 0; }
.gx-preview .cf-feature-ticks .feature-line b { display: inline; }
.gx-preview .team-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(255,255,255,.92), rgba(255,255,255,.98)),
        repeating-linear-gradient(90deg, rgba(92,112,80,.11) 0 1px, transparent 1px 168px),
        repeating-linear-gradient(0deg, rgba(92,112,80,.09) 0 1px, transparent 1px 118px);
    border: 1px solid #dfe7d9;
    border-radius: 24px;
    padding: 18px;
    color: #202321;
    box-shadow: 0 24px 64px rgba(7,18,15,.14);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gx-preview .team-panel::before,
.gx-preview .team-panel::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    height: 70px;
    border: 2px solid rgba(255,255,255,.78);
    border-color: rgba(255,255,255,.78) transparent transparent transparent;
    border-radius: 50%;
    pointer-events: none;
}
.gx-preview .team-panel::before { top: 18px; transform: rotate(-2deg); }
.gx-preview .team-panel::after { top: 128px; transform: rotate(3deg); opacity: .72; }
.gx-preview .tp-head,
.gx-preview .tp-assign-card,
.gx-preview .tp-grid { position: relative; z-index: 1; }
.gx-preview .tp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.gx-preview .tp-kicker { display: block; color: var(--lime-deep); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; }
.gx-preview .tp-head h4 { margin: 0; font-size: 22px; line-height: 1.08; letter-spacing: 0; font-weight: 850; color: #111; }
.gx-preview .tp-period { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #f4f6f0; border: 1px solid #e1e7dc; color: #687069; font-size: 11px; font-weight: 850; white-space: nowrap; }
.gx-preview .tp-assign-card { background: #fff; border: 1px solid #e5ebdf; border-radius: 18px; padding: 14px; box-shadow: 0 16px 42px rgba(7,18,15,.08); margin-bottom: 12px; }
.gx-preview .tp-assign-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.gx-preview .tp-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid #dfe4dc; background: #fff; color: #111; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 22px rgba(7,18,15,.06); }
.gx-preview .tp-action.primary { background: #050705; color: #fff; border-color: #050705; }
.gx-preview .tp-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; border-radius: 15px; background: #f6f7f4; }
.gx-preview .tp-ticket-main { min-width: 0; }
.gx-preview .tp-ticket-main b { display: block; color: #232523; font-size: 15px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-preview .tp-ticket-main span { display: block; margin-top: 2px; color: #757d75; font-size: 11px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-preview .tp-assigned { display: flex; align-items: center; gap: 7px; color: #566058; font-size: 11px; font-weight: 700; }
.gx-preview .tp-assigned .fa-arrow-right { color: #9aa39a; font-size: 10px; }
.gx-preview .tp-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(210px, .82fr); gap: 12px; }
.gx-preview .tp-card { background: rgba(255,255,255,.94); border: 1px solid #e5ebdf; border-radius: 16px; padding: 12px; box-shadow: 0 14px 36px rgba(7,18,15,.06); }
.gx-preview .tp-card-title { color: #747d74; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; }
.gx-preview .tp-table { display: grid; gap: 6px; }
.gx-preview .tp-row { display: grid; grid-template-columns: minmax(118px, 1.3fr) .45fr .58fr .66fr .5fr; align-items: center; gap: 8px; min-height: 42px; padding: 6px 9px; border-radius: 11px; background: #f7f8f5; color: #202321; font-size: 12px; font-weight: 850; }
.gx-preview .tp-row.tp-th { min-height: 24px; padding-block: 0; background: transparent; color: #8a938b; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gx-preview .tp-agent { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gx-preview .tp-agent b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #202321; }
.gx-preview .tp-agent em { padding: 3px 6px; border-radius: 999px; background: rgba(204,236,68,.38); color: var(--lime-deep); font-style: normal; font-size: 9px; font-weight: 950; }
.gx-preview .tp-row .good { color: var(--lime-deep); }
.gx-preview .tp-avatar,
.gx-preview .tp-miniav {
    position: relative;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #d8c8ff;
    color: #202321;
    overflow: visible;
    font-weight: 950;
}
.gx-preview .tp-avatar { width: 30px; height: 30px; font-size: 11px; }
.gx-preview .tp-miniav { width: 28px; height: 28px; border: 2px solid #fff; font-size: 10px; box-shadow: 0 4px 12px rgba(7,18,15,.12); }
.gx-preview .tp-avatar img,
.gx-preview .tp-miniav img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.gx-preview .tp-avatar i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #34d36b; border: 2px solid #fff; }
.gx-preview .tp-avatar.amber i { background: #ffd15c; }
.gx-preview .tp-avatar.ai,
.gx-preview .tp-miniav.ai { background: rgba(204,236,68,.35); }
.gx-preview .tp-routes { display: flex; flex-direction: column; }
.gx-preview .tp-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 13px; background: #f7f8f5; min-height: 58px; }
.gx-preview .tp-route + .tp-route { margin-top: 8px; }
.gx-preview .tp-route b { display: block; color: #202321; font-size: 13px; font-weight: 700; }
.gx-preview .tp-route small { display: block; color: #747d74; font-size: 11px; font-weight: 800; margin-top: 2px; }
.gx-preview .tp-src { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: #edf2e8; color: #111; }
.gx-preview .tp-src.whatsapp { color: #21c063; background: #e9f8ee; }
.gx-preview .tp-src.youcan img { width: 20px; height: 20px; object-fit: contain; }
.gx-preview .tp-src.shopify { color: #5f8f22; background: rgba(204,236,68,.25); }
.gx-preview .tp-stack { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; min-width: 58px; }
.gx-preview .tp-stack .tp-miniav { margin-left: -9px; }
@container (max-width: 560px) {
    .gx-preview .team-panel { padding: 14px; border-radius: 20px; }
    .gx-preview .tp-head h4 { font-size: 18px; }
    .gx-preview .tp-grid { grid-template-columns: 1fr; }
    .gx-preview .tp-assign-actions { gap: 8px; }
    .gx-preview .tp-action { min-height: 38px; padding-inline: 13px; font-size: 12px; }
    .gx-preview .tp-ticket { grid-template-columns: auto minmax(0, 1fr); }
    .gx-preview .tp-assigned { grid-column: 1 / -1; justify-self: end; }
    .gx-preview .tp-row { grid-template-columns: minmax(96px, 1.25fr) .44fr .62fr .48fr; }
    .gx-preview .tp-row > :nth-child(3) { display: none; }
}
@container (max-width: 390px) {
    .gx-preview .tp-head { align-items: flex-start; flex-direction: column; }
    .gx-preview .tp-period { align-self: flex-start; }
    .gx-preview .tp-row { grid-template-columns: minmax(92px, 1.35fr) .48fr .58fr; }
    .gx-preview .tp-row > :nth-child(5) { display: none; }
}

/* ===== Inbox + Team two-column stepper (reuses .lc-wf player + .mock-panel) ===== */
.gx-preview .v2it { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.45fr); gap: 42px; align-items: center; }
.gx-preview .v2it-steps { display: flex; flex-direction: column; gap: 14px; }
.gx-preview .v2it-copy { margin-bottom: 8px; }
.gx-preview .v2it-copy h2 { margin: 0; }
.gx-preview .v2it-copy .section-text { text-align: start; margin-inline: 0; max-width: none; }
.gx-preview .v2it-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; text-align: start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; cursor: pointer; transition: background .2s, box-shadow .2s, border-color .2s; overflow: hidden; }
.gx-preview .v2it-step .v2it-ix { font-weight: 700; font-size: 13px; color: #aab4ab; width: 34px; height: 34px; border-radius: 10px; background: #f3f5f0; display: grid; place-items: center; flex: 0 0 34px; transition: .2s; }
.gx-preview .v2it-step h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; color: var(--ink); font-weight: 700; }
.gx-preview .v2it-step p { margin: 0; font-size: 13.5px; line-height: 1.7; color: rgba(31,42,40,.72); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.gx-preview .v2it-step.active { background: rgba(204,236,68,.08); border-color: rgba(204,236,68,.42); box-shadow: var(--soft); }
.gx-preview .v2it-step.active .v2it-ix { background: var(--lime); color: #172017; }
.gx-preview .v2it-step.active p { max-height: 180px; opacity: 1; margin-top: 8px; }
.gx-preview .v2it-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(204,236,68,.2); opacity: 0; }
.gx-preview .v2it-step.active .v2it-bar { opacity: 1; }
.gx-preview .v2it-step.active .v2it-bar::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: 0; background: var(--lime); animation: v2wffill 6s linear forwards; }
/* stage: unified backdrop wraps the whole mockup column */
.gx-preview .v2it-stage { position: relative; height: 640px; padding: 26px; container-type: inline-size; }
.gx-preview .v2it-scr { position: absolute; inset: 26px; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .45s, transform .45s cubic-bezier(.34,1.2,.5,1); pointer-events: none; }
.gx-preview .v2it-scr.active { opacity: 1; transform: none; pointer-events: auto; }
.gx-preview .v2it-scr .v2app { width: 100%; height: 100%; }
.gx-preview #v2-inbox-team .v2it-stage {
    height: 600px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.gx-preview #v2-inbox-team .v2it-scr { inset: 18px; }
.gx-preview #v2-inbox-team .v2it-stage {
    --v2it-scale: 1;
    --v2it-stage-h: 600px;
    height: var(--v2it-stage-h);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.gx-preview #v2-inbox-team .v2it-scr {
    inset: 0 auto auto 0;
    width: 820px;
    height: 600px;
    padding: 36px;
    transform-origin: top left;
    transform: translateY(14px) scale(var(--v2it-scale));
}
.gx-preview #v2-inbox-team .v2it-scr[data-screen="0"].active {
    transform: scale(var(--v2it-scale));
    transform-origin: top left;
    display: grid;
    place-items: center;
}
.gx-preview #v2-inbox-team .v2it-scr.active { transform: scale(var(--v2it-scale)); }
.gx-preview .v2it-scr.team { display: grid; place-items: center; }
.gx-preview .v2it-scr.team .team-panel { width: 100%; }
@media (max-width: 980px) {
    .gx-preview .v2it { grid-template-columns: 1fr; gap: 28px; }
    .gx-preview .v2it-stage { height: 680px; }
}
@media (max-width: 560px) {
    .gx-preview .v2it-stage { height: 720px; padding: 16px; }
    .gx-preview .v2it-scr { inset: 16px; }
}

/* Real-app inbox replica */
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-app {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: ltr;
    text-align: left;
    color: #202321;
    background: #fff;
    border: 1px solid #dde4d6;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(7,18,15,.16);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-top {
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: #171717;
    color: rgba(255,255,255,.78);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-top.logo-only { justify-content: flex-start; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-logo { width: 120px; height: 24px; object-fit: contain; object-position: left center; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-search {
    width: min(34cqw, 300px);
    margin-left: auto;
    margin-right: auto;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.10);
    background: #2a2a2a;
    color: #9c9c9c;
    font-size: 10.5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; font-size: 13px; color: #e6e6e6; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-user { display: flex; align-items: center; gap: 7px; min-width: 94px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-user-ic {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(204,236,68,.42);
    color: #dceaa2;
    background: rgba(255,255,255,.04);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-user b { display: block; color: #fff; font-size: 10.5px; line-height: 1; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-user small { display: block; color: #d7ff5d; font-size: 9px; font-weight: 700; line-height: 1.2; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-app .v2app-body { display: flex; flex: 1; min-height: 0; background: #fff; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-rail {
    width: 54px;
    flex: 0 0 54px;
    padding: 8px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border-right: 1px solid #e8ede3;
    background: #fff;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-nav { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #78827a; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-nav > span {
    width: 34px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 13px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-nav small { max-width: 48px; font-size: 7.4px; line-height: 1.1; font-weight: 700; text-align: center; white-space: nowrap; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-nav.active { color: #101510; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-nav.active > span { background: #ccec44; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-nav .v2rail-ic { width: 15px; height: 15px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folders {
    width: 132px;
    flex: 0 0 132px;
    padding: 15px 8px;
    background: #fff;
    border-right: 1px solid #edf1e8;
    overflow: hidden;
}
.gx-preview #v2-workflow .v2real-folders { width: 144px; flex-basis: 144px; }
.gx-preview #v2-inbox-team .v2it-scr[data-screen="0"] > .v2real-app { width: 520px; height: 492px; max-width: none; overflow: hidden; }
.gx-preview #v2-inbox-team .v2real-app {
    border-radius: 16px;
    border-color: rgba(17, 27, 33, .07);
    box-shadow: var(--float);
}
.gx-preview #v2-inbox-team .team-panel {
    box-shadow: var(--float);
    border-color: rgba(17, 27, 33, .07);
}
.gx-preview #v2-inbox-team .v2real-rail { width: 72px; flex-basis: 72px; }
.gx-preview #v2-inbox-team .v2real-folders { width: 198px; flex-basis: 198px; padding-inline: 12px; }
.gx-preview #v2-inbox-team .v2real-list { flex: 0 0 250px; width: 250px; min-width: 0; }
.gx-preview #v2-inbox-team .v2real-conv { min-height: 61px; padding-inline: 14px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-ftitle { padding: 0 8px 12px; color: #202321; font-size: 13px; font-weight: 700; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    padding: 0 9px;
    margin-bottom: 4px;
    border-radius: 7px;
    color: #4f584f;
    font-size: 11.5px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folder span { display: flex; align-items: center; gap: 8px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folder i { width: 13px; text-align: center; color: #6d7770; font-size: 11px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2folder-av {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px #dfe6d8;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folder b {
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #eef2e9;
    color: #7f897f;
    font-size: 9px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folder.active { background: #f1f5ff; color: #101510; font-weight: 700; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agentbox { margin-top: 13px; padding-top: 10px; border-top: 1px solid #edf1e8; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent-title { padding: 0 8px 7px; color: #8b948d; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 4px 7px;
    border-radius: 7px;
    color: #46514a;
    font-size: 10px;
    font-weight: 800;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent.active { background: #f1f7e8; color: #111; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent.ai { color: #4f7a00; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent b {
    min-width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #eef2e9;
    color: #778178;
    font-size: 8px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #e8eadf;
    color: #526057;
    font-size: 9px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-agent-av.letter { background: #eef2e9; font-weight: 700; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-list {
    width: 200px;
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5ebdf;
    background: #fff;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-lhead { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 14px; color: #111; font-size: 12.5px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-lhead i { color: #667066; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tabs {
    height: 33px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 8px;
    border-bottom: 1px solid #e7ece3;
    color: #8b948d;
    font-size: 9.5px;
    font-weight: 800;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tabs .active {
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid #dfe6d8;
    border-radius: 8px;
    color: #111;
    background: #fff;
    box-shadow: 0 1px 2px rgba(7,18,15,.04);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tabs .toggle {
    width: 28px;
    height: 14px;
    border-radius: 999px;
    background: #cdd7d3;
    position: relative;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tabs .toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-conv { display: flex; gap: 9px; min-height: 58px; padding: 8px 10px; border-bottom: 1px solid #edf1e8; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-conv.active { background: #f1f5ff; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-av {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8eadf;
    color: #526057;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-av.sm { width: 26px; height: 26px; flex-basis: 26px; font-size: 11px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-av.big { width: 36px; height: 36px; flex-basis: 36px; font-size: 16px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-cbody { flex: 1; min-width: 0; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-ctop { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-ctop b { color: #242824; font-size: 11.5px; font-weight: 600; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-ctop span { color: #8d958c; font-size: 8.5px; white-space: nowrap; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-cmsg { margin-top: 2px; color: #4f584f; font-size: 10.2px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tags { display: flex; align-items: center; gap: 3px; margin-top: 4px; min-width: 0; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tags small { font-size: 7.7px; font-weight: 800; color: #59645c; line-height: 1; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tags .pink { color: #fff; background: #ec2e7a; padding: 2px 4px; border-radius: 1px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tags .order-id { color: #667066; background: #eef2e9; padding: 2px 4px; border-radius: 4px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tags .amber { color: #b98200; background: #fff3d2; padding: 2px 5px; border-radius: 4px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tags .green { color: #2d7d32; background: #dff4dc; padding: 2px 5px; border-radius: 4px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 14px;
    height: 13px;
    padding: 1px;
    border-radius: 4px;
    background: #f3f5f0;
    color: #5c665d;
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 14px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2source img { width: 10px; height: 10px; object-fit: contain; display: block; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2source i { color: currentColor; font-size: 10px; line-height: 1; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2source.youcan { background: #fff4f6; color: #d92554; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2source.shopify { background: #eef8e9; color: #74a540; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2assignee {
    width: 15px;
    height: 15px;
    margin-left: auto;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #eef2e9;
    color: #536058;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #dfe6d8;
    font-size: 7px;
    font-weight: 700;
    flex: 0 0 15px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2assignee img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2assignee.ai { background: #dfff3f; padding: 2px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-thread { flex: 1; min-width: 230px; display: flex; flex-direction: column; background: #fff; position: relative; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-thead { height: 40px; flex: 0 0 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-bottom: 1px solid #e5ebdf; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tid { line-height: 1.05; margin-right: auto; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tid b { display: block; color: #303630; font-size: 10.5px; font-weight: 500; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tid span { color: #7d887f; font-size: 8.8px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tid .v2real-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #667166;
    font-size: 8.8px;
    font-weight: 800;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tid .v2real-phone i { color: #25d366; font-size: 9.5px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-chip,
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-done {
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid #e0e7da;
    border-radius: 6px;
    color: #565f57;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-chip.icon { width: 28px; justify-content: center; padding: 0; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2chip-mask {
    width: 14px;
    height: 14px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-chip.assignee { gap: 6px; padding-left: 6px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-chip.assignee img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: block; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-done { color: #9aa29a; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-tbody { flex: 1; min-height: 0; overflow: hidden; padding: 0 0 8px; background: #fff; position: relative; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-chat {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background-color: #efe9df;
    background-image: radial-gradient(rgba(7,18,15,.075) 1px, transparent 1px);
    background-size: 14px 14px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-day {
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #7a8279;
    font-size: 8.5px;
    font-weight: 700;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-msg {
    max-width: 76%;
    padding: 8px 10px 6px;
    border-radius: 10px;
    background: #fff;
    color: #202620;
    font-size: 11.5px;
    line-height: 1.45;
    box-shadow: 0 1px 1px rgba(7,18,15,.06);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-msg span {
    display: block;
    margin-top: 3px;
    color: #7d867c;
    font-size: 8.5px;
    text-align: right;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-msg.in { align-self: flex-start; border-top-left-radius: 3px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-msg.out {
    align-self: flex-end;
    border-top-right-radius: 3px;
    background: #dcf8c6;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-msg.mini { max-width: 60%; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2msg-line { display: flex; align-items: flex-end; gap: 6px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2msg-line.out {
    align-self: flex-end;
    justify-content: flex-end;
    max-width: 82%;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2msg-line .v2real-msg,
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2msg-line .v2real-msg.mini { max-width: none; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2sender-av {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 1px 3px rgba(7,18,15,.16);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2sender-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-system {
    align-self: center;
    width: min(78%, 380px);
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #dceab4;
    border-left: 3px solid #ccec44;
    border-radius: 8px;
    background: rgba(255,255,255,.76);
    color: #2d3d12;
    box-shadow: 0 1px 0 rgba(255,255,255,.84) inset, 0 4px 12px rgba(79,122,0,.10);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-system .v2system-ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #172017;
    color: #ccec44;
    font-size: 11px;
    box-shadow: 0 0 0 3px rgba(204,236,68,.20);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-system b { display: block; font-size: 10.5px; color: #172017; line-height: 1.2; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-system span { display: block; margin-top: 2px; color: #5d6d43; font-size: 9px; line-height: 1.45; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-system em {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: start;
    margin-top: 1px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f3fad2;
    color: #4f7a00;
    font-size: 8.2px;
    font-style: normal;
    font-weight: 700;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-system em img {
    width: 10px;
    height: 10px;
    object-fit: contain;
    display: block;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-compose {
    flex: 0 0 auto;
    padding: 0 12px 7px;
    border-top: 1px solid #e5ebdf;
    background: #fff;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 34px;
    color: #9aa29a;
    font-size: 10.5px;
    font-weight: 800;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-tabs span { height: 34px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-tabs .active { color: #111; border-bottom-color: #111; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-box {
    min-height: 76px;
    border: 1px solid #dfe6dd;
    border-radius: 9px;
    background: #fff;
    padding: 11px 12px 9px;
    display: flex;
    flex-direction: column;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-placeholder {
    color: #8a938a;
    font-size: 10.5px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-tools {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: auto;
    color: #3e473f;
    font-size: 12px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2compose-tools button {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #d9dee6;
    color: #8b96a5;
    font-size: 12px;
    padding: 0;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2send-mask {
    width: 15px;
    height: 15px;
    display: block;
    background: #111;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media {
    margin: 0 0 8px;
    overflow: hidden;
    border: 1px solid #e7efb3;
    background: #fff;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media.van { height: 74px; border-top: 0; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media.van img { width: 100%; height: 120%; object-fit: cover; object-position: center 58%; filter: saturate(1.06); }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-meta {
    height: 26px;
    margin: -8px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    background: rgba(229,242,113,.72);
    color: #50604d;
    font-size: 8.5px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-meta b { color: #293229; font-size: 9px; font-weight: 600; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio {
    height: 64px;
    margin: 0 0 8px;
    padding: 14px 14px 9px;
    border: 1px solid #e7efb3;
    border-radius: 6px;
    background: #fff;
    position: relative;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio .play {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f26f;
    color: #596257;
    font-size: 10px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio .bar { position: absolute; left: 55px; right: 18px; top: 23px; height: 5px; border-radius: 999px; background: #e3e4df; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio .bar i { position: absolute; left: 0; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #d9ef63; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio .time { position: absolute; top: 43px; color: #6e766d; font-size: 10px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio .left { left: 55px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-audio .right { right: 17px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media.product { height: 265px; display: grid; place-items: center; border-radius: 6px 6px 0 0; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media .shirt {
    width: min(72%, 280px);
    aspect-ratio: 1 / 1.12;
    position: relative;
    display: grid;
    place-items: center;
    background: #99db23;
    color: #202823;
    font-weight: 700;
    font-size: 21px;
    line-height: .95;
    text-align: center;
    box-shadow: inset 0 -24px 34px rgba(70,120,17,.12), 0 8px 22px rgba(7,18,15,.09);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media .shirt::before,
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media .shirt::after {
    content: "";
    position: absolute;
    top: 26px;
    width: 74px;
    height: 92px;
    background: #99db23;
    box-shadow: inset 0 -16px 22px rgba(70,120,17,.10);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media .shirt::before { left: -55px; transform: skewY(17deg); }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media .shirt::after { right: -55px; transform: skewY(-17deg); }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media .shirt span { transform: translateY(-3px); }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-jump {
    position: absolute;
    right: -1px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d5d6d1;
    color: #777b75;
    font-size: 12px;
    box-shadow: 0 0 0 5px #fff;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-jump.top { top: 73px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-jump.mid { top: 174px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-side {
    width: 205px;
    flex: 0 0 205px;
    padding: 15px 10px 12px;
    border-left: 1px solid #e5ebdf;
    background: #fff;
    overflow: hidden;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-profile { display: flex; align-items: flex-start; gap: 9px; padding-bottom: 18px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-profile b { display: block; color: #293029; font-size: 12px; margin-bottom: 3px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-profile span { display: block; color: #647066; font-size: 8.8px; line-height: 1.45; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-profile small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eceee2;
    color: #636b5d;
    font-size: 8px;
    font-weight: 700;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-order-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-order-title b,
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-active-title,
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-labels b,
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-notes b { color: #111; font-size: 11px; font-weight: 700; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-order-title button {
    height: 26px;
    border: 1px solid #cbd3c9;
    border-radius: 7px;
    background: #fff;
    color: #151a15;
    font-size: 9.2px;
    font-weight: 700;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-active-title { margin-bottom: 7px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-active-title span { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 50%; background: #e9eddf; color: #687260; font-size: 8px; margin-left: 4px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-card { position: relative; border-radius: 7px; padding: 9px 0px 12px; margin-bottom: 18px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh { display: flex; align-items: center; gap: 5px; color: #242924; font-size: 10px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh b { font-size: 11px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh i { margin-left: auto; color: #d4d9d1; font-size: 9px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh i + i { margin-left: 0; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh span { padding: 2px 5px; border-radius: 4px; font-size: 7.2px; font-weight: 700; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh .green { background: #e0f3be; color: #4f8e00; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-oh .amber { background: #fff4d0; color: #c58a00; margin-left: auto; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-date { margin-top: 4px; color: #707b70; font-size: 8.6px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-obtns { display: flex; gap: 8px; margin: 14px 0 12px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-obtns button {
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 5px;
    padding: 0 11px;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-obtns .ok { color: #4d8b05; border: 1px solid #bce08b; background: #f2fbdf; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-obtns .bad { color: #d0524b; border: 1px solid #f0c5c2; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2ok-labels {
    display: inline-grid;
    min-width: 48px;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2ok-labels span {
    grid-area: 1 / 1;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2ok-confirmed {
    opacity: 0;
    transform: translateY(4px);
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-field { display: grid; grid-template-columns: 55px 1fr 12px; align-items: center; gap: 5px; min-height: 25px; color: #1e241f; font-size: 9px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-field span { color: #687268; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-field b { font-size: 9.5px; font-weight: 800; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-field i { color: #d9ded6; font-size: 8px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-add {
    width: 100%;
    height: 34px;
    margin-top: 12px;
    border: 1px solid #c5c5c5;
    border-radius: 6px;
    background: #ffffffff;
    /* color: #0b9690; */
    font-size: 10px;
    font-weight: 500;
}
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-labels { margin-top: 8px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-labels span { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 10px; border: 1px solid #e4e9df; border-radius: 6px; color: #4f584f; font-size: 9px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-labels i { color: #d7ec55; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-notes { margin-top: 22px; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-notes b { display: flex; justify-content: space-between; }
.gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-notes span { display: block; margin-top: 11px; color: #7e877e; font-size: 9px; }
@media (max-width: 1120px) {
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folders { display: none; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-thread { min-width: 210px; }
}
@media (max-width: 980px) {
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folders { display: block; }
}
@media (max-width: 760px) {
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-side { display: none; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-list { width: 180px; flex-basis: 180px; }
}
@media (max-width: 560px) {
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-logo { width: 92px; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-search { display: none; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-actions { gap: 10px; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-user { min-width: 0; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-user span:last-child { display: none; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-rail,
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-folders,
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-list { display: none; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-thread { min-width: 0; }
    .gx-preview :is(#v2-inbox-team, #v2-workflow, #mx-team) .v2real-media.product { height: 340px; }
}
.gx-preview #v2-inbox-team .v2real-logo { width: 120px; }
.gx-preview #v2-inbox-team .v2real-search { display: flex; }
.gx-preview #v2-inbox-team .v2real-actions { gap: 16px; }
.gx-preview #v2-inbox-team .v2real-user { min-width: 94px; }
.gx-preview #v2-inbox-team .v2real-user span:last-child { display: block; }
.gx-preview #v2-inbox-team .v2real-rail { display: flex; width: 72px; flex-basis: 72px; }
.gx-preview #v2-inbox-team .v2real-folders { display: block; width: 198px; flex-basis: 198px; padding-inline: 12px; }
.gx-preview #v2-inbox-team .v2real-list { display: flex; width: 250px; flex-basis: 250px; }
.gx-preview #v2-inbox-team .v2real-thread { min-width: 230px; }
.gx-preview #v2-inbox-team .v2real-side { display: block; }
.gx-preview #v2-inbox-team .v2real-media.product { height: 265px; }

/* Shared split */
.gx-preview .split-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: center; }
.gx-preview .split-grid.reverse > .split-copy { order: 2; }
/* Confirmation section ONLY: narrower copy so the layered order cards show more (desktop) */
@media (min-width: 981px) {
    .gx-preview #v2-confirmation .split-grid.reverse { grid-template-columns: 1.18fr 0.82fr; }
}
.gx-preview .split-copy h2 { margin: 0; }
.gx-preview .split-copy .section-text { text-align: start; margin-inline: 0; }
.gx-preview .split-copy .feature-ticks li { align-items: flex-start; }

/* WhatsApp chat */
.gx-preview .wa { background-color: #ECE5DD; background-image: radial-gradient(rgba(11,31,28,.06) 1px, transparent 1px); background-size: 14px 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--soft); }
.gx-preview .wa-head { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: #075E54; color: #fff; }
.gx-preview .wa-av { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: 0 0 28px; }
.gx-preview .wa-name { font-size: 12px; font-weight: 800; line-height: 1.1; }
.gx-preview .wa-sub { font-size: 9.5px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.gx-preview .wa-dot { width: 6px; height: 6px; border-radius: 50%; background: #a9e000; display: inline-block; }
.gx-preview .wa-body { padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.gx-preview .wa-b { max-width: 86%; padding: 7px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.06); position: relative; color: #101510; }
.gx-preview .wa-in { background: #fff; border-start-start-radius: 3px; margin-inline-end: auto; }
.gx-preview .wa-out { background: #DCF8C6; border-start-end-radius: 3px; margin-inline-start: auto; }
.gx-preview .wa-t { font-size: 9px; color: #64706a; text-align: end; margin-top: 3px; }
.gx-preview .wa-note { font-size: 10px; font-weight: 800; color: var(--lime-deep); }
.gx-preview .wa-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gx-preview .wa-act { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #2d3a32; }
.gx-preview .wa-act.send { background: var(--lime-deep); color: #fff; border-color: transparent; }
.gx-preview .wa-b.muted { background: #f3f1ec; color: #8a948b; font-style: italic; box-shadow: none; }

/* faux app screenshot (tracking) */
.gx-preview .shot { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); width: 100%; }
.gx-preview .shot-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f3f5f0; border-bottom: 1px solid var(--line); }
.gx-preview .shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7ddd3; display: block; }
.gx-preview .shot-bar .lbl { margin-inline-start: auto; font-size: 11px; font-weight: 800; color: #8a948b; letter-spacing: .04em; }
.gx-preview .shot-scr { padding: 16px; background: #fff; }
.gx-preview .trow { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 7px 0; }
.gx-preview .trow .td { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); flex: 0 0 14px; margin-top: 2px; border: 3px solid #eaff86; }
.gx-preview .trow.dim .td { background: #d7ddd3; border-color: #eef0ec; }
.gx-preview .trow b { font-weight: 800; display: block; }
.gx-preview .trow span { color: var(--muted); }
.gx-preview .prow { display: flex; justify-content: space-between; font-size: 12.5px; padding: 8px 0; border-top: 1px solid var(--line); }
.gx-preview .prow b { font-weight: 800; }

/* Confirmation */
.gx-preview .conf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.gx-preview .neworder { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--soft); overflow: hidden; }
.gx-preview .neworder .nh { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: #fbfcf5; }
.gx-preview .neworder .nh b { font-size: 12.5px; color: var(--ink); }
.gx-preview .neworder .pend { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; color: #9a6a00; background: #fff3d6; border-radius: 999px; padding: 3px 9px; }
.gx-preview .neworder .pend .d { width: 6px; height: 6px; border-radius: 50%; background: #f0b400; }
.gx-preview .conf-msg { margin: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.gx-preview .conf-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 10px; }
.gx-preview .conf-btns span { text-align: center; font-size: 11px; font-weight: 800; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line); }
.gx-preview .conf-btns .c { background: var(--lime-deep); color: #fff; border-color: transparent; }
.gx-preview .conf-confirmed { margin: 0 13px 13px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--lime-deep); }
.gx-preview .conf-confirmed .tk { width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: #172017; display: grid; place-items: center; font-size: 11px; }
.gx-preview .sched { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--soft); }
.gx-preview .sched .sh { font-weight: 700; font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.gx-preview .sched .day { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.gx-preview .sched .day:last-of-type { border: 0; }
.gx-preview .sched .day .hrs { color: var(--lime-deep); font-weight: 800; margin-inline-start: auto; margin-inline-end: 12px; }
.gx-preview .sched .day.off .hrs { color: #b0b8b0; }
.gx-preview .sched .tg { width: 36px; height: 20px; border-radius: 999px; background: var(--lime); position: relative; flex: 0 0 36px; }
.gx-preview .sched .tg::after { content: ""; position: absolute; inset-inline-end: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.gx-preview .sched .day.off .tg { background: #dfe3da; }
.gx-preview .sched .day.off .tg::after { inset-inline-end: auto; inset-inline-start: 2px; }
.gx-preview .sched .ooo { margin-top: 13px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 12px; color: #46514a; }

/* ===== Confirmation flow mock (inbox → chat → order) — scales with column via container queries ===== */
/* Cards float on the page. align-self:stretch matches the copy column; the fan
   (cf-stage, sized to the chat) stays centered so nothing overflows. */
.gx-preview .cf-mock {
    --cf-inbox-rotate: -3deg;
    --cf-order-rotate: 3deg;
    --cf-inbox-hover-rotate: -6deg;
    --cf-order-hover-rotate: 6deg;
    --cf-inbox-origin: 100% 100%;
    --cf-order-origin: 0% 100%;
    --cf-inbox-hover-x: -4cqw;
    --cf-order-hover-x: 4cqw;
    position: relative; container-type: inline-size; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 560px; margin-inline: auto; overflow: visible;
    padding: 5cqw 3cqw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.gx-preview.v2-rtl .cf-mock,
.gx-preview[dir="rtl"] .cf-mock {
    --cf-inbox-rotate: 3deg;
    --cf-order-rotate: -3deg;
    --cf-inbox-hover-rotate: 6deg;
    --cf-order-hover-rotate: -6deg;
    --cf-inbox-origin: 0% 100%;
    --cf-order-origin: 100% 100%;
    --cf-inbox-hover-x: 4cqw;
    --cf-order-hover-x: -4cqw;
}
/* Stage = the fan area; height follows the in-flow chat, centered in the panel */
.gx-preview .cf-stage { position: relative; width: 100%; }
.gx-preview .cf-card { background: #fff; border: 1px solid var(--line); border-radius: 3.6cqw; }
/* Chat = centerpiece (in flow, defines height) */
.gx-preview .cf-chat { position: relative; z-index: 4; width: 54cqw; margin-inline: auto; overflow: hidden; box-shadow: 0 2.2cqw 6.4cqw rgba(17,27,33,.12), 0 .35cqw 1cqw rgba(17,27,33,.05); transition: transform .4s ease; }
.gx-preview .cf-chead { display: flex; align-items: center; gap: 1.6cqw; padding: 2.1cqw 2.4cqw; background: #0c3f2e; color: #fff; }
.gx-preview .cf-back { font-size: 2.2cqw; color: rgba(255,255,255,.85); }
.gx-preview .cf-av-lg { width: 6cqw; height: 6cqw; border-radius: 50%; background: linear-gradient(135deg,#9ed70d,#6fae00); color: #11260a; display: grid; place-items: center; font-weight: 800; font-size: 2.6cqw; flex: 0 0 auto; }
.gx-preview .cf-cname { line-height: 1.1; margin-inline-end: auto; }
.gx-preview .cf-cname b { display: block; font-size: 2.3cqw; color: #fff; }
.gx-preview .cf-cname small { display: flex; align-items: center; gap: 1cqw; font-size: 1.75cqw; color: rgba(255,255,255,.8); }
.gx-preview .cf-cdot { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #8ef000; }
.gx-preview .cf-cic { font-size: 2.1cqw; color: rgba(255,255,255,.85); margin-inline-start: 2cqw; }
.gx-preview .cf-cbody { padding: 2.4cqw; display: flex; flex-direction: column; gap: 1.6cqw; background: #fff; }
.gx-preview .cf-bub { position: relative; max-width: 84%; padding: 1.6cqw 2cqw; border-radius: 2.6cqw; font-size: 2.05cqw; line-height: 1.5; color: #16201a; box-shadow: 0 .8cqw 1.8cqw rgba(0,0,0,.05); }
.gx-preview .cf-bub.cf-in { background: #fff; border: 1px solid #eef0ec; margin-inline-end: auto; border-start-start-radius: .8cqw; }
.gx-preview .cf-bub.cf-out { background: #DCF8C6; margin-inline-start: auto; border-start-end-radius: .8cqw; }
.gx-preview .cf-chat .cf-t { display: block; text-align: end; font-size: 1.6cqw; color: #9aa49c; margin-top: .8cqw; }
.gx-preview .cf-acts { display: flex; flex-wrap: wrap; gap: 1.2cqw; margin-top: 1.6cqw; }
.gx-preview .cf-act { display: inline-flex; align-items: center; gap: .9cqw; font-size: 1.8cqw; font-weight: 700; padding: 1.1cqw 2cqw; border-radius: 1.8cqw; border: 1px solid var(--line); background: #fff; color: #2d3a32; }
.gx-preview .cf-act.ok { color: #2e7d32; border-color: #c2e6c4; }
.gx-preview .cf-act.no { color: #d23f3f; border-color: #f0cccc; }
.gx-preview .cf-cinput { display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2.4cqw; border-top: 1px solid var(--line); background: #fff; color: #9aa49c; font-size: 2.1cqw; }
.gx-preview .cf-ph { flex: 1; font-size: 1.95cqw; color: #98a29a; text-align: start; }
.gx-preview .cf-mic { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 2.2cqw; flex: 0 0 auto; }
/* Inbox card (start side = left in LTR, right in RTL) */
.gx-preview .cf-inbox { position: absolute; z-index: 1; top: 4cqw; inset-inline-start: 0; width: 40cqw; padding: 2.2cqw; transform: rotate(var(--cf-inbox-rotate)) scale(.96); transform-origin: var(--cf-inbox-origin); box-shadow: 0 1.6cqw 4.4cqw rgba(17,27,33,.10), 0 .25cqw .7cqw rgba(17,27,33,.04); transition: transform .4s ease, box-shadow .4s ease; }
.gx-preview .cf-inbox-head { display: flex; align-items: center; gap: 1.6cqw; }
.gx-preview .cf-av { width: 5.2cqw; height: 5.2cqw; border-radius: 1.6cqw; background: var(--lime); color: #16250a; display: grid; place-items: center; font-weight: 800; font-size: 2.3cqw; flex: 0 0 auto; }
.gx-preview .cf-id { font-size: 2.4cqw; font-weight: 800; color: var(--ink); }
.gx-preview .cf-ibadge { font-size: 1.7cqw; font-weight: 800; padding: .7cqw 1.6cqw; border-radius: 999px; background: #fff3d6; color: #9a6a00; }
.gx-preview .cf-time { margin-inline-start: auto; font-size: 1.8cqw; color: #9aa49c; }
.gx-preview .cf-inbox-row { display: flex; align-items: center; gap: 1.4cqw; margin-top: 1.7cqw; font-size: 2cqw; color: #46514a; }
.gx-preview .cf-inbox-row i { width: 2.6cqw; text-align: center; color: #9aa49c; font-size: 2cqw; }
.gx-preview .cf-price { margin-inline-start: auto; color: var(--ink); font-weight: 800; white-space: nowrap; }
.gx-preview .cf-inbox-prod { display: flex; align-items: center; gap: 1.8cqw; margin-top: 1.8cqw; padding-top: 1.8cqw; border-top: 1px solid var(--line); font-size: 1.95cqw; color: #46514a; line-height: 1.35; }
.gx-preview .cf-thumb { width: 7.6cqw; height: 7.6cqw; border-radius: 1.8cqw; background: #f1f3ee; display: grid; place-items: center; color: #8a948b; font-size: 3.4cqw; flex: 0 0 auto; }
.gx-preview .cf-inbox-foot { display: flex; gap: 1.8cqw; margin-top: 2cqw; }
.gx-preview .cf-fbtn { width: 6cqw; height: 6cqw; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: #6fae00; font-size: 2.3cqw; }
/* Order panel (end side = right in LTR, left in RTL) */
.gx-preview .cf-order { position: absolute; z-index: 5; bottom: 4cqw; inset-inline-end: 0; width: 40cqw; padding: 2.2cqw; transform: rotate(var(--cf-order-rotate)) scale(.96); transform-origin: var(--cf-order-origin); box-shadow: 0 1.6cqw 4.4cqw rgba(17,27,33,.11), 0 .25cqw .7cqw rgba(17,27,33,.04); transition: transform .4s ease, box-shadow .4s ease; }
.gx-preview .cf-otitle { font-size: 2.6cqw; font-weight: 700; color: var(--ink); }
.gx-preview .cf-status { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1.8cqw; }
.gx-preview .cf-pill { font-size: 1.9cqw; font-weight: 800; padding: 1cqw 2.2cqw; border-radius: 999px; }
.gx-preview .cf-pill.new { background: #fff3d6; color: #9a6a00; }
.gx-preview .cf-pill.done { background: rgba(204,236,68,.35); color: var(--lime-deep); }
.gx-preview .cf-arrow { color: #c2cbc0; font-size: 2.1cqw; }
.gx-preview .cf-oprod { display: flex; gap: 2cqw; margin-top: 2cqw; padding-bottom: 2cqw; border-bottom: 1px solid var(--line); }
.gx-preview .cf-oinfo { display: flex; flex-direction: column; gap: .5cqw; font-size: 2cqw; color: #46514a; }
.gx-preview .cf-oinfo b { font-size: 2.05cqw; color: var(--ink); }
.gx-preview .cf-oprice { font-weight: 800; color: var(--ink); }
.gx-preview .cf-oaddr { display: flex; align-items: center; gap: 1cqw; font-size: 1.85cqw; color: #8a948b; }
.gx-preview .cf-timeline { margin-top: 2cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
.gx-preview .cf-tl { display: flex; align-items: center; gap: 1.6cqw; font-size: 2cqw; color: #46514a; }
.gx-preview .cf-tlic { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #f1f3ee; display: grid; place-items: center; color: #8a948b; font-size: 2.3cqw; flex: 0 0 auto; }
.gx-preview .cf-tltx { flex: 1; }
.gx-preview .cf-tl .cf-t { margin-inline-start: auto; font-size: 1.8cqw; color: #9aa49c; }
.gx-preview .cf-tl.ok { background: rgba(204,236,68,.20); border-radius: 2.2cqw; padding: 1.2cqw 1.8cqw; margin: 0 -1.8cqw; }
.gx-preview .cf-tl.ok .cf-tlic { background: var(--lime); color: #16250a; }
.gx-preview .cf-tl.ok .cf-tltx { color: var(--lime-deep); font-weight: 800; }
/* connection nodes — hidden in the layered/stacked look */
.gx-preview .cf-node { display: none; }
/* gentle fan-open on scroll reveal */
.gx-preview .cf-mock.is-in-view .cf-chat { transform: translateY(-1cqw); }
.gx-preview .cf-mock.is-in-view .cf-inbox { transform: rotate(var(--cf-inbox-hover-rotate)) translate(var(--cf-inbox-hover-x), -1cqw) scale(.96); }
.gx-preview .cf-mock.is-in-view .cf-order { transform: rotate(var(--cf-order-hover-rotate)) translate(var(--cf-order-hover-x), 1cqw) scale(.96); }
@container (max-width: 300px) {
    .gx-preview .cf-chat { width: 100%; box-shadow: var(--soft); }
    .gx-preview .cf-inbox, .gx-preview .cf-order { position: static; width: 100%; margin-top: 14px; transform: none; box-shadow: var(--soft); }
    .gx-preview .cf-mock.is-in-view .cf-inbox, .gx-preview .cf-mock.is-in-view .cf-order, .gx-preview .cf-mock.is-in-view .cf-chat { transform: none; }
}

/* Follow-ups: CSS-only outbound support chat animation */
.gx-preview .fu-stage {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    padding: 8px 4px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.gx-preview .wafu {
    --wafu-cycle: 12s;
    width: 100%;
    max-width: 500px;
    min-height: 460px;
    margin-inline: auto;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(17, 27, 33, .06);
    box-shadow: var(--float);
    background-color: #eef2ee;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        url('../images/background/chat-background-lime.png');
    background-size: cover;
    background-position: left;
    font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left;
}

.gx-preview .wafu-body {
    min-height: 460px;
    padding: clamp(18px, 4vw, 32px);
    display: flex; flex-direction: column; gap: 0px;
    justify-content: flex-start;
}

.gx-preview .wafu-row {
    display: flex; align-items: flex-end; gap: 10px;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}
.gx-preview .wafu-row-one,
.gx-preview .wafu-row-two {
    margin-inline-start: auto;
    flex-direction: row-reverse;
}
.gx-preview .wafu-row-three { margin: 14px 0 8px; }
.gx-preview .wafu.is-animating .wafu-row-one { animation: wafuMsgOne var(--wafu-cycle) cubic-bezier(.22,1,.36,1) both infinite; }
.gx-preview .wafu.is-animating .wafu-row-two { animation: wafuMsgTwo var(--wafu-cycle) cubic-bezier(.22,1,.36,1) both infinite; }
.gx-preview .wafu.is-animating .wafu-row-three { animation: wafuMsgThree var(--wafu-cycle) cubic-bezier(.22,1,.36,1) both infinite; }

.gx-preview .wafu-avatar {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: #d8ddd9;
    background-image: url('../images/go_ai_agent.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border: 1px solid rgb(65 65 65 / 90%);
    box-shadow: 0 8px 18px rgba(7,18,15,.18);
}
.gx-preview .wafu-client-avatar {
    background-color: #e9ece8;
    background-image: url('../images/avatars/whatsapp-fatima.png');
}
.gx-preview .wafu-content {
    max-width: min(72%, 390px);
    display: flex; flex-direction: column; align-items: flex-start;
}
.gx-preview .wafu-row-one .wafu-content,
.gx-preview .wafu-row-two .wafu-content {
    align-items: flex-end;
}
.gx-preview .wafu-client-content {
    align-items: flex-start;
}
.gx-preview .wafu-msg {
    position: relative;
    padding: 14px 16px;
    border-radius: 18px 18px 6px 18px;
    background: #fff;
    color: #2f3437;
    border: 1px solid rgba(17,24,39,.10);
    font-size: 11.5px;
    line-height: 1.55;
    letter-spacing: 0;
    box-shadow: 0 10px 28px rgba(12,18,16,.12), 0 1px 0 rgba(255,255,255,.72) inset;
    word-break: normal;
    overflow-wrap: anywhere;
    text-align: start;
    direction: inherit;
}
.gx-preview .wafu-msg b { font-weight: 800; color: #22282a; }
.gx-preview .wafu-client-msg {
    background: #e4f7dc;
    color: #294431;
    border-color: rgba(39,83,49,.16);
    border-radius: 18px 18px 18px 6px;
}
.gx-preview .wafu-sep {
    align-self: center;
    margin: 14px 0 8px;
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}
.gx-preview .wafu.is-animating .wafu-sep { animation: wafuTimeSkip var(--wafu-cycle) ease both infinite; }
.gx-preview .wafu-sep span,
.gx-preview .sr2-waitbody span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(17,24,39,.72);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(7,18,15,.16);
    backdrop-filter: blur(8px);
}
.gx-preview .wafu-sep span::before,
.gx-preview .sr2-waitbody span::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    background: url('../images/clock-o.png') center / contain no-repeat;
    filter: brightness(0) invert(1);
}

/* 12s loop: empty chat, message 1, time pill, follow-up, then customer reply. */
@keyframes wafuMsgOne {
    0%, 1.2% { opacity: 0; transform: translateY(20px); }
    4.2%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}
@keyframes wafuTimeSkip {
    0%, 24.9% { opacity: 0; transform: translateY(10px); }
    29.2%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}
@keyframes wafuMsgTwo {
    0%, 41.6% { opacity: 0; transform: translateY(20px); }
    46%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}
@keyframes wafuMsgThree {
    0%, 62.4% { opacity: 0; transform: translateY(20px); }
    66.7%, 92% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

@media (max-width: 520px) {
    .gx-preview .fu-stage { padding: 16px 14px; }
    .gx-preview .wafu { min-height: 480px; border-radius: 18px; }
    .gx-preview .wafu-body { min-height: 480px; padding: 16px; }
    .gx-preview .wafu-row { gap: 8px; }
    .gx-preview .wafu-avatar { width: 38px; height: 38px; flex-basis: 38px; }
    .gx-preview .wafu-content { max-width: calc(100% - 88px); }
    .gx-preview .wafu-msg { padding: 12px 13px; border-radius: 16px 16px 6px 16px; font-size: 12px; }
    .gx-preview .wafu-client-msg { border-radius: 16px 16px 16px 6px; }
}

/* Smart replies */
.gx-preview .sr-thread .wa-body { min-height: 300px; }
.gx-preview .voice { display: flex; align-items: center; gap: 10px; background: #fff; margin-inline-start: auto; border-radius: 11px; padding: 9px 11px; max-width: 80%; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.gx-preview .voice .play { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: #172017; display: grid; place-items: center; flex: 0 0 28px; font-size: 11px; }
.gx-preview .voice .wave { flex: 1; height: 20px; background: repeating-linear-gradient(90deg,#1fa855 0 2px,transparent 2px 5px); opacity: .5; border-radius: 4px; }
.gx-preview .voice .dur { font-size: 11px; color: #677; font-weight: 700; }
.gx-preview .media { margin-inline-start: auto; border-radius: 11px; overflow: hidden; max-width: 70%; box-shadow: 0 1px 1px rgba(0,0,0,.05); background: #fff; }
.gx-preview .media .ph { height: 110px; background: linear-gradient(135deg,#cfe39a,#aacb5e); display: grid; place-items: center; color: #16321a; font-weight: 700; font-size: 12.5px; position: relative; }
.gx-preview .media.vid .ph::after { content: "▶"; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 15px; }
.gx-preview .media .cap { padding: 7px 10px; font-size: 12px; color: #46514a; font-weight: 600; }
.gx-preview .reveal { opacity: 0; transform: translateY(8px); transition: .35s; }
.gx-preview .reveal.show { opacity: 1; transform: none; }
.gx-preview .draft { background: rgba(204,236,68,.12); border: 1px solid rgba(204,236,68,.45); border-radius: 16px; padding: 16px; margin-top: 22px; }
.gx-preview .draft .dh { font-size: 12px; font-weight: 700; color: var(--lime-deep); letter-spacing: .04em; margin-bottom: 8px; }
.gx-preview .draft .compose { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.gx-preview .draft .compose .txt { flex: 1; font-size: 13px; color: #46514a; }
.gx-preview .draft .compose .snd { width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: #172017; display: grid; place-items: center; font-size: 13px; flex: 0 0 34px; }

/* ===== Smart-reply builder → WhatsApp delivery (v2) ===== */
.gx-preview .sr2-stage {
    position: relative;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.gx-preview #v2-smart-replies .split-grid { align-items: center; }
.gx-preview #v2-smart-replies #v2SrDemo {
    --v2sr-scale: 1;
    --v2sr-stage-h: 552px;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 560px;
    height: var(--v2sr-stage-h);
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    transform-origin: top left;
}
.gx-preview #v2-smart-replies #v2SrDemo > * {
    transform: scale(var(--v2sr-scale));
    transform-origin: top left;
}
.gx-preview #v2-smart-replies #v2SrDemo .sr2-steps {
    position: absolute;
    inset: calc(96px * var(--v2sr-scale)) auto auto calc(6px * var(--v2sr-scale));
}
.gx-preview #v2-smart-replies #v2SrDemo .sr-thread {
    position: absolute;
    inset: calc(16px * var(--v2sr-scale)) auto auto calc(220px * var(--v2sr-scale));
    width: 318px;
    max-width: none;
}

/* Steps column — cards float on the page */
.gx-preview .sr2-steps {
    position: relative;
    z-index: 2;
    flex: 0 0 220px;
    width: 220px;
    margin-inline-end: -8px;
    font-size: 10.5px;
}

.gx-preview .sr2-step { border: 1px solid rgba(17,27,33,.06); border-radius: 12px; padding: 10px; margin-bottom: 9px; background: #fff; box-shadow: 0 10px 26px rgba(17,27,33,.08), 0 1px 2px rgba(17,27,33,.04); transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.gx-preview .sr2-step:last-child { margin-bottom: 0; }
.gx-preview .sr2-step.is-active { border-color: rgba(204,236,68,.9); box-shadow: 0 0 0 3px rgba(204,236,68,.22), 0 12px 28px rgba(17,27,33,.10); transform: translateY(-1px); }
.gx-preview .sr2-waitstep {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.gx-preview .sr2-waitstep.is-active {
    border-color: rgba(204,236,68,.9);
    box-shadow: 0 0 0 3px rgba(204,236,68,.22), 0 12px 28px rgba(17,27,33,.10);
}

.gx-preview .sr2-srow { display: flex; align-items: center; gap: 7px; }
.gx-preview .sr2-grip { color: #c2cbc0; font-size: 13px; line-height: 1; cursor: grab; }
.gx-preview .sr2-num { width: 21px; height: 21px; border-radius: 50%; background: #eef1ea; color: #46514a; font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: 0 0 21px; transition: .3s; }
.gx-preview .sr2-num-b { background: #e5efff; color: #2f6bd6; }
.gx-preview .sr2-step.is-active .sr2-num { background: var(--lime); color: #16250a; }
.gx-preview .sr2-ic { font-size: 13px; }
.gx-preview .sr2-label { font-size: 10.5px; font-weight: 800; color: var(--ink); margin-inline-end: auto; }
.gx-preview .sr2-tools { display: flex; gap: 8px; align-items: center; }
.gx-preview .sr2-edit { color: #8a948b; font-size: 12px; }
.gx-preview .sr2-del { color: #e05a5a; font-size: 12px; }

.gx-preview .sr2-body { margin-top: 9px; border-radius: 9px; font-size: 10.5px; }
.gx-preview .sr2-textbody { background: #f6faec; border: 1px solid rgba(204,236,68,.35); padding: 9px 10px; color: #2d3a32; line-height: 1.75; }
.gx-preview .sr2-var { background: #fff; border: 1px solid rgba(204,236,68,.6); border-radius: 5px; padding: 1px 5px; font-size: 10.5px; font-weight: 800; color: var(--lime-deep); white-space: nowrap; }
.gx-preview .sr2-waitbody {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--ink);
    font-weight: 700;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.gx-preview .sr2-waitbody span {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    background: #ffffff;
    color: #334034;
    border: 1px solid rgba(204,236,68,.45);
    box-shadow: 0 5px 16px rgba(7,18,15,.08);
}
.gx-preview .sr2-waitbody span::before {
    filter: brightness(0) saturate(100%) invert(31%) sepia(9%) saturate(710%) hue-rotate(79deg) brightness(90%) contrast(84%);
}
.gx-preview .sr2-step.is-active .sr2-waitbody span {
    background: #fff;
    color: #334034;
    border-color: rgba(204,236,68,.95);
    box-shadow: 0 8px 22px rgba(7,18,15,.12);
}
.gx-preview .sr2-step.is-active .sr2-waitbody span::before {
    filter: brightness(0) saturate(100%) invert(31%) sepia(9%) saturate(710%) hue-rotate(79deg) brightness(90%) contrast(84%);
}
.gx-preview .sr2-imgbody { background: #f3f5f0; padding: 10px; overflow: hidden; display: grid; place-items: center; }
.gx-preview .sr2-imgbody img { width: 30%; height: 49px; object-fit: cover; display: block; border-radius: 8px; }
.gx-preview .sr2-voicebody { background: #f3f5f0; padding: 9px 10px; display: flex; align-items: center; gap: 8px; }
.gx-preview .sr2-vplay { width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: #16250a; display: grid; place-items: center; font-size: 9px; flex: 0 0 24px; }
.gx-preview .sr2-vwave { flex: 1; height: 16px; background: repeating-linear-gradient(90deg,#9aa49c 0 2px,transparent 2px 5px); opacity: .6; border-radius: 4px; }
.gx-preview .sr2-vdur { font-size: 10.5px; color: #677; font-weight: 700; direction: ltr; }
.gx-preview .sr2-steps :is(.sr2-num, .sr2-label, .sr2-body, .sr2-var, .sr2-edit, .sr2-del, .sr2-vdur) { font-size: 10.5px; }

/* WhatsApp realism additions (scoped to the sr-thread demo) */
.gx-preview .sr-thread { position: relative; z-index: 1; flex: 1 1 auto; max-width: 300px; width: 100%; margin-inline: 0; border-radius: 18px; border-color: rgba(17,27,33,.06); box-shadow: var(--float); }
.gx-preview .sr-thread .wa-body { min-height: 0; padding: 12px; gap: 6px; }
.gx-preview .wa-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; color: #667a70; direction: ltr; }
.gx-preview .wa-out .wa-meta { display: block; text-align: end; margin-top: 3px; }
.gx-preview .wa-ck { color: #53bdeb; font-size: 10px; letter-spacing: -3px; }

/* Image message — real WA bubble: photo + caption + time */
.gx-preview .sr-thread .media { background: #DCF8C6; padding: 3px; border-radius: 10px; max-width: 78%; }
.gx-preview .sr-thread .media img { width: 100%; height: 140px; object-fit: cover; display: block; border-radius: 8px; }
.gx-preview .sr-thread .media .cap { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; padding: 6px 7px 4px; font-size: 12px; color: #101510; font-weight: 500; }

/* Voice message — real WA outgoing note (avatar + play + waveform + duration/time) */
.gx-preview .sr-thread .voice { background: #DCF8C6; gap: 9px; padding: 8px 10px; max-width: 82%; }
.gx-preview .sr-thread .voice .v-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#9ed70d,#6fae00); color: #11260a; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: 0 0 34px; }
.gx-preview .sr-thread .voice .play { background: transparent; color: #55605a; width: 16px; height: 16px; flex: 0 0 16px; font-size: 12px; }
.gx-preview .sr-thread .voice .wave { background: repeating-linear-gradient(90deg,#2aa35a 0 2px,transparent 2px 5px); opacity: .55; }
.gx-preview .sr-thread .voice .v-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gx-preview .sr-thread .voice .dur { font-size: 10px; color: #55605a; }

/* WhatsApp composer — reuse .cf-cinput, but resolve cqw → px inside the (non-container) thread */
.gx-preview .sr-thread .cf-cinput { gap: 9px; padding: 9px 11px; font-size: 15px; }
.gx-preview .sr-thread .cf-ph { font-size: 12px; }
.gx-preview .sr-thread .cf-mic { width: 32px; height: 32px; font-size: 14px; }

/* Pricing band */
.gx-preview .priceband { background: radial-gradient(circle at 14% 0%, rgba(204,236,68,.26), transparent 36%), linear-gradient(135deg,#07120f,#111916); color: #fff; border-radius: 30px; padding: 42px 40px; box-shadow: var(--shadow); }
.gx-preview .priceband h2 { color: #fff !important; }
.gx-preview .priceband p { color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.6; margin: 6px 0 0; }
.gx-preview .v2-price-rows { margin-top: 20px; }
.gx-preview .v2-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.gx-preview .v2-price-row:last-child { border-bottom: 0; }
.gx-preview .v2-price-row span { color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 9px; }
.gx-preview .v2-price-row span::before { content: "✓"; color: var(--lime); font-weight: 700; }
.gx-preview .v2-price-row b { color: var(--lime); background: rgba(204,236,68,.12); border: 1px solid rgba(204,236,68,.22); padding: 4px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.gx-preview .v2-price-note { margin-top: 22px; background: var(--lime-deep); color: #fff; border-radius: 14px; padding: 14px 16px; text-align: center; font-weight: 800; font-size: 14px; }
.gx-preview .v2-pricing-wrap { max-width: 1120px; margin: 10px auto 0; }
.gx-preview .v2-pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}
.gx-preview .v2-pricing-main,
.gx-preview .v2-pricing-side,
.gx-preview .v2-tariff-card {
    border-radius: 26px;
    box-shadow: var(--soft);
}
.gx-preview .v2-pricing-main {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: 38px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 0%, rgba(204,236,68,.30), transparent 34%),
        linear-gradient(135deg, #07120f 0%, #101916 100%);
}
.gx-preview .v2-pricing-main::after {
    content: "";
    position: absolute;
    inset-inline-end: -90px;
    bottom: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 48px solid rgba(204,236,68,.08);
}
.gx-preview .v2-price-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(204,236,68,.16);
    border: 1px solid rgba(204,236,68,.26);
    color: var(--lime);
    font-size: 22px;
    margin-bottom: 22px;
}
.gx-preview .v2-price-kicker {
    display: inline-flex;
    width: fit-content;
    color: var(--lime2);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}
.gx-preview .v2-pricing-main h3 {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0;
    color: #fff !important;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
}
.gx-preview .v2-pricing-main p {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.74);
    font-size: 15.5px;
    line-height: 1.8;
}
.gx-preview .v2-price-pillrow {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.gx-preview .v2-price-pillrow span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: #eef8e8;
    font-size: 13px;
    font-weight: 800;
}
.gx-preview .v2-price-pillrow i { color: var(--lime); }
.gx-preview .v2-pricing-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
}
.gx-preview .v2-free-card {
    min-height: 168px;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fbeb 0%, #eef8c8 100%);
    border: 1px solid rgba(79,122,0,.16);
}
.gx-preview .v2-free-card span {
    display: block;
    color: var(--lime-deep);
    font-size: 13px;
    font-weight: 700;
}
.gx-preview .v2-free-card strong {
    display: block;
    margin-top: 8px;
    color: #172017;
    font-size: 52px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0;
}
.gx-preview .v2-free-card small {
    display: block;
    margin-top: 10px;
    color: #52614f;
    font-size: 13px;
    font-weight: 800;
}
.gx-preview .v2-mini-list {
    display: grid;
    gap: 10px;
}
.gx-preview .v2-mini-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #f8faf5;
    border: 1px solid var(--line);
}
.gx-preview .v2-mini-list i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #172017;
    background: var(--lime);
    font-size: 11px;
    flex: 0 0 24px;
}
.gx-preview .v2-mini-list span {
    color: #46514a;
    font-size: 13px;
    font-weight: 800;
}
.gx-preview .v2-mini-list b {
    margin-inline-start: auto;
    color: var(--lime-deep);
    font-size: 12px;
    white-space: nowrap;
}
.gx-preview .v2-tariff-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
}
.gx-preview .v2-tariff-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    background: #fbfcf8;
}
.gx-preview .v2-tariff-label {
    display: block;
    color: var(--lime-deep);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
}
.gx-preview .v2-tariff-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0;
}
.gx-preview .v2-price-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(340px, 100%);
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #8a948b;
    margin: 0;
}
.gx-preview .v2-price-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}
.gx-preview .v2-tariff-table-wrap { overflow-x: auto; }
.gx-preview .v2-tariff-table {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;
}
.gx-preview .v2-tariff-table th,
.gx-preview .v2-tariff-table td {
    padding: 15px 22px;
    text-align: start;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.gx-preview .v2-tariff-table th {
    background: #f4f6ef;
    color: #7a857d;
    font-size: 11.5px;
    font-weight: 700;
}
.gx-preview .v2-tariff-table td {
    color: #263129;
    font-size: 14px;
    font-weight: 800;
}
.gx-preview .v2-tariff-table td:first-child {
    color: var(--ink);
    font-weight: 950;
}
.gx-preview .v2-tariff-table small {
    color: var(--muted);
    font-weight: 800;
}
.gx-preview .v2-price-empty {
    text-align: center !important;
    color: var(--muted) !important;
    padding: 34px 22px !important;
}
.gx-preview .v2-price-loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-inline-end: 8px;
    border-radius: 50%;
    border: 2px solid #dfe6d8;
    border-top-color: var(--lime-deep);
    vertical-align: -2px;
    animation: v2spin .8s linear infinite;
}
@keyframes v2spin { to { transform: rotate(360deg); } }
.gx-preview .v2-tariff-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: #fbfcf8;
}
.gx-preview .v2-tariff-foot p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}
.gx-preview .v2-price-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.gx-preview .v2-price-pager button {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
}
.gx-preview .v2-price-pager button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.gx-preview .v2-price-pager span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* Pricing: black full-width band with included platform card + city tariff table */
.gx-preview .v2-pricing-section {
    max-width: none;
    padding: 88px 22px;
    background: #08090c;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.gx-preview .v2-pricing-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 38%);
    pointer-events: none;
}
.gx-preview .v2-pricing-section > .center,
.gx-preview .v2-pricing-section > .v2-pricing-wrap {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin-inline: auto;
}
.gx-preview .v2-pricing-section > .center {
    max-width: 860px;
    margin-bottom: 52px;
    text-align: center;
    direction: ltr;
}
.gx-preview .v2-pricing-section h2 {
    color: #fff !important;
}
.gx-preview .v2-pricing-section h2 span {
    color: var(--lime);
}
.gx-preview .v2-pricing-section .section-text {
    color: #b5bfd6;
}
.gx-preview .v2-pricing-section .eyebrow {
    color: var(--lime2);
}
.gx-preview .v2-pricing-section .v2-pricing-wrap {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(540px, 1.22fr);
    gap: 24px;
    align-items: start;
    margin-top: 0;
    max-width: 1120px;
}
.gx-preview .v2-pricing-section .v2-pricing-hero {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: auto;
    height: fit-content;
    align-self: start;
    margin: 0;
    padding: 24px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--lime);
    border: 0;
    box-shadow: 0 28px 70px rgba(204,236,68,.20);
    position: relative;
    direction: ltr;
    text-align: left;
}
.gx-preview .v2-pricing-section .v2-pricing-glass,
.gx-preview .v2-pricing-section .v2-mini-list {
    position: relative;
        padding-left: 15px;
    z-index: 1;
}
.gx-preview .v2-pricing-section .v2-price-kicker {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-end: 18px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e54242;
    color: #fff;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 950;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(229,66,66,.28);
    z-index: 3;
}
.gx-preview .v2-pricing-section .v2-pricing-glass {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 19px;
    padding: 28px 24px 24px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.42);
    background:
        radial-gradient(circle at 76% 4%, rgba(255,255,255,.7), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 38px rgba(3,6,3,.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.gx-preview .v2-pricing-section .v2-pricing-hero h3 {
    margin: 0;
    max-width: 310px;
    color: #030603 !important;
    font-size: clamp(18px, 1.7vw, 23px);
    line-height: 1.32;
    font-weight: 950;
    letter-spacing: 0;
}
.gx-preview .v2-pricing-section .v2-price-zero strong {
    display: inline-block;
    color: #030603;
    font-size: clamp(56px, 6vw, 50px);
    line-height: .9;
    font-weight: 800;
    letter-spacing: 0;
}
.gx-preview .v2-pricing-section .v2-price-zero span {
    display: inline-block;
    margin: 0 0 8px 8px;
    color: rgba(3,6,3,.64);
    font-size: 15px;
    font-weight: 800;
    vertical-align: baseline;
}
.gx-preview .v2-pricing-section .v2-included-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    color: rgba(3,6,3,.62);
    font-size: 13px;
    font-weight: 800;
}
.gx-preview .v2-pricing-section .v2-included-divider::before,
.gx-preview .v2-pricing-section .v2-included-divider::after {
    content: "";
    height: 2px;
    border-radius: 999px;
    background: rgba(3,6,3,.22);
}
.gx-preview .v2-pricing-section .v2-pricing-hero p {
    margin: 4px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(3,6,3,.10);
    color: rgba(3,6,3,.72);
    font-size: 14px;
    line-height: 1.7;
}
.gx-preview .v2-pricing-section .v2-mini-list div {
    padding: 2px 0;
    background: transparent;
    border: 0;
    color: #030603;
}
.gx-preview .v2-pricing-section .v2-mini-list span {
    color: #030603;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.gx-preview .v2-pricing-section .v2-mini-list img {
    width: 11px;
    height: 11px;
    flex: 0 0 17px;
    object-fit: contain;
    display: block;
}
.gx-preview .v2-pricing-section .v2-mini-list b {
    display: none;
}
.gx-preview .v2-pricing-section .v2-tariff-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    background: #fff;
    border: 1px solid grey;
    border-radius: 24px;
    box-shadow: none;
    overflow: hidden;
}
.gx-preview .v2-pricing-section .v2-tariff-head {
    background: #fff;
    border-bottom: 0;
    direction: ltr;
    text-align: left;
    padding: 18px 18px 12px;
    display: block;
}
.gx-preview .v2-pricing-section .v2-tariff-head h3 {
    margin: 0;
    color: #212529;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}
.gx-preview .v2-pricing-section .v2-pickup-label {
    margin: 0 0 8px;
    color: #212529;
    font-size: 14px;
    font-weight: 700;
}
.gx-preview .v2-pricing-section .required-star {
    color: #ff8080;
}
.gx-preview .v2-pricing-section .v2-pickup-select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #212529;
    padding: 8px 12px;
    font-size: 14px;
    outline: 0;
}
.gx-preview .v2-pricing-section .v2-price-search {
    width: min(180px, 100%);
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 8px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: #6c757d;
}
.gx-preview .v2-pricing-section .v2-price-search input {
    width: 100%;
    min-width: 0;
    color: #212529;
    font-size: 13px;
}
.gx-preview .v2-pricing-section .v2-price-search input::placeholder {
    color: #6c757d;
}
.gx-preview .v2-pricing-section .v2-tariff-table-wrap {
    overflow-x: auto;
}
.gx-preview .v2-pricing-section .v2-tariff-table th {
    background: rgb(240, 237, 237);
    color: #212529;
}
.gx-preview .v2-pricing-section .v2-tariff-table th,
.gx-preview .v2-pricing-section .v2-tariff-table td {
    border-bottom: 1px solid #dee2e6;
    padding: 13px 16px;
}
.gx-preview .v2-pricing-section .v2-tariff-table th {
    padding-top: 9px;
    padding-bottom: 9px;
}
.gx-preview .v2-pricing-section .v2-tariff-table td,
.gx-preview .v2-pricing-section .v2-tariff-table td:first-child {
    color: #212529;
}
.gx-preview .v2-pricing-section .v2-tariff-table td:first-child,
.gx-preview .v2-pricing-section .v2-city-header-cell {
    padding-left: 18px;
}
.gx-preview .v2-pricing-section .v2-tariff-table td:first-child {
    font-weight: 700;
}
.gx-preview .v2-pricing-section .v2-city-header-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.gx-preview .v2-pricing-section .v2-tariff-table small {
    color: #6c757d;
}
.gx-preview .v2-pricing-section .v2-price-empty {
    color: #6c757d !important;
}
.gx-preview .v2-pricing-section .v2-tariff-foot {
    margin-top: auto;
    background: #fff;
    border-top: 0;
    padding: 0 18px 16px;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
}
.gx-preview .v2-pricing-section .v2-tariff-foot p {
    color: #6c757d;
    margin: 0;
    font-size: 13px;
}
.gx-preview .v2-pricing-section .v2-price-pager button {
    background: #fff;
    border-color: #dee2e6;
    color: #212529;
}
.gx-preview .v2-pricing-section .v2-price-pager span {
    color: #6c757d;
}
.gx-preview .v2-pricing-section + .cta-section {
    max-width: none;
    margin: 0;
    padding: 0 22px 88px;
    background: #08090c;
}
.gx-preview .v2-pricing-section + .cta-section .cta-box {
    max-width: 1120px;
    margin-inline: auto;
}
.gx-preview .v2-final-cta {
    text-align: center;
}
.gx-preview .v2-pricing-section + .v2-final-cta {
    padding: 54px 22px 88px;
}
.gx-preview .v2-final-cta h2 {
    max-width: 940px;
    margin: 0 auto;
    font-size: clamp(30px, 5vw, 35px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: 0;
}
.gx-preview .v2-final-cta .get-started-cta-button {
    margin: 28px auto 0;
}
.gx-preview .v2-download-section {
    max-width: none;
    margin: 0;
    padding: 16px 22px 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
}
.gx-preview .v2-download-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 6vw, 82px);
    align-items: center;
    direction: ltr;
}
.gx-preview.v2-rtl .v2-download-copy {
    order: 2;
    direction: rtl;
    text-align: right;
}
.gx-preview.v2-rtl .v2-download-visual {
    order: 1;
}
.gx-preview.v2-ltr .v2-download-copy {
    direction: ltr;
    text-align: left;
}
.gx-preview .v2-download-copy .eyebrow {
    color: var(--lime-deep);
}
.gx-preview .v2-download-title {
    max-width: 560px;
    margin: 0;
    display: block;
    direction: ltr;
    color: var(--ink) !important;
    /* font-size: clamp(38px, 5.2vw, 68px); */
    line-height: 1.12;
    letter-spacing: 0;
    font-weight: 800;
}
.gx-preview.v2-rtl .v2-download-title {
    text-align: end;
}
.gx-preview.v2-ltr .v2-download-title {
    text-align: start;
}
.gx-preview .v2-download-title img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: .83em;
    margin: 0 .12em;
    max-width: 3.2em;
    object-fit: contain;
}
.gx-preview .v2-download-copy .section-text {
    max-width: 620px;
    margin: 20px 0 0;
    color: rgba(31,42,40,.72);
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.75;
}
.gx-preview .v2-download-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.gx-preview .v2-download-actions .v2-app-badge-link,
.gx-preview .v2-download-actions .v2-app-badge-link:hover {
    background: transparent;
    box-shadow: none;
}
.gx-preview .v2-download-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
}
.gx-preview .v2-download-visual img {
    display: block;
    width: min(100%, 574px);
    height: auto;
    filter: drop-shadow(0 28px 46px rgba(0,0,0,.34));
}

/* AI full-bleed */
.gx-preview .ai-fullbleed { max-width: none; padding: 0; background: #000000; }
.gx-preview .ai-fullbleed .ai-inner { max-width: 1200px; margin: 0 auto; padding: 88px 22px; }
.gx-preview .ai-fullbleed h2 { color: #fff !important; }
.gx-preview .ai-fullbleed .eyebrow { color: var(--lime2); }
.gx-preview .ai-fullbleed .section-text { color: rgba(255,255,255,.74); }
.gx-preview .v2-ai-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(204,236,68,.14); display: grid; place-items: center; color: var(--lime); font-size: 19px; }
/* ===== AI bento: featured confirmation card + 2x2 support cards ===== */
.gx-preview .gx-ai2-grid {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.gx-preview .gx-ai2-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    pointer-events: auto;
    background-color: rgba(101, 101, 106, 0.16);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: cover;
    border: 1px solid #3D3D40;
    border-radius: 20px;
    box-shadow: 0 20px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
    padding: 0;
    margin-inline-start: 10px;
    margin-inline-end: 0;
    margin-right: 10px;
}
.gx-preview .gx-ai2-card--featured {
    grid-column: span 4;
    grid-row: span 2;
    padding: 34px 34px 0;
}
.gx-preview .gx-ai2-body { display: flex; flex-direction: column; gap: 9px; padding: 28px 28px 0; }
.gx-preview .gx-ai2-body h3 { margin: 0; color: #fff !important; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; font-weight: 700; }
.gx-preview .gx-ai2-body p { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; font-weight: 400; }
.gx-preview .gx-ai2-card--featured .gx-ai2-body { padding: 0; }
.gx-preview .gx-ai2-card--featured .gx-ai2-body h3 { font-size: 19px; line-height: 1.2; }
.gx-preview .gx-ai2-card--featured .gx-ai2-body p { font-size: 14px; line-height: 1.6; }
/* Visual floats on the same card background (no edge-to-edge strip / divider) */
.gx-preview .gx-ai2-shot { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 15px 0 0; min-height: 210px; }
.gx-preview .gx-ai2-shot img { display: block; width: 100%; height: 100%; max-height: 360px; object-fit: contain; margin: 0; padding: 0; }
.gx-preview .gx-ai2-card--featured .gx-ai2-shot { min-height: 500px; }
.gx-preview .gx-ai2-card--featured .gx-ai2-shot { margin-inline: -34px; }
.gx-preview .gx-ai2-card--featured .gx-ai2-shot img { max-height: 800px; }
.gx-preview .gx-ai2-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--lime); text-decoration: none; align-self: flex-start; }
.gx-preview .gx-ai2-more:hover { color: var(--lime2); }

@media (max-width: 980px) {
    .gx-preview .gx-ai2-grid { grid-template-columns: repeat(2, 1fr); }
    .gx-preview .gx-ai2-card { grid-column: span 1; }
    .gx-preview .gx-ai2-card--featured { grid-column: span 2; grid-row: auto; }
    .gx-preview .gx-ai2-card--featured .gx-ai2-shot { min-height: 300px; }
}
@media (max-width: 560px) {
    .gx-preview .gx-ai2-grid { grid-template-columns: 1fr; }
    .gx-preview .gx-ai2-card,
    .gx-preview .gx-ai2-card--featured { grid-column: span 1; }
    .gx-preview .gx-ai2-card--featured { padding: 28px 28px 0; }
    .gx-preview .gx-ai2-card--featured .gx-ai2-shot { margin-inline: -28px; }
    .gx-preview .gx-ai2-card--featured .gx-ai2-body h3 { font-size: 22px; }
    .gx-preview .gx-ai2-card--featured .gx-ai2-body p { font-size: 14px; }
}

/* ====================== HERO (v2) ====================== */
.gx-preview .v2-hero {
    --v2-hero-height: clamp(800px, 92vh, 940px);
    /* height of the white diagonal at the bottom; the proof bar lands on it */
    --v2-hero-wedge: 136px;
    position: relative; overflow: hidden; padding: 0;
    min-height: var(--v2-hero-height); height: auto;
    background: #03080a; isolation: isolate;
    /* the hero copy is Latin-script Darija, so keep Inter even on ar/dr where
       .gx-preview switches the whole page to Noto Kufi Arabic */
    font-family: Inter, 'Noto Kufi Arabic', ui-sans-serif, system-ui, sans-serif;
}
.gx-preview .v2-hero-bg { position: absolute; inset: 0; background-image: url('../images/hero-background.png'); background-size: cover; background-position: 52% 58%; background-repeat: no-repeat; transform: none; z-index: 0; }
/* Scrim: heavy on the inline-start half so the copy holds contrast, light over
   the van. The second layer just seats the navbar. */
.gx-preview .v2-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg, rgba(3,8,10,.96) 0%, rgba(3,8,10,.86) 26%, rgba(3,8,10,.48) 45%, rgba(3,8,10,.12) 63%, rgba(3,8,10,0) 78%),
        linear-gradient(180deg, rgba(3,8,10,.55) 0%, rgba(3,8,10,.08) 26%, rgba(3,8,10,0) 42%);
}
/* White wedge handing the page over to the (white) section below. */
.gx-preview .v2-hero-wedge {
    position: absolute; left: -1%; right: -1%; bottom: -1px;
    height: var(--v2-hero-wedge); z-index: 1; pointer-events: none;
    background: #fff;
    clip-path: polygon(0 16%, 100% 76%, 100% 100%, 0 100%);
}
.gx-preview .v2-hero-inner { position: relative; z-index: 2; max-width: 1328px; min-height: var(--v2-hero-height); height: auto; margin: 0 auto; padding: 92px 28px 36px; display: flex; flex-direction: column; justify-content: flex-start; }
.gx-preview .v2-hero-grid { direction: ltr; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(206px, 17vw, 244px); grid-template-areas: "copy steps"; align-items: start; justify-items: stretch; column-gap: 36px; }
.gx-preview .v2-hero-copy,
.gx-preview.v2-ltr .v2-hero-copy { grid-area: copy; direction: ltr; text-align: left; justify-self: start; width: min(100%, 720px); display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px; padding-top: 4px; }
.gx-preview .v2-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(6,12,8,.44); border: 1px solid rgba(180,241,8,.34); color: #dcff8a; font-size: 11.5px; font-weight: 600; margin: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.055); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gx-preview .v2-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); opacity: .72; animation: v2pulse 2.4s infinite; }
@keyframes v2pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
/* sized so both lines stay unbroken from ~1180px up */
.gx-preview .v2-hero-title { color: #fff !important; font-size: clamp(30px, 3vw, 43px); line-height: 1.16; letter-spacing: -.03em; font-weight: 800; margin: 0;}
/* frontend/css/style.css declares `h1 { font-size: 1.7rem !important }` below
   991px, which beats the rule above on specificity-independent grounds — hence
   the !important here, so the hero title keeps its own scale on tablet/mobile. */
@media (max-width: 991px) {
    .gx-preview .v2-hero-title { font-size: clamp(27px, 4.4vw, 36px) !important; }
}
.gx-preview .v2-go { display: inline-block; color: var(--lime) !important; font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 950; }
.gx-preview .v2-go-img { display: inline-block; width: auto; height: .89em; vertical-align: -.12em; filter: brightness(0) saturate(100%) invert(91%) sepia(69%) saturate(713%) hue-rotate(15deg) brightness(102%) contrast(92%); }
.gx-preview .v2-dash { display: inline-block; width: 78px; height: 9px; margin-inline: 14px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.96) 20% 80%, transparent); vertical-align: middle; box-shadow: 0 0 22px rgba(255,255,255,.38); }
.gx-preview .v2-hl { color: var(--lime) !important; }
.gx-preview .v2-hero-sub { color: rgba(255,255,255,.82); font-size: 16.5px; line-height: 1.72; font-weight: 400; max-width: 480px; margin: 0;}
.gx-preview .v2-hero-sub b { color: #fff; font-weight: 700; }
.text-shadow {
    text-shadow: 0px 0.5px 0px #18181852;
}
.gx-preview .v2-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gx-preview .v2-hero-actions .get-started-cta-button { min-height: 52px; flex: 0 0 auto; }
.gx-preview .v2-hero-ghost { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.07); color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.gx-preview .v2-hero-ghost:hover { color: #fff; border-color: rgba(180,241,8,.62); background: rgba(255,255,255,.12); transform: translateY(-1px); }
.gx-preview .v2-hero-ghost i { color: var(--lime); font-size: 13px; }

/* ---- Hero order timeline (inline-end column) ----
   Five status cards with a dashed rail behind them: the rail only shows in the
   gaps, which is what makes them read as one order moving down. */
.gx-preview .v2-hero-steps { grid-area: steps; position: relative; display: grid; gap: 12px; align-content: start; }
.gx-preview .v2-hero-steps-rail { position: absolute; z-index: 0; top: 28px; bottom: 28px; left: 50%; width: 0; border-left: 2px dashed rgba(255,255,255,.55); }
.gx-preview .v2-hstep { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 14px; background: #fff; box-shadow: 0 16px 34px rgba(0,0,0,.26); }
.gx-preview .v2-hstep-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; }
.gx-preview .v2-hstep-ic.is-order { background: #e7effd; color: #2f62df; }
.gx-preview .v2-hstep-ic.is-wa { background: #25d366; color: #fff; font-size: 17px; }
.gx-preview .v2-hstep-ic.is-pickup { background: #eaeefe; color: #4257d6; }
.gx-preview .v2-hstep-ic.is-drop { background: #12211a; color: #fff; }
.gx-preview .v2-hstep-ic.is-cod { background: #1faa4d; color: #fff; }
.gx-preview .v2-hstep-txt { display: flex; flex-direction: column; min-width: 0; }
.gx-preview .v2-hstep-txt b { color: var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.32; }
.gx-preview .v2-hstep-txt small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.gx-preview .v2-hstep-ok { margin-left: auto; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; background: #57a80f; color: #fff; display: grid; place-items: center; font-size: 9px; }

/* ---- Hero proof bar ----
   Last flow item of .v2-hero-inner, so it always sits at the hero's bottom and
   straddles the wedge: top half on the photo, bottom half on the page. */
.gx-preview .v2-hero-stats { position: relative; z-index: 3; margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; padding: 22px 8px; border-radius: 22px; background: #fff; border: 1px solid rgba(232,238,230,.9); box-shadow: 0 30px 70px rgba(4,10,8,.24); }
.gx-preview .v2-hstat { display: flex; align-items: center; gap: 14px; padding: 4px 20px; min-width: 0; }
.gx-preview .v2-hstat + .v2-hstat { border-left: 1px solid var(--line); }
.gx-preview .v2-hstat-ic { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: #eff8dc; color: var(--lime-deep); display: grid; place-items: center; font-size: 18px; }
.gx-preview .v2-hstat-txt { display: flex; flex-direction: column; min-width: 0; }
.gx-preview .v2-hstat-txt b { color: var(--ink); font-size: clamp(21px, 2.1vw, 28px); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; }
.gx-preview .v2-hstat-txt b em { font-style: normal; font-size: .62em; font-weight: 700; }
.gx-preview .v2-hstat-txt small { color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 4px; }
.gx-preview .v2-hstat-txt small i { display: block; font-style: normal; font-size: 11.5px; color: rgba(100,112,106,.78); }
.gx-preview .v2-cta { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--lime); color: #0a1207; font-weight: 950; font-size: 17px; padding: 0 28px; border-radius: 999px; text-decoration: none; box-shadow: 0 20px 48px rgba(204,236,68,.28); transition: transform .16s ease, box-shadow .16s ease; }
.gx-preview .v2-cta:hover { transform: translateY(-2px); color: #0a1207; box-shadow: 0 24px 56px rgba(204,236,68,.34); }
.gx-preview .v2-cta-ic { width: 30px; height: 30px; border-radius: 50%; background: #0a1207; color: var(--lime); display: grid; place-items: center; font-size: 13px; }
.gx-preview .v2-cta-ghost { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.055); font-weight: 700; font-size: 16px; padding: 0 28px; border-radius: 999px; text-decoration: none; transition: border-color .16s ease, transform .16s ease; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gx-preview .v2-cta-ghost:hover { color: #fff; border-color: var(--lime); transform: translateY(-2px); }
.gx-preview .v2-hero-benefits { position: absolute; top: 126px; left: 28px; direction: rtl; display: grid; grid-template-columns: max-content; gap: 11px; width: auto; justify-self: auto; z-index: 3; }
.gx-preview.v2-ltr .v2-hero-benefits { left: auto; right: 28px; direction: ltr; }
.gx-preview .v2-hero-benefits span { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(4,12,15,.34); color: rgba(255,255,255,.92); font-size: 13.5px; font-weight: 850; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gx-preview .v2-hero-benefits i { color: var(--lime); font-size: 18px; width: 20px; text-align: center; }
/* Hero journey visual */
.gx-preview .v2-hero-visual { position: relative; }
.gx-preview .v2-hero-img { display: block; width: 100%; height: auto; max-width: 480px; margin-inline: auto; border-radius: 20px; }
.gx-preview .v2-journey { background: rgba(16,22,18,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.gx-preview .v2-journey-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.gx-preview .v2-journey-av { width: 42px; height: 42px; border-radius: 12px; background: var(--lime); color: #0a1207; display: grid; place-items: center; font-size: 18px; flex: 0 0 42px; }
.gx-preview .v2-journey-id b { display: block; color: #fff; font-size: 14px; }
.gx-preview .v2-journey-id small { color: rgba(255,255,255,.5); font-size: 11.5px; }
.gx-preview .v2-journey-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--lime); background: rgba(204,236,68,.12); border: 1px solid rgba(204,236,68,.25); padding: 4px 10px; border-radius: 999px; }
.gx-preview .v2-journey-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: v2pulse 1.4s infinite; }
.gx-preview .v2-journey-track { position: relative; padding: 18px 4px 4px; }
.gx-preview .v2-jstep { display: flex; align-items: center; gap: 13px; padding: 11px 0; position: relative; }
.gx-preview .v2-jstep::before { content: ""; position: absolute; inset-inline-start: 18px; top: 38px; bottom: -11px; width: 2px; background: rgba(255,255,255,.1); }
.gx-preview .v2-jstep:last-child::before { display: none; }
.gx-preview .v2-jdot { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 15px; flex: 0 0 38px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); z-index: 1; }
.gx-preview .v2-jstep.done .v2-jdot { background: rgba(204,236,68,.15); border-color: rgba(204,236,68,.4); color: var(--lime); }
.gx-preview .v2-jstep.active .v2-jdot { background: var(--lime); border-color: var(--lime); color: #0a1207; box-shadow: 0 0 0 6px rgba(204,236,68,.12); }
.gx-preview .v2-jtxt b { display: block; color: #fff; font-size: 13.5px; }
.gx-preview .v2-jtxt span { color: rgba(255,255,255,.55); font-size: 11.5px; }
.gx-preview .v2-jstate { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--lime); }
.gx-preview .v2-jstate-now { font-size: 10px; background: var(--lime); color: #0a1207; padding: 3px 9px; border-radius: 999px; }
.gx-preview .v2-journey-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.gx-preview .v2-journey-foot span { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font-size: 11.5px; font-weight: 800; }
.gx-preview .v2-journey-foot b { color: #fff; font-size: 18px; letter-spacing: -.02em; }

/* ====================== INTEGRATION CARDS ====================== */
.gx-preview .v2-integrations-board {
    height: 100%;
    padding: 4px 2px 8px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.gx-preview .v2-int-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 102px;
    gap: 10px;
}
.gx-preview .v2-int-card {
    position: relative;
    min-width: 0;
    min-height: 102px;
    padding: 12px;
    border: 1px solid rgba(17,27,33,.06);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(17,27,33,.08), 0 1px 3px rgba(17,27,33,.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.gx-preview .v2-int-card::before { display: none; }
.gx-preview .v2-int-card:hover {
    transform: translateY(-3px);
    border-color: rgba(17,27,33,.08);
    box-shadow: 0 16px 36px rgba(17,27,33,.11), 0 2px 6px rgba(17,27,33,.04);
}
.gx-preview .v2-int-icon {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    box-sizing: border-box;
    margin-bottom: auto;
    border-radius: 12px;
    background: #182018;
    color: #fff;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 10px 22px rgba(7,18,15,.08);
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    overflow: hidden;
}
.gx-preview .v2-int-icon i { display: block; line-height: 1; }
.gx-preview .v2-int-card.c-wa .v2-int-icon i { font-size: 23px; }
.gx-preview .v2-int-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-preview .v2-int-icon span { font-size: 12px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: 0; }
.gx-preview .v2-int-name {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.gx-preview .v2-int-soon {
    position: absolute;
    z-index: 2;
    top: 11px;
    inset-inline-end: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(17,21,16,.07);
    color: rgba(31,42,40,.64);
    font-size: 10px;
    font-weight: 800;
}
.gx-preview .v2-int-card.is-soon {
    background: #fff;
    border-style: dashed;
    border-color: rgba(17,27,33,.12);
}
.gx-preview .v2-int-card.is-soon::before { opacity: .28; }
.gx-preview .v2-int-card.is-soon .v2-int-icon,
.gx-preview .v2-int-card.is-soon .v2-int-name { opacity: .82; }
.gx-preview .v2-int-card.c-shopify .v2-int-icon { background: #95BF47; }
.gx-preview .v2-int-card.c-wa .v2-int-icon { background: #25D366; }
.gx-preview .v2-int-card.c-sheets .v2-int-icon { background: #fff; }
.gx-preview .v2-int-card.c-insta .v2-int-icon { background: radial-gradient(circle at 30% 105%, #fdf497 0 18%, #fd5949 42%, #d6249f 67%, #285AEB 100%); }
.gx-preview .v2-int-card.c-tiktok .v2-int-icon { background: #111; }
.gx-preview .v2-int-card.c-woo .v2-int-icon { background: #7F54B3; }
.gx-preview .v2-int-card.c-messenger .v2-int-icon { background: #0084ff; }
.gx-preview .v2-int-card.c-lightfunnels .v2-int-icon { background: #fff; }
.gx-preview .v2-int-card.c-call .v2-int-icon { background: #23a65c; }
.gx-preview .v2-int-card.c-youcan .v2-int-icon { background: #fff; }
.gx-preview .v2-int-side-note {
    margin: 20px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #39472c;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.7;
}
.gx-preview .v2-int-side-note i {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: rgba(204,236,68,.24);
    color: var(--lime-deep);
    display: grid;
    place-items: center;
    font-size: 10px;
    flex: 0 0 22px;
}
.gx-preview .v2-int-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 28px 0 0;
}
.gx-preview .v2-int-cta-row .get-started-cta-button {
    min-height: 52px;
    flex: 0 0 auto;
}
.gx-preview .v2-app-badge-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 52px;
    flex: 0 0 158px;
    border-radius: 11px;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease;
}
.gx-preview .v2-app-badge-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(7,18,15,.16);
}
.gx-preview .v2-app-badge-link img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Integrations section: keep both columns a similar height */
.gx-preview #v2-integrations .split-grid { align-items: stretch; }
.gx-preview #v2-integrations .split-copy { display: flex; flex-direction: column; justify-content: center; }

/* ====================== WORKFLOW TABS (horizontal) ====================== */
.gx-preview #v2-workflow {
    position: relative;
    z-index: 2;
    max-width: none;
    margin-top: -20px;
    padding: 40px 24px 120px;
}
.gx-preview .v2wf { max-width: 1180px; margin: 0 auto; }
.gx-preview #v2-workflow .v2wf {
    position: relative;
    z-index: 1;
}
.gx-preview .v2wf-intro {
    width: min(100%, 840px);
    max-width: 840px;
    margin: 0 auto 10px;
    padding-inline: 8px;
    box-sizing: border-box;
    text-align: center;
}
.gx-preview .v2wf-intro h2 {
    margin: 0;
    color: #101510 !important;
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.25;
    letter-spacing: 0;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255,255,255,.46);
}
.gx-preview .v2wf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.gx-preview .v2wf-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; background: #fff; border: 0; border-radius: 14px; padding: 12px 30px; cursor: pointer; transition: background .2s, box-shadow .2s; overflow: hidden; }
.gx-preview .v2wf-tab .v2wf-ix { font-weight: 700; font-size: 13px; color: #aab4ab; width: 30px; height: 30px; border-radius: 9px; background: #f3f5f0; display: grid; place-items: center; flex: 0 0 30px; transition: .2s; }
.gx-preview .v2wf-tabtxt b { display: block; font-size: 15px; color: var(--ink); letter-spacing: -.02em; }
.gx-preview .v2wf-tabtxt span { font-size: 12px; color: var(--muted); }
.gx-preview .v2wf-tab.active { background: rgba(204,236,68,.08); }
.gx-preview .v2wf-bar { position: absolute; inset-inline: 14px; bottom: 7px; height: 0px; border-radius: 2px; background: rgba(204,236,68,.25); overflow: hidden; }
.gx-preview .v2wf-tab:not(.active) .v2wf-bar { opacity: 0; }
.gx-preview .v2wf-tab.active .v2wf-bar::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 2px; width: 0; border-radius: 2px; background: var(--lime); animation: v2wffill 5s linear forwards; }
@keyframes v2wffill { from { width: 0 } to { width: 100% } }
.gx-preview #v2-workflow .v2wf-tabs {
    flex-wrap: nowrap;
    gap: 0;
    width: min(100%, 520px);
    box-sizing: border-box;
    margin-inline: auto;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid rgba(20,20,27,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 16px 42px rgba(20,20,27,.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.gx-preview #v2-workflow .v2wf-tab {
    flex: 1 1 0;
    min-width: 0;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 10px;
    background: transparent;
}
.gx-preview #v2-workflow .v2wf-tab .v2wf-ix {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    font-size: 11px;
}
.gx-preview #v2-workflow .v2wf-tabtxt b {
    font-size: 13px;
    white-space: nowrap;
}
.gx-preview #v2-workflow .v2wf-bar {
    inset-inline: 10px;
    bottom: 0px;
}
.gx-preview .v2wf-stage { position: relative; height: 700px; }
.gx-preview .v2wf-scr { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(.965); transition: opacity .45s, transform .45s cubic-bezier(.34,1.2,.5,1); pointer-events: none; }
.gx-preview .v2wf-scr.active { opacity: 1; transform: none; pointer-events: auto; }
.gx-preview #v2-workflow .v2wf {
    width: 100%;
    --v2wf-scale: 1;
    --v2wf-stage-h: 655px;
}
.gx-preview #v2-workflow .v2wf-stage {
    box-sizing: border-box;
    height: var(--v2wf-stage-h);
    overflow: hidden;
    border: 1px solid rgba(20,20,27,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(20,20,27,.18);
}
.gx-preview #v2-workflow .v2wf-scr {
    inset: 0 auto auto 0;
    width: 1180px;
    height: 655px;
    transform-origin: top left;
    transform: translateY(16px) scale(var(--v2wf-scale));
}
.gx-preview #v2-workflow .v2wf-scr.active {
    transform: scale(var(--v2wf-scale));
}
.gx-preview #v2-workflow .v2wf-scr > :is(.v2real-app, .v2app) {
    width: 100%;
    height: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.gx-preview #v2-workflow .v2real-logo { width: 120px; }
.gx-preview #v2-workflow .v2real-search { display: flex; }
.gx-preview #v2-workflow .v2real-actions { gap: 16px; }
.gx-preview #v2-workflow .v2real-rail { display: flex; }
.gx-preview #v2-workflow .v2real-folders { display: block; }
.gx-preview #v2-workflow .v2real-list { display: flex; width: 200px; flex-basis: 200px; }
.gx-preview #v2-workflow .v2real-thread { min-width: 230px; }
.gx-preview #v2-workflow .v2real-side { display: block; }
.gx-preview #v2-workflow .v2real-media.product { height: 265px; }

/* Workflow chrome: one header and sidebar across the four screens. */
.gx-preview #v2-workflow .v2real-top {
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: #111111;
}
.gx-preview #v2-workflow .v2real-logo {
    width: 98px;
    height: 16px;
    justify-self: start;
}
.gx-preview #v2-workflow .v2real-search {
    width: 268px;
    height: 22px;
    margin: 0;
    justify-self: center;
    border-radius: 8px;
    background: #2c2c2c;
    font-size: 11px;
}
.gx-preview #v2-workflow .v2real-actions {
    justify-self: end;
    margin: 0;
    gap: 14px;
    font-size: 12px;
    color: #f2f2f2;
}
.gx-preview #v2-workflow .v2real-user { min-width: 0; gap: 6px; }
.gx-preview #v2-workflow .v2real-user-ic {
    width: 22px;
    height: 22px;
    background: #2a2a2a;
    border: 0;
    color: #fff;
    font-size: 10px;
}
.gx-preview #v2-workflow .v2real-user b { font-size: 10px; font-weight: 600; }
.gx-preview #v2-workflow .v2real-user small {
    display: inline-flex;
    width: fit-content;
    margin-top: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background: #d6f25c;
    color: #172017;
    font-size: 8px;
    line-height: 1.4;
}
.gx-preview #v2-workflow .v2real-rail {
    width: 56px;
    flex: 0 0 56px;
    justify-content: flex-start;
    padding: 10px 0 8px;
    gap: 8px;
    background: #fff;
}
.gx-preview #v2-workflow .v2real-nav { gap: 3px; color: #8b948c; }
.gx-preview #v2-workflow .v2real-nav > span {
    width: 28px;
    height: 22px;
    border-radius: 8px;
    font-size: 11px;
}
.gx-preview #v2-workflow .v2real-nav small {
    max-width: 52px;
    font-size: 7px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.gx-preview #v2-workflow .v2real-nav .v2rail-ic { width: 13px; height: 13px; }
.gx-preview #v2-workflow .v2real-rail-div {
    width: 22px;
    height: 1px;
    margin: 2px 0;
    background: #e4eadf;
    flex: 0 0 1px;
}
.gx-preview #v2-workflow .v2real-chat {
    background-color: #e4e3e1;
    background-image: none;
}
.gx-preview #v2-workflow .v2real-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/wa-wallpaper.png');
    background-repeat: repeat-x;
    background-position: left top;
    background-size: auto 100%;
    opacity: .22;
    pointer-events: none;
}
.gx-preview #v2-workflow .v2real-chat > * { position: relative; z-index: 1; }

/* ===== Faux GO! Express app shell ===== */
.gx-preview .v2app { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.gx-preview .v2app-top { display: flex; align-items: center; gap: 14px; height: 48px; flex: 0 0 48px; padding: 0 16px; background: #171717; color: #fff; }
.gx-preview .v2app-logo { height: 22px; width: auto; object-fit: contain; display: block; }
.gx-preview .v2app-search { flex: 1; max-width: 340px; margin: 0 auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: rgba(255,255,255,.5); }
.gx-preview .v2app-topr { display: flex; align-items: center; gap: 15px; margin-inline-start: auto; color: rgba(255,255,255,.65); font-size: 14px; }
.gx-preview .v2app-user { display: flex; align-items: center; gap: 8px; background: #000; border-radius: 999px; padding: 3px 4px 3px 12px; }
.gx-preview .v2app-uav { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; font-size: 11px; }
.gx-preview .v2app-utxt { display: flex; flex-direction: column; line-height: 1.15; }
.gx-preview .v2app-utxt b { font-size: 10.5px; color: #fff; }
.gx-preview .v2app-utxt small { font-size: 9px; color: var(--lime); font-weight: 700; }
.gx-preview .v2app-body { flex: 1; display: flex; min-height: 0; }
.gx-preview .v2app-rail { flex: 0 0 72px; width: 72px; background: #fff; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0; overflow: hidden; }
.gx-preview .v2rail-i { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; color: #8a948b; }
.gx-preview .v2rail-box { width: 42px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; }
.gx-preview .v2rail-ic { width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.gx-preview .v2rail-i small { font-size: 8.5px; font-weight: 700; }
.gx-preview .v2rail-i.active { color: #172017; }
.gx-preview .v2rail-i.active .v2rail-box { background: var(--lime); }
.gx-preview .v2rail-div { width: 40px; height: 1px; background: var(--line); margin: 6px 0; flex: 0 0 1px; }
.gx-preview .v2app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.gx-preview .v2pg-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.gx-preview .v2pg-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.gx-preview .v2pg-actions { display: flex; gap: 7px; margin-inline-start: auto; }
.gx-preview .v2btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 11.5px; font-weight: 800; border: 1px solid var(--line); background: #fff; color: #46514a; white-space: nowrap; }
.gx-preview .v2btn.lime { background: var(--lime); border-color: transparent; color: #172017; }

/* Kanban */
.gx-preview .v2kanban { flex: 1; display: flex; gap: 12px; padding: 14px 16px; background: #f5f6f4; overflow: hidden; }
.gx-preview .v2kcol { flex: 1; min-width: 0; background: #eef0ec; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; }
.gx-preview .v2khead { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 11px; font-size: 12px; font-weight: 700; color: #3a443d; }
.gx-preview .v2khead .kn { background: #fff; border-radius: 999px; min-width: 20px; height: 18px; padding: 0 6px; display: grid; place-items: center; font-size: 10.5px; color: #7a857d; font-weight: 700; }
.gx-preview .v2khead .kn.amber { background: #fff3d6; color: #9a6a00; }
.gx-preview .v2kcard { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gx-preview .kc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.gx-preview .kc-id { color: var(--ink); font-size: 13px; font-weight: 700; }
.gx-preview .kc-date { font-size: 10px; color: #9aa49c; }
.gx-preview .kc-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #3a443d; margin-bottom: 4px; }
.gx-preview .kc-row i { color: #9aa49c; font-size: 10px; width: 12px; text-align: center; }
.gx-preview .kc-prod { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #46514a; background: #f7f8f4; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 7px 0; }
.gx-preview .kc-thumb { width: 30px; height: 30px; border-radius: 7px; background: #eef0ec; overflow: hidden; display: grid; place-items: center; flex: 0 0 30px; }
.gx-preview .kc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gx-preview .kc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.gx-preview .kc-price { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.gx-preview .kc-ics { display: flex; gap: 9px; color: #b6bfb6; font-size: 12px; }
.gx-preview .kc-status { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; margin: 7px 0; padding: 5px 9px; border-radius: 7px; }
.gx-preview .kc-status .d { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.gx-preview .kc-status.red { background: #fdeaea; color: #d14343; } .gx-preview .kc-status.red .d { background: #d14343; }
.gx-preview .kc-status.gray { background: #f0f2ee; color: #7a857d; } .gx-preview .kc-status.gray .d { background: #9aa49c; }
.gx-preview .kc-status.green { background: rgba(204,236,68,.22); color: var(--lime-deep); } .gx-preview .kc-status.green .d { background: var(--lime-deep); }
.gx-preview .kc-status.amber { background: #fff3d6; color: #9a6a00; } .gx-preview .kc-status.amber .d { background: #e0a000; }
.gx-preview .kc-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.gx-preview .kc-confirm, .gx-preview .kc-cancel { display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-align: center; font-size: 11px; font-weight: 800; padding: 6px 0; border-radius: 7px; border: 1px solid var(--line); }
.gx-preview .kc-confirm { color: var(--lime-deep); border-color: rgba(79,122,0,.3); }
.gx-preview .kc-cancel { color: #d14343; border-color: rgba(209,67,67,.25); }
.gx-preview .v2kcard.mini { padding: 9px 11px; }
.gx-preview .v2kcard.mini .kc-row { margin: 0; margin-top: 4px; }
.gx-preview .v2wf-scr.active .v2kcard.drop { animation: v2drop 1s .4s both; transform-origin: top center; }
@keyframes v2drop {
    0% { opacity: 0; transform: translateY(-60px) scale(.9); box-shadow: 0 0 0 0 rgba(204,236,68,0); }
    45% { opacity: 1; transform: translateY(8px) scale(1.03); box-shadow: 0 0 0 4px rgba(204,236,68,.55); }
    70% { transform: translateY(-2px) scale(1); box-shadow: 0 0 0 6px rgba(204,236,68,.22); }
    100% { opacity: 1; transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
}

/* Orders board replica */
.gx-preview #v2-workflow .v2orders-app { border-radius: 0; }
.gx-preview #v2-workflow .v2orders-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.gx-preview #v2-workflow .v2orders-head {
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid #e6ebe1;
}
.gx-preview #v2-workflow .v2orders-head .v2orders-title {
    margin: 0;
    color: #181d19;
    font-size: 15px;
    font-weight: 700;
}
.gx-preview #v2-workflow .v2orders-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gx-preview #v2-workflow :is(.v2orders-btn, .v2btn, .v2real-order-title button, .v2rm-payout button) {
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid rgba(197, 213, 31, 0.8);
    border-radius: 12px;
    background-image: linear-gradient(#e3f530, #ccec44);
    background-color: #ccec44;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.gx-preview #v2-workflow .v2orders-btn:not(.lime),
.gx-preview #v2-workflow .v2real-order-title button {
    background-image: none;
    background-color: #fff;
    border: 1px solid rgba(17, 27, 33, .22);
    box-shadow: none;
    color: #172017;
}
.gx-preview #v2-workflow .v2orders-board {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(132px, 1fr));
    gap: 9px;
    padding: 10px;
    overflow: hidden;
    background: #fff;
}
.gx-preview #v2-workflow .v2orders-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 7px;
    border-radius: 8px;
    background: #fff;
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-width: none;
}
.gx-preview #v2-workflow .v2orders-col::-webkit-scrollbar { display: none; }
.gx-preview #v2-workflow .v2orders-colhead {
    height: 25px;
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 6px 9px;
    color: #222823;
    font-size: 11px;
    font-weight: 700;
    border-left: 3px solid #9ca3af;
}
.gx-preview #v2-workflow .v2orders-col.new .v2orders-colhead { border-left-color: #4b7cff; }
.gx-preview #v2-workflow .v2orders-col.confirming .v2orders-colhead { border-left-color: #ff9b37; }
.gx-preview #v2-workflow .v2orders-col.confirmed .v2orders-colhead { border-left-color: #5ca75c; }
.gx-preview #v2-workflow .v2orders-col.cancelled .v2orders-colhead { border-left-color: #a9adb0; }
.gx-preview #v2-workflow .v2orders-col.processing .v2orders-colhead { border-left-color: #15a5bd; }
.gx-preview #v2-workflow .v2orders-col.pickup .v2orders-colhead { border-left-color: #6c63ff; }
.gx-preview #v2-workflow .v2orders-colhead b {
    min-width: 17px;
    height: 16px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #e7edf5;
    color: #6b7d93;
    font-size: 8px;
}
.gx-preview #v2-workflow .v2order-card {
    margin-bottom: 7px;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid #e1e7dc;
    background: #fff;
    box-shadow: 0 1px 3px rgba(7,18,15,.07);
}
.gx-preview #v2-workflow .oc-top,
.gx-preview #v2-workflow .oc-top span,
.gx-preview #v2-workflow .oc-foot,
.gx-preview #v2-workflow .oc-icons,
.gx-preview #v2-workflow .oc-status,
.gx-preview #v2-workflow .oc-cta span {
    display: flex;
    align-items: center;
}
.gx-preview #v2-workflow .oc-top {
    justify-content: space-between;
    gap: 7px;
    margin-bottom: 5px;
}
.gx-preview #v2-workflow .oc-top span { gap: 4px; min-width: 0; }
.gx-preview #v2-workflow .oc-top b {
    overflow: hidden;
    color: #171d18;
    font-size: 9.2px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gx-preview #v2-workflow .oc-top em {
    flex: 0 0 auto;
    color: #8f9b91;
    font-size: 7.4px;
    font-style: normal;
    white-space: nowrap;
}
.gx-preview #v2-workflow .oc-line {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-bottom: 3px;
    color: #4e584f;
    font-size: 9.8px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gx-preview #v2-workflow .oc-line i {
    width: 10px;
    color: #8c968d;
    font-size: 8px;
    text-align: center;
}
.gx-preview #v2-workflow .oc-product {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 6px 0;
    padding: 4px 5px;
    border-top: 1px solid #edf1e8;
    border-bottom: 1px solid #edf1e8;
    color: #4f584f;
    font-size: 8.6px;
    line-height: 1.15;
}
.gx-preview #v2-workflow .oc-product img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: cover;
    background: #eef2e9;
}
.gx-preview #v2-workflow .oc-foot {
    justify-content: space-between;
    gap: 5px;
    min-height: 17px;
}
.gx-preview #v2-workflow .oc-foot strong {
    margin-left: auto;
    color: #293129;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}
.gx-preview #v2-workflow .oc-agent {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef2e9;
    color: #576258;
    font-size: 7px;
    font-weight: 700;
    overflow: hidden;
    flex: 0 0 15px;
}
.gx-preview #v2-workflow .oc-agent.m { background: #fff6de; color: #8b6900; }
.gx-preview #v2-workflow .oc-agent.h { background: #eef4ff; color: #3155a4; }
.gx-preview #v2-workflow .oc-agent.ai { background: #dcff4a; padding: 2px; }
.gx-preview #v2-workflow .oc-agent img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gx-preview #v2-workflow .oc-icons { gap: 8px; color: #b5e522; font-size: 10px; }
.gx-preview #v2-workflow .oc-status {
    gap: 5px;
    min-height: 19px;
    margin: 5px 0;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
}
.gx-preview #v2-workflow .oc-status span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: 0 0 5px;
}
.gx-preview #v2-workflow .oc-status.amber { background: #fff5d9; color: #9b6d00; }
.gx-preview #v2-workflow .oc-status.amber span { background: #d8a200; }
.gx-preview #v2-workflow .oc-status.muted { background: #f2f5ef; color: #7b887d; }
.gx-preview #v2-workflow .oc-status.muted span { background: #9ca89e; }
.gx-preview #v2-workflow .oc-status.green { background: #e7f7dc; color: #2c7a2f; }
.gx-preview #v2-workflow .oc-status.green span { background: #41a941; }
.gx-preview #v2-workflow .oc-status.red { background: #fff0ef; color: #d94b42; }
.gx-preview #v2-workflow .oc-status.red span { background: #d94b42; }
.gx-preview #v2-workflow .oc-status.blue { background: #e7f8fb; color: #087f95; }
.gx-preview #v2-workflow .oc-status.blue span { background: #15a5bd; }
.gx-preview #v2-workflow .oc-status.gray { background: #f1f3f2; color: #748079; }
.gx-preview #v2-workflow .oc-status.gray span { background: #a0a8a2; }
.gx-preview #v2-workflow .oc-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 5px;
}
.gx-preview #v2-workflow .oc-cta span {
    justify-content: center;
    gap: 4px;
    height: 20px;
    border: 1px solid #e1e7dc;
    border-radius: 5px;
    color: #526057;
    font-size: 7.6px;
    font-weight: 700;
}
.gx-preview #v2-workflow .oc-cta span:first-child { color: #4f7a00; }
.gx-preview #v2-workflow .oc-cta span:last-child { color: #c84a42; }
.gx-preview #v2-workflow .v2source.whatsapp { background: #e9f8ee; color: #20bc60; }
.gx-preview #v2-workflow .v2source.manual { background: #f2f0ea; color: #594e3e; }
.gx-preview #v2-workflow .v2wf-scr.active .v2order-card.drop {
    animation: v2drop .9s .35s both;
    transform-origin: top center;
}
@media (max-width: 1040px) {
    .gx-preview #v2-workflow .v2orders-board { grid-template-columns: repeat(6, minmax(132px, 1fr)); overflow-x: hidden; }
    .gx-preview #v2-workflow .v2orders-actions .v2orders-btn:nth-child(4) { display: inline-flex; }
}
@media (max-width: 760px) {
    .gx-preview #v2-workflow .v2orders-board { grid-template-columns: repeat(6, minmax(132px, 1fr)); }
    .gx-preview #v2-workflow .v2orders-actions .v2orders-btn:not(.lime) { display: inline-flex; }
}

/* Inbox (4 panes) */
.gx-preview .v2ib-folders { flex: 0 0 150px; width: 150px; background: #fbfcf8; border-inline-end: 1px solid var(--line); padding: 12px 10px; }
.gx-preview .v2ib-ftitle { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px; padding-inline-start: 4px; }
.gx-preview .v2ib-f { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; font-size: 12px; color: #46514a; margin-bottom: 2px; }
.gx-preview .v2ib-f span { display: flex; align-items: center; gap: 8px; }
.gx-preview .v2ib-f i { color: #9aa49c; font-size: 11px; width: 14px; text-align: center; }
.gx-preview .v2ib-f b { font-size: 11px; color: #7a857d; }
.gx-preview .v2ib-f.active { background: rgba(204,236,68,.18); color: #172017; font-weight: 800; }
.gx-preview .v2ib-f.foot { color: #7a857d; margin-top: 8px; }
.gx-preview .v2ib-list { flex: 0 0 235px; width: 235px; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; }
.gx-preview .v2ib-lhead { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.gx-preview .v2ib-lhead i { color: #9aa49c; font-size: 12px; }
.gx-preview .v2ib-tabs { display: flex; align-items: center; gap: 12px; padding: 0 14px 9px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.gx-preview .v2ib-tabs .t { color: #9aa49c; font-weight: 700; }
.gx-preview .v2ib-tabs .t.active { color: var(--ink); font-weight: 700; }
.gx-preview .v2ib-tabs .t.tg { margin-inline-start: auto; background: #f0f2ee; border-radius: 999px; padding: 2px 9px; color: #7a857d; font-weight: 700; }
.gx-preview .v2ib-conv { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.gx-preview .v2ib-conv.active { background: rgba(204,236,68,.1); }
.gx-preview .v2ib-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 30px; }
.gx-preview .v2ib-av.sm { width: 28px; height: 28px; flex: 0 0 28px; }
.gx-preview .v2ib-cbody { flex: 1; min-width: 0; }
.gx-preview .v2ib-ctop { display: flex; justify-content: space-between; align-items: center; }
.gx-preview .v2ib-ctop b { font-size: 12px; color: var(--ink); }
.gx-preview .v2ib-ctop span { font-size: 9.5px; color: #9aa49c; }
.gx-preview .v2ib-cmsg { font-size: 11px; color: #7a857d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.gx-preview .v2ib-cbdg { font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 999px; flex: 0 0 auto; }
.gx-preview .v2ib-cbdg.pink { background: #fff3d6; color: #9a6a00; }
.gx-preview .v2ib-cbdg.amber { background: #fff3d6; color: #9a6a00; }
.gx-preview .v2ib-cbdg.green { background: rgba(204,236,68,.3); color: var(--lime-deep); }
.gx-preview .v2ib-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gx-preview .v2ib-thead { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.gx-preview .v2ib-tid { line-height: 1.15; }
.gx-preview .v2ib-tid b { font-size: 12.5px; color: var(--ink); display: block; }
.gx-preview .v2ib-tid span { font-size: 10px; color: #9aa49c; }
.gx-preview .v2ib-chip { margin-inline-start: auto; font-size: 10px; color: #7a857d; border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.gx-preview .v2ib-done { font-size: 10px; color: #7a857d; border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.gx-preview .v2ib-tbody { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #ECE5DD; background-image: radial-gradient(rgba(11,31,28,.06) 1px, transparent 1px); background-size: 14px 14px; overflow: hidden; }
.gx-preview .v2ib-note { background: #fdf6da; border: 1px solid #f3e9b8; border-radius: 9px; padding: 9px 11px; font-size: 11px; color: #6b5e2a; line-height: 1.5; }
.gx-preview .v2ib-note b { color: #9a8a2a; }
.gx-preview .v2ib-ntag { display: block; margin-top: 5px; font-size: 9px; color: #ad9; font-weight: 700; }
.gx-preview .v2ib-note.ok { background: rgba(204,236,68,.16); border-color: rgba(79,122,0,.25); color: #2f4012; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gx-preview .v2ib-note.ok i { color: var(--lime-deep); font-size: 14px; }
.gx-preview .v2ib-note.ok b { color: #2f4012; }
.gx-preview .v2ib-note.ok .v2ib-ntag { margin: 0; margin-inline-start: auto; }
.gx-preview .v2ib-compose { border-top: 1px solid var(--line); padding: 9px 13px; background: #fff; }
.gx-preview .v2ib-ctabs { display: flex; gap: 16px; font-size: 11.5px; margin-bottom: 8px; }
.gx-preview .v2ib-ctabs .active { font-weight: 700; color: var(--ink); }
.gx-preview .v2ib-ctabs span { color: #9aa49c; }
.gx-preview .v2ib-input { display: flex; align-items: center; gap: 9px; background: #f5f6f4; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 11.5px; color: #9aa49c; }
.gx-preview .v2ib-input span { flex: 1; }
.gx-preview .v2ib-order { flex: 0 0 230px; width: 230px; border-inline-start: 1px solid var(--line); padding: 14px; position: relative; }
.gx-preview .v2ib-ohead { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gx-preview .v2ib-ohead b { font-size: 15px; color: var(--ink); }
.gx-preview .v2ib-oactive { font-size: 9px; font-weight: 800; background: rgba(204,236,68,.3); color: var(--lime-deep); padding: 2px 8px; border-radius: 999px; }
.gx-preview .v2bdg-wrap { position: relative; display: inline-grid; }
.gx-preview .v2bdg-wrap .v2bdg { grid-area: 1 / 1; }
.gx-preview .v2bdg { font-size: 9px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.gx-preview .v2bdg-confirming { background: #fff3d6; color: #9a6a00; }
.gx-preview .v2bdg-confirmed { background: var(--lime); color: #172017; opacity: 0; }
.gx-preview .v2ib-osub { font-size: 11px; color: #9aa49c; margin: 9px 0 13px; }
.gx-preview .v2ib-oactions { display: flex; gap: 8px; margin-bottom: 14px; }
.gx-preview .v2confirm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--lime-deep); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.gx-preview .v2cancel-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(209,67,67,.3); color: #d14343; border-radius: 9px; padding: 9px 14px; font-size: 12px; font-weight: 800; }
.gx-preview .v2side-field { display: flex; justify-content: space-between; font-size: 12px; padding: 8px 0; border-bottom: 1px dashed #eef0ec; }
.gx-preview .v2side-field span { color: var(--muted); }
.gx-preview .v2side-field b { color: var(--ink); font-weight: 800; }
.gx-preview .v2side-field.total { border-bottom: 0; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.gx-preview .v2side-field.total b { color: var(--lime-deep); font-size: 14px; }
.gx-preview .v2ib-oprod-title { font-size: 10px; font-weight: 700; color: #9aa49c; letter-spacing: .04em; margin: 12px 0 7px; }
.gx-preview .v2ib-oprod { display: flex; align-items: center; gap: 9px; background: #f7f8f4; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.gx-preview .v2ib-othumb { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: #eef0ec; flex: 0 0 38px; display: grid; place-items: center; }
.gx-preview .v2ib-othumb img { width: 100%; height: 100%; object-fit: cover; }
.gx-preview .v2ib-otxt { flex: 1; min-width: 0; }
.gx-preview .v2ib-otxt b { display: block; font-size: 12px; color: var(--ink); }
.gx-preview .v2ib-otxt span { font-size: 10.5px; color: var(--muted); }
.gx-preview .v2ib-oprice { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.gx-preview .v2cursor { position: absolute; top: 92px; inset-inline-start: 30px; color: #0b0e0c; font-size: 22px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); opacity: 0; z-index: 6; }
.gx-preview .v2wf-scr.active .v2cursor { animation: v2cursor 3s cubic-bezier(.5,.05,.2,1) both; }
.gx-preview .v2wf-scr.active .v2confirm-btn { animation: v2btnclick 3s both; }
.gx-preview #v2-workflow .v2real-confirm-cursor {
    top: 55px;
    left: 43px;
    inset-inline-start: auto;
    pointer-events: none;
    transform-origin: 3px 3px;
}
.gx-preview #v2-workflow .v2wf-scr.active .v2real-confirm-cursor {
    animation: v2realConfirmCursor 3s cubic-bezier(.5,.05,.2,1) both;
}
.gx-preview #v2-workflow .v2wf-scr.active .v2real-obtns .ok {
    animation: v2realConfirmClick 3s both;
    transform-origin: center;
}
.gx-preview #v2-workflow .v2wf-scr.active .v2real-obtns .bad {
    animation: v2realCancelOut 3s both;
}
.gx-preview #v2-workflow .v2wf-scr.active .v2real-oh .amber {
    animation: v2realStatusConfirmed 3s both;
}
.gx-preview #v2-workflow .v2wf-scr.active .v2ok-confirm {
    animation: v2realConfirmTextOut 3s both;
}
.gx-preview #v2-workflow .v2wf-scr.active .v2ok-confirmed {
    animation: v2realConfirmTextIn 3s both;
}
.gx-preview .v2wf-scr.active .v2bdg-confirming { animation: v2fadeout .35s 2.35s both; }
.gx-preview .v2wf-scr.active .v2bdg-confirmed { animation: v2pop .55s 2.45s both; }
@keyframes v2cursor {
    0% { opacity: 0; transform: translate(26px, 96px) scale(1.15); }
    18% { opacity: 1; transform: translate(20px, 74px) scale(1.15); }
    55% { opacity: 1; transform: translate(0, 0) scale(1.15); }
    66% { transform: translate(0, 5px) scale(.85); }
    78% { transform: translate(0, 0) scale(1.15); }
    100% { opacity: 1; transform: translate(0, 0) scale(1.15); }
}
@keyframes v2btnclick {
    0%, 55% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,122,0,0); }
    66% { transform: scale(.94); box-shadow: 0 0 0 8px rgba(79,122,0,.20); }
    80% { transform: scale(1.02); box-shadow: 0 0 0 14px rgba(79,122,0,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79,122,0,0); }
}
@keyframes v2realConfirmCursor {
    0% { opacity: 0; transform: translate(88px, 78px) scale(1.12); }
    18% { opacity: 1; transform: translate(62px, 48px) scale(1.12); }
    56% { opacity: 1; transform: translate(0, 0) scale(1.12); }
    66% { opacity: 1; transform: translate(0, 4px) scale(.88); }
    78% { opacity: 1; transform: translate(0, 0) scale(1.12); }
    100% { opacity: 1; transform: translate(0, 0) scale(1.12); }
}
@keyframes v2realConfirmClick {
    0%, 55% {
        transform: scale(1);
        color: #4d8b05;
        border-color: #bce08b;
        background: #f2fbdf;
        box-shadow: 0 0 0 0 rgba(79,122,0,0);
    }
    66% {
        transform: scale(.94);
        color: #fff;
        border-color: #4d8b05;
        background: #4d8b05;
        box-shadow: 0 0 0 8px rgba(79,122,0,.18);
    }
    82% {
        transform: scale(1.02);
        color: #fff;
        border-color: #4d8b05;
        background: #4d8b05;
        box-shadow: 0 0 0 14px rgba(79,122,0,0);
    }
    100% {
        transform: scale(1);
        color: #fff;
        border-color: #4d8b05;
        background: #4d8b05;
        box-shadow: 0 0 0 0 rgba(79,122,0,0);
    }
}
@keyframes v2realCancelOut {
    0%, 64% {
        max-width: 72px;
        padding-inline: 11px;
        opacity: 1;
        transform: translateX(0) scale(1);
        border-color: #f0c5c2;
    }
    78%, 100% {
        max-width: 0;
        padding-inline: 0;
        opacity: 0;
        transform: translateX(6px) scale(.9);
        border-color: transparent;
        visibility: hidden;
    }
}
@keyframes v2realStatusConfirmed {
    0%, 64% {
        background: #fff4d0;
        color: #c58a00;
        transform: scale(1);
    }
    78% {
        background: #e0f3be;
        color: #4f8e00;
        transform: scale(1.08);
    }
    100% {
        background: #e0f3be;
        color: #4f8e00;
        transform: scale(1);
    }
}
@keyframes v2realConfirmTextOut {
    0%, 64% { opacity: 1; transform: translateY(0); }
    78%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes v2realConfirmTextIn {
    0%, 64% { opacity: 0; transform: translateY(4px); }
    78%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes v2fadeout { to { opacity: 0; transform: translateY(-5px); } }
@keyframes v2pop { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.35); } 78% { transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }

/* Delivery sub-nav + table */
.gx-preview .v2dl-sub { flex: 0 0 150px; width: 150px; background: #fbfcf8; border-inline-end: 1px solid var(--line); padding: 14px 10px; }
.gx-preview #v2-workflow .v2app,
.gx-preview #v2-workflow .v2app-main,
.gx-preview #v2-workflow .v2dl-sub,
.gx-preview #v2-workflow .v2tbl { background: #fff; }
.gx-preview .v2dl-stitle { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 12px; padding-inline-start: 4px; }
.gx-preview .v2dl-s { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; font-size: 12px; color: #46514a; margin-bottom: 2px; }
.gx-preview .v2dl-s i { color: #9aa49c; font-size: 12px; width: 14px; text-align: center; }
.gx-preview .v2dl-s.active { background: rgba(204,236,68,.18); color: #172017; font-weight: 800; }
.gx-preview .v2dl-tabs { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gx-preview .v2dl-tabs .dt { font-size: 11.5px; color: #7a857d; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.gx-preview .v2dl-tabs .dt b { color: #b6bfb6; font-size: 10px; background: #f0f2ee; border-radius: 999px; padding: 1px 7px; }
.gx-preview .v2dl-tabs .dt.active { color: var(--ink); font-weight: 700; }
.gx-preview .v2dl-tabs .dt.active b { color: #172017; background: var(--lime); }
.gx-preview .v2tbl { padding: 4px 16px 16px; overflow: hidden; }
.gx-preview .v2tbl-head, .gx-preview .v2tbl-row { display: grid; grid-template-columns: 1.3fr .9fr 1fr .9fr 1.4fr 1.1fr .9fr; gap: 10px; align-items: center; }
.gx-preview .v2tbl-head { font-size: 10.5px; font-weight: 700; color: #9aa49c; padding: 14px 8px 11px; border-bottom: 1px solid var(--line); }
.gx-preview .v2tbl-row { font-size: 11.5px; color: var(--ink); padding: 13px 8px; border-bottom: 1px solid var(--line); }
.gx-preview .v2tbl-row.hot { background: rgba(204,236,68,.06); }
.gx-preview .v2tbl .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 10.5px; color: #3a443d; }
.gx-preview .v2tbl .mut { color: #9aa49c; }
.gx-preview .v2tbl .b { font-weight: 700; }
.gx-preview .ta-end { text-align: end; }
.gx-preview .v2st { justify-self: start; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.gx-preview .v2st-pickup, .gx-preview .v2st-pending { background: #ece3fb; color: #6b3fc0; }
.gx-preview .v2st-deliv { background: rgba(204,236,68,.45); color: var(--lime-deep); }
.gx-preview .v2st-out { background: #dbeafe; color: #1f6fd6; }
.gx-preview .v2st-wh { background: #e6eef0; color: #4a6470; }
.gx-preview .v2st-return { background: #ffe6d9; color: #c2541c; }
.gx-preview .v2morph { position: relative; display: inline-grid; background: #ece3fb; }
.gx-preview .v2morph .m-a, .gx-preview .v2morph .m-b { grid-area: 1 / 1; }
.gx-preview .v2morph .m-a { color: #6b3fc0; }
.gx-preview .v2morph .m-b { color: #172017; opacity: 0; }
.gx-preview .v2wf-scr.active .v2tbl-row.hot { animation: v2rowflash 1.8s .5s both; }
.gx-preview .v2wf-scr.active .v2morph { animation: v2morphbg 1.7s .7s both; }
.gx-preview .v2wf-scr.active .v2morph .m-a { animation: v2fadeout .3s 1.85s both; }
.gx-preview .v2wf-scr.active .v2morph .m-b { animation: v2pop .5s 1.9s both; }
@keyframes v2rowflash { 0%, 25% { background: rgba(204,236,68,0); } 55% { background: rgba(204,236,68,.28); } 100% { background: rgba(204,236,68,.07); } }
@keyframes v2morphbg { 0%, 55% { background: #ece3fb; transform: scale(1); } 72% { background: #ccec44; transform: scale(1.28); } 86% { transform: scale(.96); } 100% { background: #ccec44; transform: scale(1); } }

@media (max-width: 1080px) {
    .gx-preview .v2ib-folders, .gx-preview .v2hide-md { display: none; }
}
@media (max-width: 860px) {
    .gx-preview .v2ib-list { display: none; }
}
@media (max-width: 720px) {
    .gx-preview .v2wf-tabs { gap: 8px; }
    .gx-preview .v2wf-stage { height: 760px; }
    .gx-preview .v2ib-order, .gx-preview .v2dl-sub { display: none; }
    .gx-preview .v2hide-sm { display: none; }
    .gx-preview .v2tbl-head, .gx-preview .v2tbl-row { grid-template-columns: 1.2fr .9fr 1fr 1.1fr .9fr; }
    .gx-preview .v2kanban { overflow-x: auto; }
    .gx-preview .v2kcol { min-width: 160px; }
    .gx-preview #v2-workflow .v2wf-stage { height: var(--v2wf-stage-h); }
    .gx-preview #v2-workflow .v2dl-sub { display: block; }
    .gx-preview #v2-workflow .v2hide-sm { display: inline; }
    .gx-preview #v2-workflow .v2tbl-head,
    .gx-preview #v2-workflow .v2tbl-row { grid-template-columns: 1.3fr .9fr 1fr .9fr 1.4fr 1.1fr .9fr; }
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 980px) {
    .gx-preview .split-grid { grid-template-columns: 1fr; }
    .gx-preview .split-grid.reverse > .split-copy { order: 0; }
    .gx-preview .reports-grid { grid-template-columns: 1fr 1fr; }
    .gx-preview .v2rm-top { align-items: flex-start; flex-direction: column; }
    .gx-preview .v2rm-filters { justify-content: flex-start; }
    .gx-preview .v2rm-hero-grid { grid-template-columns: 1fr; }
    .gx-preview .v2rm-wide, .gx-preview .v2rm-team, .gx-preview .v2rm-chats, .gx-preview .v2rm-half { grid-column: 1 / -1; }
    .gx-preview .gx-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Hero stacks: copy, then the order timeline as a wrapping row, then the
       proof bar as a 2x2 grid. The scrim goes vertical because the copy now sits
       over the photo instead of beside it. */
    .gx-preview .v2-hero { --v2-hero-height: auto; --v2-hero-wedge: 104px; }
    .gx-preview .v2-hero-bg { background-position: 58% 62%; }
    .gx-preview .v2-hero-overlay {
        background:
            linear-gradient(180deg, rgba(3,8,10,.90) 0%, rgba(3,8,10,.72) 34%, rgba(3,8,10,.40) 58%, rgba(3,8,10,.20) 78%, rgba(3,8,10,.10) 100%);
    }
    .gx-preview .v2-hero-inner { min-height: 0; height: auto; padding: 88px 22px 30px; }
    .gx-preview .v2-hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "steps"; gap: 30px; justify-items: stretch; }
    .gx-preview .v2-hero-copy,
    .gx-preview.v2-ltr .v2-hero-copy { width: min(100%, 640px); max-width: 640px; padding-top: 0; }
    .gx-preview .v2-hero-steps { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
    .gx-preview .v2-hero-steps-rail { display: none; }
    .gx-preview .v2-hero-stats { grid-template-columns: 1fr 1fr; margin-top: 42px; padding: 18px 6px; }
    .gx-preview .v2-hstat + .v2-hstat { border-left: 0; }
    .gx-preview .v2-hstat:nth-child(even) { border-left: 1px solid var(--line); }
    .gx-preview .v2-hstat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 18px; }
    .gx-preview #v2-workflow {
        margin-top: -18px;
        padding-top: 34px;
        padding-inline: 18px;
        padding-bottom: 88px;
    }
    .gx-preview .v2wf-intro h2 { font-size: clamp(21px, 3.4vw, 27px); }
    .gx-preview #v2-workflow .v2wf-stage { border-radius: 18px; box-shadow: 0 24px 64px rgba(20,20,27,.16); }
    .gx-preview .v2-pricing-section .v2-pricing-wrap { grid-template-columns: 1fr; }
    .gx-preview .v2-download-inner { grid-template-columns: 1fr; gap: 28px; }
    .gx-preview.v2-rtl .v2-download-copy,
    .gx-preview.v2-rtl .v2-download-visual,
    .gx-preview.v2-ltr .v2-download-copy {
        order: initial;
        text-align: center;
    }
    .gx-preview .v2-download-title,
    .gx-preview .v2-download-copy .section-text {
        margin-inline: auto;
    }
    .gx-preview.v2-rtl .v2-download-title,
    .gx-preview.v2-ltr .v2-download-title {
        text-align: center;
    }
    .gx-preview .v2-download-actions { justify-content: center; }
    .gx-preview .v2-download-visual { min-height: auto; }
    .gx-preview .v2-download-visual img { width: min(100%, 520px); }
}
@media (max-width: 640px) {
    .gx-preview .section, .gx-preview .cta-section, .gx-preview .ai-fullbleed .ai-inner { padding: 56px 18px; }
    .gx-preview h2 { line-height: 1.22; }
    .gx-preview .section-text,
    .gx-preview .feature-ticks li { line-height: 1.5rem; }
    .gx-preview .ai-fullbleed { padding: 0; }
    .gx-preview .v2-hero { --v2-hero-wedge: 84px; }
    .gx-preview .v2-hero-bg { background-position: 60% 64%; }
    .gx-preview .v2-hero-inner { min-height: 0; height: auto; padding: 88px 15px 26px; }
    .gx-preview .v2-hero-title { line-height: 1.22; overflow-wrap: anywhere; }
    .gx-preview .v2-dash { width: 34px; height: 7px; margin-inline: 8px; }
    .gx-preview .v2-hero-sub { font-size: 15.5px; line-height: 1.62; max-width: none; }
    .gx-preview .v2-hero-actions { display: grid; grid-template-columns: 1fr; }
    .gx-preview .v2-hero-actions .get-started-cta-button,
    .gx-preview .v2-hero-ghost,
    .gx-preview .v2-cta, .gx-preview .v2-cta-ghost { width: 100%; min-height: 52px; }
    .gx-preview .v2-hero-steps { grid-template-columns: 1fr; }
    .gx-preview .v2-hero-stats { margin-top: 34px; padding: 16px 4px; border-radius: 18px; }
    .gx-preview .v2-hstat { gap: 11px; padding: 4px 12px; }
    .gx-preview .v2-hstat-ic { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; }
    .gx-preview .v2-hstat-txt small { font-size: 11.5px; }
    .gx-preview .v2-hstat-txt small i { font-size: 10.5px; }
    .gx-preview .v2-hero-benefits { display: none; }
    .gx-preview #v2-workflow {
        margin-top: -15px;
        padding-top: 28px;
        padding-inline: 14px;
        padding-bottom: 68px;
    }
    .gx-preview .v2wf-intro { max-width: 330px; margin-bottom: 10px; }
    .gx-preview .v2wf-intro h2 { font-size: 20px; line-height: 1.35; }
    .gx-preview #v2-workflow .v2wf-tabs { margin-bottom: 10px; }
    .gx-preview #v2-workflow .v2wf-tab { padding-inline: 6px; gap: 5px; }
    .gx-preview #v2-workflow .v2wf-tab .v2wf-ix { width: 24px; height: 24px; flex-basis: 24px; }
    .gx-preview #v2-workflow .v2wf-tabtxt b { font-size: 11px; }
    .gx-preview #v2-workflow .v2wf-stage { border-radius: 14px; box-shadow: 0 18px 46px rgba(20,20,27,.14); }
    .gx-preview .reports-grid, .gx-preview .metric-chips, .gx-preview .conf-btns, .gx-preview .gx-services-grid { grid-template-columns: 1fr; }
    .gx-preview .v2-faq-section { padding-top: 64px; padding-bottom: 48px; }
    .gx-preview .v2-faq-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
    .gx-preview .v2-faq-head h2 { font-size: clamp(32px, 8vw, 40px); }
    .gx-preview .v2-int-cta-row { display: grid; grid-template-columns: 1fr; align-items: stretch; }
    .gx-preview .v2-int-cta-row .get-started-cta-button,
    .gx-preview .v2-app-badge-link { width: 100%; max-width: 240px; justify-self: stretch; }
    .gx-preview .v2-app-badge-link { flex-basis: auto; }
    .gx-preview .v2-download-section { padding: 50px 18px 0; }
    .gx-preview .v2-download-title { font-size: 42px; line-height: 1.08; }
    .gx-preview .v2-download-copy .section-text { font-size: 15.5px; line-height: 1.62; }
    .gx-preview .v2-download-actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; margin-top: 24px; }
    .gx-preview .v2-download-actions .v2-app-badge-link { width: min(158px, calc(50vw - 23px)); max-width: none; flex: 0 1 min(158px, calc(50vw - 23px)); justify-self: auto; }
    .gx-preview .v2-download-visual img { width: min(100%, 430px); }
    .gx-preview .faq summary { padding: 18px 2px; font-size: 16px; }
    .gx-preview .faq p { padding-inline-start: 24px; font-size: 14px; }
    .gx-preview #v2-reports .v2-report-badges span { width: 100%; justify-content: flex-start; }
    .gx-preview .v2-report-mock { padding: 10px; border-radius: 16px; }
    .gx-preview .v2rm-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
    .gx-preview .v2rm-filters span { min-width: 0; padding: 0 10px; font-size: 10px; }
    .gx-preview .v2rm-payout { padding: 18px; }
    .gx-preview .v2rm-payout-top { align-items: flex-start; flex-direction: column; }
    .gx-preview .v2rm-alerts, .gx-preview .v2rm-stat-row { grid-template-columns: 1fr 1fr; }
    .gx-preview .v2rm-alert { grid-template-columns: 38px 1fr; }
    .gx-preview .v2rm-alert > i { display: none; }
    .gx-preview .v2rm-card { padding: 14px; }
    .gx-preview .v2rm-card-head { align-items: flex-start; flex-direction: column; }
    .gx-preview .v2rm-table { overflow-x: auto; margin-inline: -14px; padding-bottom: 4px; }
    .gx-preview .v2rm-tr { min-width: 610px; padding-inline: 14px; }
    .gx-preview .v2rm-mini-table { overflow-x: auto; }
    .gx-preview .v2rm-mini-table > div { min-width: 470px; }
    .gx-preview .conf-grid { grid-template-columns: 1fr; }
    .gx-preview .service-item { min-height: 340px; margin: 0 !important; }
    .gx-preview .service-content { padding: 0 20px 22px; }
    .gx-preview .service-content h3 { font-size: 19px; }
    .gx-preview .cta-box { padding: 38px 20px; border-radius: 30px; }
    .gx-preview .hero-actions .btn { width: 100%; }
    .gx-preview .priceband { padding: 28px 20px; }
    .gx-preview .v2-integrations-board { padding: 2px; border-radius: 0; }
    .gx-preview .v2-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 102px; gap: 10px; }
    .gx-preview .v2-int-card { padding: 14px; border-radius: 16px; }
    .gx-preview .v2-int-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
    .gx-preview .v2-int-name { font-size: 13px; margin-top: 14px; }
    .gx-preview .sr2-stage { flex-direction: column; }
    .gx-preview .sr2-steps { flex: 0 0 auto; width: 68%; max-width: 340px; margin-inline-end: 0; }
    .gx-preview .sr-thread { max-width: 340px; margin-inline: auto; }
    .gx-preview .v2-pricing-section { padding: 56px 18px; }
    .gx-preview .v2-pricing-section .v2-pricing-hero { min-height: auto; padding: 22px 18px; border-radius: 22px; }
    .gx-preview .v2-pricing-section .v2-free-card strong { font-size: 42px; }
    .gx-preview .v2-tariff-head, .gx-preview .v2-tariff-foot { flex-direction: column; align-items: stretch; padding: 18px; }
    .gx-preview .v2-price-search { width: 100%; }
    .gx-preview .v2-tariff-table th, .gx-preview .v2-tariff-table td { padding: 13px 16px; }
    .gx-preview .v2-pricing-section .v2-tariff-table {
        table-layout: auto;
    }
    .gx-preview .v2-pricing-section .v2-city-header-cell,
    .gx-preview .v2-pricing-section .v2-tariff-table td:first-child {
        width: 1%;
        max-width: max-content;
        padding-inline: 10px;
    }
    .gx-preview .v2-pricing-section .v2-city-header-cell {
        display: table-cell;
    }
    .gx-preview .v2-pricing-section .v2-city-header-cell .v2-price-search {
        width: 112px;
        min-width: 0;
        margin: 6px 0 0;
        padding-inline: 6px;
    }
    .gx-preview .v2-pricing-section .v2-city-header-cell .v2-price-search input {
        width: 70px;
    }
    .gx-preview .v2-price-pager { justify-content: space-between; width: 100%; }
}

/* ====================================================================
   ECOSYSTEM MAP (#v3-ecosystem)
   Six capability cards orbiting the GO! hub. All geometry derives from one
   token — --eco-center, the width of the middle column — so the disc and the
   connectors stay in proportion at every width. Written with logical
   properties throughout, so the whole map mirrors with `dir`.
   ==================================================================== */
.gx-preview .v3eco {
    background: transparent;
    padding-top: 90px;
    padding-bottom: 96px;
    /* Latin from Inter, Arabic from Noto Kufi — per-glyph fallback, since
       Inter ships no Arabic. Both are already loaded by the layout. */
    font-family: Inter, 'Noto Kufi Arabic', ui-sans-serif, system-ui, sans-serif;
}
.gx-preview .v3eco *,
.gx-preview .v3eco *::before { box-sizing: border-box; }

/* ---------------------------- head ---------------------------- */
.gx-preview .v3eco .v3eco-head { max-width: 1000px; margin: 0 auto 54px; text-align: center; }
.gx-preview .v3eco .v3eco-badge {
    /* gap, not a text space: the bdi is a flex item and the space around it is trimmed */
    display: inline-flex; align-items: center; gap: .32em; min-height: 30px;
    padding: 0 15px; border-radius: 999px;
    background: #f4fbe2; border: 1px solid rgba(95, 143, 18, .20);
    color: #4a7200; font-size: 12.5px; font-weight: 700; letter-spacing: 0;
}
.gx-preview .v3eco .v3eco-title {
    margin: 18px 0 0;
    /* sized so the second line stays on one line at desktop widths */
    font-size: clamp(23px, 2.3vw, 32px);
    line-height: 1.52; letter-spacing: -.012em; font-weight: 800;
    color: var(--ink);
}
.gx-preview .v3eco .v3eco-title-alt { display: block; }
/* the black wordmark, set inline and optically aligned to the Arabic baseline */
.gx-preview .v3eco .v3eco-go {
    display: inline-block;
    height: .84em; width: auto;
    margin-inline-end: .1em;
    transform: translateY(.08em);
}
.gx-preview .v3eco .v3eco-desc {
    margin: 16px auto 0; max-width: 640px;
    color: rgba(24, 34, 30, .80);
    font-size: 14.5px; line-height: 1.95; font-weight: 400;
}
.gx-preview .v3eco .v3eco-desc-2 { color: rgba(24, 34, 30, .62); }

/* ---------------------------- map ---------------------------- */
.gx-preview .v3eco .v3eco-map {
    /* the one knob: width of the middle column */
    --eco-center: clamp(300px, 24vw, 346px);
    --eco-side: calc((100% - var(--eco-center)) / 2);
    --eco-disc: calc(var(--eco-center) * .40);   /* the lime sun */
    --eco-ring2: calc(var(--eco-disc) + 42px);   /* inner orbit, diameter */
    --eco-orbit: calc(var(--eco-center) * .36);  /* outer orbit RADIUS - nodes ride this */
    /* node at 48deg off the horizontal; nx/ny are its offsets from the centre,
       and every connector terminates exactly on them. */
    --eco-nx: calc(var(--eco-orbit) * .669);     /* cos 48 */
    --eco-ny: calc(var(--eco-orbit) * .743);     /* sin 48 */
    --eco-tile: 42px;                            /* icon tile */
    --eco-pad: 14px;                             /* card edge -> connector */
    --eco-gap: 22px;
    --eco-wire: rgba(16, 21, 16, .10);
    /* row centres, corrected for the row gap: (H - 2G)/6 and H - (H - 2G)/6 */
    --eco-row1: calc(16.66667% - var(--eco-gap) / 3);
    --eco-leg: calc(33.33334% + var(--eco-gap) / 3 - var(--eco-ny));
    position: relative;
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--eco-center) minmax(0, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: var(--eco-gap);
    min-height: 400px;
}
.gx-preview .v3eco .v3eco-card.is-a1 { grid-area: 1 / 1; }
.gx-preview .v3eco .v3eco-card.is-a2 { grid-area: 2 / 1; }
.gx-preview .v3eco .v3eco-card.is-a3 { grid-area: 3 / 1; }
.gx-preview .v3eco .v3eco-card.is-b1 { grid-area: 1 / 3; }
.gx-preview .v3eco .v3eco-card.is-b2 { grid-area: 2 / 3; }
.gx-preview .v3eco .v3eco-card.is-b3 { grid-area: 3 / 3; }
.gx-preview .v3eco .v3eco-hubcol   { grid-area: 1 / 2 / 4 / 3; position: relative; z-index: 2; }

/* ---------------------------- cards ----------------------------
   Tile in the inline-start column (the right, in RTL) so the eye lands on the
   icon first and the text flows away from it. align-content:center keeps a
   card that stretches to its row balanced instead of dead at the bottom. */
.gx-preview .v3eco .v3eco-card {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: var(--eco-tile) minmax(0, 1fr);
    column-gap: 12px;
    align-content: center;
    align-items: start;
    padding: 13px 15px;
    border: 1px solid #edf0ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 21, 16, .035);
}
.gx-preview .v3eco .v3eco-card h3 {
    margin: 0 0 4px;
    font-size: 15px; line-height: 1.42; font-weight: 700; letter-spacing: 0;
    color: var(--ink);
}
.gx-preview .v3eco .v3eco-card p {
    margin: 0;
    font-size: 12.6px; line-height: 1.62; font-weight: 400;
    color: rgba(24, 34, 30, .74);
}
/* Placed by cell, not by DOM order, so the tile can stay markup-last
   (aria-hidden). The row must be explicit: with only a column set, sparse
   auto-placement pushes the tile onto a second row and doubles the card. */
.gx-preview .v3eco .v3eco-ic  { grid-area: 1 / 1; }
.gx-preview .v3eco .v3eco-txt { grid-area: 1 / 2; }
.gx-preview .v3eco .v3eco-ic {
    width: var(--eco-tile); height: var(--eco-tile);
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--eco-tint); color: var(--eco-ic);
    font-size: 17px;
}
/* delivery — the core service, so one notch more presence */
.gx-preview .v3eco .v3eco-card.is-lead {
    border-color: rgba(95, 143, 18, .26);
    background: linear-gradient(180deg, #fcfef5 0%, #fff 58%);
    box-shadow: 0 1px 2px rgba(16, 21, 16, .035), 0 8px 22px rgba(95, 143, 18, .07);
}
.gx-preview .v3eco .v3eco-card.is-lead h3 { white-space: nowrap; }

/* ------------------- source / channel chips ------------------- */
.gx-preview .v3eco .v3eco-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    justify-content: flex-end;   /* ltr row, flush to the RTL text's start edge */
    margin-top: 8px; margin-bottom: -2px;
}
.gx-preview .v3eco .v3eco-chip {
    flex: 0 0 23px; width: 23px; height: 23px;
    display: grid; place-items: center;
    border-radius: 7px;
    font-size: 12.5px; color: #fff;
    box-shadow: 0 1px 2px rgba(16, 21, 16, .10);
}
.gx-preview .v3eco .v3eco-chip.is-img { background: none; box-shadow: none; }
.gx-preview .v3eco .v3eco-chip.is-img img {
    width: 23px; height: 23px; border-radius: 7px; object-fit: contain; display: block;
    box-shadow: 0 1px 2px rgba(16, 21, 16, .10);
}
.gx-preview .v3eco .v3eco-chip.c-shopify { background: #5e8e3e; }
.gx-preview .v3eco .v3eco-chip.c-import  { background: #eef1eb; color: #5c6a59; box-shadow: none; }
.gx-preview .v3eco .v3eco-chip.c-more    { background: #fff; border: 1px dashed #d2dbcd; color: #8d9a8d; font-size: 10px; box-shadow: none; }
.gx-preview .v3eco .v3eco-chip.c-wa      { background: #25d366; }
.gx-preview .v3eco .v3eco-chip.c-msg     { background: #0084ff; }
.gx-preview .v3eco .v3eco-chip.c-ig      { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%); }
.gx-preview .v3eco .v3eco-chip.c-tg      { background: #29a9eb; }

/* ------------------------- orbit + sun -------------------------
   .v3eco-hub IS the outer orbit: a dashed circle of radius --eco-orbit, with
   the inner orbit as ::before, the sun's light as ::after, and six nodes
   parked on the outer ring by rotation. The node set is symmetric, so this
   mirrors with the direction for free. */
.gx-preview .v3eco .v3eco-hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: calc(var(--eco-orbit) * 2); height: calc(var(--eco-orbit) * 2);
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px dashed rgba(16, 21, 16, .14);
}
.gx-preview .v3eco .v3eco-hub::before {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: var(--eco-ring2); height: var(--eco-ring2);
    border: 1px solid rgba(16, 21, 16, .09);
    border-radius: 50%;
}
.gx-preview .v3eco .v3eco-hub::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: calc(var(--eco-disc) * 1.72); height: calc(var(--eco-disc) * 1.72);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 241, 8, .20) 0%, rgba(180, 241, 8, .07) 45%, rgba(180, 241, 8, 0) 72%);
}
.gx-preview .v3eco .v3eco-node {
    position: absolute; inset: 0; margin: auto;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--eco-dot);
    box-shadow: 0 0 0 3px #fff;
    transform: rotate(var(--a)) translateX(var(--eco-orbit));
}
.gx-preview .v3eco .v3eco-disc {
    position: relative; z-index: 1;
    width: var(--eco-disc); height: var(--eco-disc);
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 32% 18%, #d6f95a 0%, var(--lime) 62%, #a8dd12 100%);
    box-shadow: 0 0 0 7px #fff, 0 6px 20px rgba(88, 122, 6, .15);
}
.gx-preview .v3eco .v3eco-disc img { width: 60%; height: auto; display: block; }
.gx-preview .v3eco .v3eco-note {
    position: absolute; inset-inline: 0;
    top: calc(50% + var(--eco-orbit) + 22px);
    margin: 0 auto; max-width: 230px;
    text-align: center;
    font-size: 12.8px; line-height: 1.68; font-weight: 400;
    color: rgba(24, 34, 30, .58);
}
.gx-preview .v3eco .v3eco-note b { display: block; font-weight: 700; color: rgba(24, 34, 30, .84); }

/* ------------------------- connectors -------------------------
   Each link is an empty box whose borders draw the sweep: one border leaves
   the card, one arrives at the orbit node, and a wide corner radius turns the
   right angle into an arc. Terminators live on the ring (.v3eco-node). */
.gx-preview .v3eco .v3eco-link { position: absolute; z-index: 0; pointer-events: none; }
.gx-preview .v3eco .v3eco-link.is-a1,
.gx-preview .v3eco .v3eco-link.is-a2,
.gx-preview .v3eco .v3eco-link.is-a3 { inset-inline-start: calc(var(--eco-side) + var(--eco-pad)); }
.gx-preview .v3eco .v3eco-link.is-b1,
.gx-preview .v3eco .v3eco-link.is-b2,
.gx-preview .v3eco .v3eco-link.is-b3 { inset-inline-end: calc(var(--eco-side) + var(--eco-pad)); }

/* top row: out of the card, arcing down to the upper node */
.gx-preview .v3eco .v3eco-link.is-a1,
.gx-preview .v3eco .v3eco-link.is-b1 {
    top: var(--eco-row1); height: var(--eco-leg);
    width: calc(var(--eco-center) / 2 - var(--eco-nx) - var(--eco-pad));
    border-block-start: 1px solid var(--eco-wire);
}
.gx-preview .v3eco .v3eco-link.is-a1 { border-inline-end: 1px solid var(--eco-wire); border-start-end-radius: 46px; }
.gx-preview .v3eco .v3eco-link.is-b1 { border-inline-start: 1px solid var(--eco-wire); border-start-start-radius: 46px; }

/* middle row: straight in to the node on the ring's equator */
.gx-preview .v3eco .v3eco-link.is-a2,
.gx-preview .v3eco .v3eco-link.is-b2 {
    top: 50%; height: 0;
    width: calc(var(--eco-center) / 2 - var(--eco-orbit) - var(--eco-pad));
    border-block-start: 1px solid var(--eco-wire);
}

/* bottom row: out of the card, arcing up to the lower node */
.gx-preview .v3eco .v3eco-link.is-a3,
.gx-preview .v3eco .v3eco-link.is-b3 {
    top: calc(50% + var(--eco-ny)); height: var(--eco-leg);
    width: calc(var(--eco-center) / 2 - var(--eco-nx) - var(--eco-pad));
    border-block-end: 1px solid var(--eco-wire);
}
.gx-preview .v3eco .v3eco-link.is-a3 { border-inline-end: 1px solid var(--eco-wire); border-end-end-radius: 46px; }
.gx-preview .v3eco .v3eco-link.is-b3 { border-inline-start: 1px solid var(--eco-wire); border-end-start-radius: 46px; }

/* ---------------------- tablet / mobile ----------------------
   The hub moves to the head of the list and keeps a short stub pointing at
   the cards, so the "everything hangs off GO!" relationship survives. */
@media (max-width: 1023px) {
    .gx-preview .v3eco { padding-top: 70px; padding-bottom: 74px; }
    .gx-preview .v3eco .v3eco-head { margin-bottom: 32px; }
    .gx-preview .v3eco .v3eco-map {
        display: flex; flex-direction: column; align-items: stretch;
        gap: 14px; min-height: 0; max-width: 640px;
        --eco-orbit: 104px; --eco-disc: 124px;
    }
    .gx-preview .v3eco .v3eco-link { display: none; }
    .gx-preview .v3eco .v3eco-hubcol {
        order: -1;
        display: flex; flex-direction: column; align-items: center; gap: 12px;
        margin-bottom: 6px;
    }
    /* relative, not static: the nodes are absolute and need this as their containing block */
    .gx-preview .v3eco .v3eco-hub { position: relative; top: auto; left: auto; transform: none; }
    .gx-preview .v3eco .v3eco-note { position: static; inset: auto; max-width: 300px; }
    .gx-preview .v3eco .v3eco-hubcol::after {
        content: ''; width: 1px; height: 26px;
        background: linear-gradient(180deg, var(--eco-wire), rgba(16, 21, 16, 0));
    }
    .gx-preview .v3eco .v3eco-card.is-lead h3 { white-space: normal; }
}
/* two up on tablet. A grid rather than flex-wrap so the basis can't drift out
   of step with --eco-gap; the desktop 3x3 placements must be cleared. */
@media (min-width: 700px) and (max-width: 1023px) {
    .gx-preview .v3eco .v3eco-map {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 14px; max-width: 820px;
    }
    .gx-preview .v3eco .v3eco-hubcol { grid-column: 1 / -1; grid-row: auto; order: -1; }
    /* the desktop placements are .card.is-xN (four classes) — the reset has to
       match that weight or the cards stay pinned to the 3-column template */
    .gx-preview .v3eco .v3eco-card.is-a1,
    .gx-preview .v3eco .v3eco-card.is-a2,
    .gx-preview .v3eco .v3eco-card.is-a3,
    .gx-preview .v3eco .v3eco-card.is-b1,
    .gx-preview .v3eco .v3eco-card.is-b2,
    .gx-preview .v3eco .v3eco-card.is-b3 { grid-area: auto; min-width: 0; }
}
@media (max-width: 480px) {
    .gx-preview .v3eco { padding-top: 58px; padding-bottom: 62px; }
    .gx-preview .v3eco .v3eco-map { --eco-tile: 40px; --eco-orbit: 94px; --eco-disc: 112px; }
    .gx-preview .v3eco .v3eco-card { padding: 14px; column-gap: 11px; }
    .gx-preview .v3eco .v3eco-ic { border-radius: 12px; font-size: 16px; }
}

/* ====================================================================
   WHERE DELIVERY STARTS (#v3-starts-at-order)
   An 8-column grid: one label column + the seven stages. Every stage cell
   carries its node at a fixed offset from the cell top (--node-top), so the
   connector — drawn per cell as a segment from this centre to the next one —
   lands dead on the circles no matter how tall the row grows. `.has-line` is
   simply omitted on the last cell of a row.
   ==================================================================== */
.gx-preview .v3start {
    background: transparent;
    padding-top: 84px;
    padding-bottom: 88px;
    /* Latin-only section: keep Inter even on ar/dr, where .gx-preview swaps the
       page over to Noto Kufi Arabic */
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.gx-preview .v3start *,
.gx-preview .v3start *::before { box-sizing: border-box; }

/* ---------------------------- head ---------------------------- */
.gx-preview .v3start .v3start-head { max-width: 860px; margin: 0 0 34px; }
.gx-preview .v3start .v3start-head h2 {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.24;
    letter-spacing: -.035em;
    font-weight: 700;
}
.gx-preview .v3start .v3start-lead {
    margin: 18px 0 0;
    color: var(--ink);
    font-size: clamp(15.5px, 1.3vw, 17.5px);
    font-weight: 500;
    line-height: 1.5;
}
.gx-preview .v3start .v3start-note {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.62;
}

/* ---------------------------- board ---------------------------- */
/* scrolls sideways below ~1000px rather than collapsing: the diagram only
   makes sense as one continuous row */
.gx-preview .v3start .v3start-board {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(7, 18, 15, .05);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gx-preview .v3start .v3start-grid {
    display: grid;
    grid-template-columns: minmax(178px, 232px) repeat(7, minmax(0, 1fr));
    min-width: 900px;
}

/* ---------------------------- cells ---------------------------- */
.gx-preview .v3start .v3start-cell {
    --node-top: 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--node-top) 8px 22px;
    border-left: 1px solid var(--line);
    text-align: center;
}
/* first cell of every row is the label column — no divider before it */
.gx-preview .v3start .v3start-cell:nth-child(8n + 1) { border-left: 0; }
.gx-preview .v3start .v3start-cell.is-head,
.gx-preview .v3start .v3start-cell.is-go { border-bottom: 1px solid var(--line); }
.gx-preview .v3start .v3start-cell.is-head {
    padding: 17px 8px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.005em;
}
.gx-preview .v3start .v3start-cell.is-go { background: #f9fdef; }
.gx-preview .v3start .v3start-cell.is-old { --node-top: 46px; }

/* label column */
.gx-preview .v3start .v3start-cell.is-label {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    padding: 20px 22px;
    text-align: left;
}
.gx-preview .v3start .v3start-disc {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 50%;
    background: #0d1410;
    display: grid; place-items: center;
}
.gx-preview .v3start .v3start-disc img {
    width: auto; height: 15px;
    /* black artwork → brand lime */
    filter: brightness(0) saturate(100%) invert(91%) sepia(69%) saturate(713%) hue-rotate(15deg) brightness(102%) contrast(92%);
}
.gx-preview .v3start .v3start-disc.is-old { background: #eef1ee; color: #8f9a92; font-size: 17px; }
.gx-preview .v3start .v3start-cell.is-label b {
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
}
.gx-preview .v3start .v3start-cell.is-old b { color: #5d6a63; font-weight: 500; }
.gx-preview .v3start .v3start-cell.is-label b span { display: block; }

/* nodes + connectors */
.gx-preview .v3start .v3start-node {
    position: relative;
    /* above the connector, which itself has to outrank the next cell's own
       background — sibling cells paint in DOM order */
    z-index: 2;
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(150, 205, 20, .85);
    color: var(--lime-deep);
    display: grid; place-items: center;
    font-size: 14px;
}
.gx-preview .v3start .is-old .v3start-node { border-color: #dbe2db; color: #9aa49d; }
.gx-preview .v3start .v3start-dot {
    position: relative; z-index: 2;
    width: 11px; height: 11px; flex: 0 0 11px;
    margin: 12px 0;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e6ebe6;
}
.gx-preview .v3start .v3start-cap {
    margin-top: 11px;
    max-width: 116px;
    color: #6c7a72;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.32;
}
/* Segment from this cell's node centre to the next one: the seven stage columns
   are equal width, so 100% of the cell lands exactly on the next centre. The
   dot in the faded cells is sized so its centre matches a node's, hence the one
   shared offset. z-index:1 is required — without it the next cell's background
   paints over the half that overhangs. */
.gx-preview .v3start .v3start-cell.has-line::before,
.gx-preview .v3start .v3start-cell.has-dash::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--node-top) + 17px);
    left: 50%;
    width: 100%;
    height: 2px;
    background: rgba(150, 205, 20, .85);
}
.gx-preview .v3start .v3start-cell.is-old.has-line::before { background: #dbe2db; }
.gx-preview .v3start .v3start-cell.has-dash::before {
    height: 0;
    background: none;
    border-top: 2px dashed #e6ebe6;
}

/* "starts here" marker, floated above the pickup node so the node itself stays
   aligned with the rest of the row */
.gx-preview .v3start .v3start-flag {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #7b8780;
    font-size: 9.5px; font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gx-preview .v3start .v3start-flag i {
    width: 0; height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5px solid #9aa49d;
}

/* ---------------------------- foot ---------------------------- */
.gx-preview .v3start .v3start-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px 0 0;
}
.gx-preview .v3start .v3start-foot span {
    display: inline-flex; align-items: center; gap: 8px;
    color: #4a5550;
    font-size: 13px;
    font-weight: 500;
}
.gx-preview .v3start .v3start-foot i { color: #6cb318; font-size: 14px; }
.gx-preview .v3start .v3start-foot em {
    width: 4px; height: 4px; border-radius: 50%;
    background: #d3dad2;
}

@media (max-width: 980px) {
    .gx-preview .v3start { padding-top: 66px; padding-bottom: 70px; }
    .gx-preview .v3start .v3start-head { margin-bottom: 26px; }
    .gx-preview .v3start .v3start-note br { display: none; }
}
@media (max-width: 640px) {
    .gx-preview .v3start { padding-top: 54px; padding-bottom: 58px; }
    .gx-preview .v3start .v3start-grid { min-width: 780px; }
    .gx-preview .v3start .v3start-grid { grid-template-columns: 150px repeat(7, minmax(0, 1fr)); }
    .gx-preview .v3start .v3start-cell.is-label { padding: 16px 14px; gap: 10px; }
    .gx-preview .v3start .v3start-disc { width: 34px; height: 34px; flex-basis: 34px; }
    .gx-preview .v3start .v3start-disc img { height: 12px; }
    .gx-preview .v3start .v3start-cell.is-label b { font-size: 13.5px; }
    /* stacked list instead of one row, so the dot separators would dangle */
    .gx-preview .v3start .v3start-foot { flex-direction: column; align-items: flex-start; gap: 9px; }
    .gx-preview .v3start .v3start-foot em { display: none; }
}

/* ====================================================================
   v3 mockup — refinements layered on the v3 design system
   ==================================================================== */
.gx-preview h2 { font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 500; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.12; letter-spacing: -.028em; }
.gx-preview .section-text { font-size: 16px; }
.gx-preview .mx-head { max-width: 760px; margin: 0 0 44px; }
.gx-preview .mx-head.is-center { margin-inline: auto; text-align: center; }
.gx-preview .mx-head.is-center .section-text { max-width: 560px; margin-inline: auto; }

/* Shared progress line (WhatsApp-style: hairline, fills while the step is active) */
.gx-preview .mx-bar { position: absolute; top: -1px; inset-inline-start: 0; z-index: 1; width: 0; height: 2px; border-radius: 2px; background: var(--ink); }
.gx-preview .lc-wf:hover .mx-bar { animation-play-state: paused !important; }
@keyframes mxfill { from { width: 0; } to { width: 100%; } }

/* ---------- How it works ---------- */
.gx-preview .mx-flow { padding-top: 104px; }
.gx-preview .mx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 32px; }
.gx-preview .mx-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0 0; border: 0; border-top: 1px solid rgba(17, 27, 33, .14); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.gx-preview .mx-step.active .mx-bar { animation: mxfill 6s linear forwards; }
.gx-preview .mx-ix { font-size: 12px; font-weight: 600; color: rgba(17, 27, 33, .38); font-variant-numeric: tabular-nums; transition: color .25s; }
.gx-preview .mx-step h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: rgba(17, 27, 33, .42); transition: color .25s; }
.gx-preview .mx-step p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(31, 42, 40, .5); transition: color .25s; }
.gx-preview .mx-step.active .mx-ix { color: var(--lime-deep); }
.gx-preview .mx-step.active h3 { color: var(--ink); }
.gx-preview .mx-step.active p { color: rgba(31, 42, 40, .82); }
.gx-preview .mx-logos { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.gx-preview .mx-logos > span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; overflow: hidden; }
.gx-preview .mx-logos img { width: 14px; height: 14px; object-fit: contain; }
.gx-preview .mx-logo-img { background: #fff; border: 1px solid var(--line); }

/* Toast that narrates each app screen (lives in the 1180x655 design space, scales with it) */
.gx-preview .mx-toast { position: absolute; z-index: 30; left: 50%; bottom: 34px; display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 18px; background: #111b21; color: #fff; white-space: nowrap; box-shadow: 0 22px 48px rgba(17, 27, 33, .30); opacity: 0; transform: translate(-50%, 18px); pointer-events: none; }
.gx-preview .mx-toast b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.gx-preview .mx-toast small { display: block; margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .66); }
.gx-preview .mx-toast-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: #111b21; font-size: 19px; }
.gx-preview .v2wf-scr.active .mx-toast { animation: mxtoast .55s cubic-bezier(.2, .9, .3, 1.15) 1.1s forwards; }
.gx-preview .v2wf-scr[data-screen="1"].active .mx-toast { animation-delay: 2.7s; }
.gx-preview .v2wf-scr[data-screen="2"].active .mx-toast { animation-delay: 2.3s; }
@keyframes mxtoast { to { opacity: 1; transform: translate(-50%, 0); } }

/* Payments screen (screen 3) */
.gx-preview .mx-pay { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 0; overflow: hidden; }
.gx-preview .mx-pay-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; }
.gx-preview .mx-pay .v2rm-payout { min-height: 0; }
.gx-preview .mx-kpis { display: grid; gap: 10px; }
.gx-preview .mx-kpi { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l e" "b e"; align-items: center; column-gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.gx-preview .mx-kpi span { grid-area: l; font-size: 11.5px; color: #6b756e; }
.gx-preview .mx-kpi b { grid-area: b; font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.gx-preview .mx-kpi b small { font-size: 11px; color: #6b756e; }
.gx-preview .mx-kpi em { grid-area: e; font-style: normal; font-size: 11px; font-weight: 600; color: #6b756e; }
.gx-preview .mx-kpi em.up { color: var(--lime-deep); }
.gx-preview .mx-pay-tbl { padding: 0; border: 1px solid var(--line); border-radius: 14px; }
.gx-preview .mx-pay-tbl .v2tbl-head, .gx-preview .mx-pay-tbl .v2tbl-row { grid-template-columns: 1.1fr .8fr .7fr 1fr .9fr 1fr .9fr; padding-inline: 16px; }
.gx-preview .mx-pay-tbl .v2tbl-row:last-child { border-bottom: 0; }

/* ---------- Conversations (4 sections -> 1) ---------- */
.gx-preview .mx-conv-card { --wa-card-h: 520px; --wa-shadow: 0 18px 44px rgba(17, 27, 33, .18), 0 2px 6px rgba(17, 27, 33, .07); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 64px; align-items: center; }
.gx-preview .mx-conv-stage { position: relative; min-height: calc(var(--wa-card-h) + 32px); display: grid; place-items: center; padding: 8px 0 0; border-radius: 0; background: transparent; overflow: visible; }

/* Shared WhatsApp screen — phone proportions, no device frame, just a soft shadow */
.gx-preview .wa-phone {
    width: min(318px, 100%);
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    box-shadow: var(--wa-shadow);
    overflow: visible;
    font-family: "Segoe UI", Inter, "Noto Kufi Arabic", sans-serif;
    color: #111b21;
    text-align: start;
}
.gx-preview .wa-screen { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #fff; }
.gx-preview #mx-conversations .wa-screen { height: var(--wa-card-h); }
.gx-preview .wa-top { display: flex; align-items: center; gap: 8px; padding-block: 10px 8px; padding-inline: 4px 8px; background: #fff; }
.gx-preview .wa-top .fa-chevron-left { width: 22px; text-align: center; font-size: 16px; color: #111; }
.gx-preview .wa-ava { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; background: #d8ddd6 center/cover no-repeat; }
.gx-preview .wa-ava-letter { display: grid; place-items: center; background: #dfe7df; color: #3b4a3c; font-size: 15px; font-weight: 700; }
.gx-preview .wa-who { flex: 1; min-width: 0; line-height: 1.15; }
.gx-preview .wa-who b { display: block; font-size: 15.5px; font-weight: 600; color: #111b21; }
.gx-preview .wa-who small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: #1daa61; }
.gx-preview .wa-who small.is-typing { color: #667781; }
.gx-preview .wa-top .fa-video,
.gx-preview .wa-top .fa-phone,
.gx-preview .wa-top .fa-ellipsis-vertical { width: 22px; text-align: center; font-size: 14px; color: #54656f; }
.gx-preview .wa-chat { position: relative; background: #e4e3e1; }
.gx-preview #mx-conversations .wa-chat { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.gx-preview .wa-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/wa-wallpaper.png') repeat;
    background-size: 300px auto;
    opacity: .2;
    pointer-events: none;
}
.gx-preview .wa-chat > * { position: relative; z-index: 1; }
.gx-preview .wa-thread { min-height: 228px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 12px 12px 8px; }
.gx-preview #mx-conversations .wa-thread { flex: 1; min-height: 0; }
.gx-preview .wa-b {
    position: relative;
    max-width: 88%;
    margin: 0;
    padding: 6px 8px 5px 9px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #111b21;
    font-size: 13.5px;
    font-weight: 450;
    line-height: 1.38;
    letter-spacing: 0;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13);
    text-align: start;
}
.gx-preview .wa-b.out { background: #d9fdd3; margin-left: auto; border-bottom-right-radius: 2px; }
.gx-preview .wa-b.in { background: #fff; margin-right: auto; border-bottom-left-radius: 2px; }
.gx-preview .wa-b.out::after,
.gx-preview .wa-b.in::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 12px;
}
.gx-preview .wa-b.out::after { right: -7px; background: #d9fdd3; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.gx-preview .wa-b.in::before { left: -7px; background: #fff; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.gx-preview .wa-time { float: right; margin: 4px 0 -2px 8px; font-size: 11px; line-height: 1; color: #667781; font-weight: 500; position: relative; top: 4px; }
.gx-preview .wa-phone .wa-ck { color: #53bdeb; letter-spacing: -1px; font-size: 13px; font-weight: 600; }
.gx-preview .wa-b b { font-weight: 700; }
.gx-preview .wa-stack { width: min(88%, 250px); margin-left: auto; display: flex; flex-direction: column; }
.gx-preview .wa-stack .wa-b { max-width: 100%; }
.gx-preview .wa-quick { display: flex; flex-direction: column; margin-top: 3px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13); }
.gx-preview .wa-quick > span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 8px; border-top: 1px solid rgba(17, 27, 33, .06); color: #027eb5; font-size: 13.5px; font-weight: 500; }
.gx-preview .wa-quick > span:first-child { border-top: 0; }
.gx-preview .wa-quick i { font-size: 12px; }
.gx-preview .wa-compose { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; }
.gx-preview .wa-compose > i { color: #54656f; font-size: 18px; }
.gx-preview .wa-field { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 20px; background: #fff; color: #8696a0; font-size: 14px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .08); }
.gx-preview .wa-send { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 36px; background: #1daa61; color: #fff; }
.gx-preview .wa-send i { color: #fff; font-size: 14px; transform: translate(-1px, 1px); }

/* Confirmation fan sits behind the phone, not on a panel */
.gx-preview #mx-conversations .cf-mock { max-width: none; padding: 4px 0 0; }
.gx-preview #mx-conversations .cf-chat.wa-phone { z-index: 6; width: min(318px, 100%); background: transparent; box-shadow: var(--wa-shadow); }
.gx-preview #mx-conversations .cf-inbox { top: 8%; width: 36cqw; z-index: 4; }
.gx-preview #mx-conversations .cf-order { top: auto; bottom: 4%; width: 36cqw; z-index: 5; }
.gx-preview #mx-conversations .cf-mock.is-in-view .cf-order { transform: rotate(var(--cf-order-hover-rotate)) translate(var(--cf-order-hover-x), 0) scale(.96); }

/* Phone-width column: shrink the same fan as one piece so the side cards
   stay intact instead of being sliced or stacked into a tall column. */
.gx-preview #mx-conversations .mx-conv-stage { container-type: inline-size; container-name: convstage; }
@container convstage (max-width: 500px) {
    .gx-preview #mx-conversations .mx-conv-visual.is-cf {
        height: calc(540px * 100cqi / 600px);
        overflow: hidden;
    }
    .gx-preview #mx-conversations .cf-mock {
        width: 600px;
        max-width: none;
        margin-inline: calc((100cqi - 600px) / 2);
        transform: scale(calc(100cqi / 600px));
        transform-origin: top center;
    }
    .gx-preview #mx-conversations .cf-chat.wa-phone,
    .gx-preview #mx-conversations .cf-mock.is-in-view .cf-chat {
        width: 318px;
        transform: none;
    }
}

/* Follow-up messages inside the phone, keeping the timed reveal */
.gx-preview .wa-phone.wafu { max-width: 318px; min-height: 0; margin-inline: auto; border: 0; border-radius: 28px; overflow: visible; background: transparent; box-shadow: var(--wa-shadow); }
.gx-preview .wa-phone .wafu-body { min-height: 0; padding: 12px 12px 8px; gap: 5px; background: transparent; }
.gx-preview .wa-phone .wafu-row { width: 100%; margin: 0; flex-direction: row; align-items: flex-end; }
.gx-preview .wa-phone .wafu-row-one,
.gx-preview .wa-phone .wafu-row-two { justify-content: flex-end; }
.gx-preview .wa-phone .wafu-row-three { justify-content: flex-start; margin: 0; }
.gx-preview .wa-phone .wafu-msg { max-width: 88%; padding: 6px 8px 5px 9px; border: 0; border-radius: 8px; background: #d9fdd3; color: #111b21; font-size: 13.5px; line-height: 1.38; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13); }
.gx-preview .wa-phone .wafu-client-msg { background: #fff; color: #111b21; border-radius: 8px; }
.gx-preview .wa-phone .wafu-sep { margin: 2px 0; }
.gx-preview .wa-phone .wafu-sep span { padding: 4px 10px; background: rgba(255, 255, 255, .92); color: #54656f; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .12); }
.gx-preview .wa-phone .wafu-sep span::before { filter: none; opacity: .7; }

/* Smart-reply media inside the same bubbles */
.gx-preview .wa-phone .media { display: block; padding: 3px 3px 2px; overflow: visible; }
.gx-preview .wa-phone .media img { width: 100%; height: 112px; object-fit: cover; display: block; border-radius: 6px; }
.gx-preview .wa-phone .media .cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 4px 6px 2px; font-size: 12.5px; font-weight: 500; color: #111b21; }
.gx-preview .wa-phone .media .wa-time,
.gx-preview .wa-phone .voice .wa-time { float: none; top: 0; margin: 0; }
.gx-preview .wa-phone .voice { display: flex; align-items: center; gap: 8px; width: 88%; max-width: 88%; padding: 7px 8px 6px; overflow: visible; }
.gx-preview .wa-phone .voice .v-ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 32px; background: #7fd16a; color: #12301a; font-size: 13px; font-weight: 700; }
.gx-preview .wa-phone .voice .play { width: 14px; height: 14px; flex: 0 0 14px; background: transparent; color: #54656f; font-size: 12px; }
.gx-preview .wa-phone .voice .wave { flex: 1; height: 18px; border-radius: 4px; opacity: .7; background: repeating-linear-gradient(90deg, #2aa35a 0 2px, transparent 2px 4px); }
.gx-preview .wa-phone .voice .v-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.gx-preview .wa-phone .voice .dur { font-size: 11px; color: #54656f; font-weight: 500; }


/* WhatsApp: delivery notifications + closed-hours reply */
.gx-preview .mx-conv-visual.is-upd,
.gx-preview .mx-conv-visual.is-hrs { width: 100%; }
.gx-preview .mx-conv-visual.is-upd { display: flex; justify-content: center; }
.gx-preview .mx-lock {
    justify-content: flex-start;
    gap: 12px;
    padding: 28px 16px 20px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.55), transparent 46%),
        linear-gradient(180deg, #d7e3cf 0%, #c5d4c0 100%);
}
.gx-preview .mx-lock-time { margin: 6px 4px 12px; color: #142016; text-align: center; }
.gx-preview .mx-lock-time b { display: block; font-size: 52px; font-weight: 560; letter-spacing: -.045em; line-height: .92; }
.gx-preview .mx-lock-time small { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; }
.gx-preview .mx-wn {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    padding-block: 11px 12px;
    padding-inline: 12px 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 28px rgba(17,27,33,.14), inset 0 0 0 .5px rgba(255,255,255,.7);
}
.gx-preview .mx-wn-ic {
    grid-row: 1 / span 3;
    align-self: start;
    margin-top: 2px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #25d366;
    color: #fff;
    font-size: 22px;
}
.gx-preview .mx-wn-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; color: #8e8e93; font-size: 12px; font-weight: 600; }
.gx-preview .mx-wn-meta b { font-weight: 650; letter-spacing: .03em; text-transform: uppercase; font-size: 11.5px; }
.gx-preview .mx-wn strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: #111; letter-spacing: -.01em; }
.gx-preview .mx-wn p { margin: 0; font-size: 13.5px; line-height: 1.35; color: #1c1c1e; }
.gx-preview .mx-conv-scr.active .mx-wn { animation: mxfade .5s ease both; }
.gx-preview .mx-conv-scr.active .mx-wn:nth-child(3) { animation-delay: .1s; }
.gx-preview .mx-conv-scr.active .mx-wn:nth-child(4) { animation-delay: .2s; }
.gx-preview .mx-closed { position: relative; width: min(560px, 100%); height: var(--wa-card-h); margin-inline: auto; }
.gx-preview .mx-closed .wa-phone { position: absolute; top: 0; right: 0; width: min(318px, 62%); }
.gx-preview .mx-hours-card {
    position: absolute; z-index: 3; left: 0; top: 48px; width: min(258px, 52%);
    padding: 16px 16px 14px; border-radius: 16px; background: #fff;
    border: 1px solid #e5ebdf; box-shadow: 0 18px 44px rgba(17,27,33,.14);
}
.gx-preview .mx-hours-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.gx-preview .mx-hours-h b { font-size: 15px; font-weight: 700; }
.gx-preview .mx-switch { display: inline-flex; align-items: center; gap: 6px; color: #3d4a28; font-size: 12px; font-weight: 750; }
.gx-preview .mx-switch i { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #ccec44; }
.gx-preview .mx-switch i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.16); }
.gx-preview .mx-hours-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #eef2ee; font-size: 13px; }
.gx-preview .mx-hours-row span { color: #3d4a28; font-weight: 700; }
.gx-preview .mx-hours-row.is-off span { color: #9a3b3b; }
.gx-preview .mx-hours-now { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #6b756e; font-size: 12px; font-weight: 650; }
.gx-preview .mx-hours-now i { width: 8px; height: 8px; border-radius: 50%; background: #e09a2b; }
.gx-preview .mx-waitchip { align-self: center; margin-top: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: #54656f; font-size: 11.5px; font-weight: 650; }

/* Inbox crops use the real app chrome, sized to the stage */
.gx-preview #mx-team .mx-team-scr > .v2real-app { position: absolute; inset: 18px 14px; width: auto; height: auto; border-radius: 16px; }
.gx-preview #mx-team .mx-team-scr.active > .v2real-app { animation: mxfade .4s ease both; }
.gx-preview #mx-team .v2real-side,
.gx-preview #mx-team .v2real-folders { display: block; }
.gx-preview #mx-team .v2real-list,
.gx-preview #mx-team .v2real-thread { display: flex; }
.gx-preview #mx-team .v2real-thread { min-width: 0; }
.gx-preview #mx-team .v2real-side { width: 228px; flex-basis: 228px; }
.gx-preview #mx-team .v2real-msg { font-size: 13px; }
.gx-preview #mx-team .v2real-ctop b,
.gx-preview #mx-team .v2real-tid b { font-size: 13px; }
.gx-preview #mx-team .v2real-cmsg,
.gx-preview #mx-team .v2real-tags small,
.gx-preview #mx-team .v2real-field,
.gx-preview #mx-team .v2real-field b,
.gx-preview #mx-team .v2real-folder,
.gx-preview #mx-team .v2real-agent { font-size: 12px; }
.gx-preview #mx-team .v2real-obtns button { height: 30px; font-size: 12px; flex: 1; }
.gx-preview #mx-team .v2real-obtns .go { color: #4d8b05; border: 1px solid #bce08b; background: #f2fbdf; }
.gx-preview #mx-team .v2real-obtns .stop { color: #d0524b; border: 1px solid #f0c5c2; }
.gx-preview #mx-team .v2real-field.is-hot { margin: 2px 0; padding: 2px 6px; border-radius: 6px; background: #f4fbe0; outline: 1px solid #c6e25a; }
.gx-preview #mx-team .mx-editpop {
    position: absolute; z-index: 5; right: 22px; bottom: 28px; width: 220px;
    padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #e5ebdf;
    box-shadow: 0 18px 44px rgba(17,27,33,.18);
}
.gx-preview #mx-team .mx-editpop > b { display: block; margin-bottom: 4px; font-size: 13px; }
.gx-preview #mx-team .mx-editpop label { display: block; margin-top: 8px; color: #687268; font-size: 10px; font-weight: 750; }
.gx-preview #mx-team .mx-editpop label span { display: block; margin-top: 3px; padding: 7px 8px; border: 1px solid #e5ebdf; border-radius: 7px; color: #1e241f; font-size: 13px; font-weight: 700; }
.gx-preview #mx-team .mx-editpop button { width: 100%; height: 32px; margin-top: 10px; border: 0; border-radius: 7px; background: #ccec44; font-size: 12.5px; font-weight: 800; }
.gx-preview #mx-team .mx-modes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #f6f7f4; }
.gx-preview #mx-team .mx-modes-h b { display: block; font-size: 16px; font-weight: 750; }
.gx-preview #mx-team .mx-modes-h small { color: #6d776e; font-size: 12px; }
.gx-preview #mx-team .mx-mode { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e5ebdf; border-radius: 10px; background: #fff; }
.gx-preview #mx-team .mx-mode.is-on { border-color: #b6d94a; background: #f7fce6; box-shadow: 0 0 0 3px rgba(204,236,68,.35); }
.gx-preview #mx-team .mx-mode > span { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: grid; place-items: center; background: #eef2e9; font-size: 13px; font-weight: 800; }
.gx-preview #mx-team .mx-mode.is-on > span { background: #ccec44; }
.gx-preview #mx-team .mx-mode b { display: block; font-size: 14px; }
.gx-preview #mx-team .mx-mode small { display: block; margin-top: 2px; color: #6d776e; font-size: 12px; font-weight: 550; }
.gx-preview #mx-team .mx-mode em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #ccec44; }
.gx-preview #mx-team .mx-assigned { margin-top: 6px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e5ebdf; }
.gx-preview #mx-team .mx-assigned > img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.gx-preview #mx-team .mx-assigned b { display: block; font-size: 13px; }
.gx-preview #mx-team .mx-assigned small { color: #6d776e; font-size: 11px; }
.gx-preview #mx-team .mx-assigned > span { margin-left: auto; font-size: 12.5px; font-weight: 750; color: #3d4a28; }
.gx-preview #mx-team .mx-team-scr[data-screen="2"] .v2real-list { flex: 1 1 auto; width: auto; }
.gx-preview #mx-team .mx-team-scr[data-screen="2"] .v2real-side { width: 280px; flex-basis: 280px; }
.gx-preview #mx-team .mx-hist-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 12px; }
.gx-preview #mx-team .mx-hist-stats div { padding: 8px 4px; border-radius: 8px; background: #f4f6f2; text-align: center; }
.gx-preview #mx-team .mx-hist-stats b { display: block; font-size: 16px; }
.gx-preview #mx-team .mx-hist-stats small { color: #6d776e; font-size: 10px; font-weight: 750; }
.gx-preview #mx-team .mx-hist > div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; min-height: 36px; border-top: 1px solid #eef2ee; font-size: 12.5px; }
.gx-preview #mx-team .mx-hist em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.gx-preview #mx-team .mx-hist .wait { background: #fff3d2; color: #b98200; }
.gx-preview #mx-team .mx-hist .back { background: #e7eef8; color: #2f5f9e; }
.gx-preview #mx-team .mx-hist .no { background: #fdecec; color: #9a3b3b; }
.gx-preview #mx-team .v2real-msg.note { align-self: stretch; max-width: none; background: #fff6d8; border: 1px dashed #e2c56a; box-shadow: none; }
.gx-preview #mx-team .v2real-msg.note b { display: block; margin-bottom: 3px; color: #8a5a00; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.gx-preview #mx-team .mx-noted { align-self: flex-end; color: #8a5a00; font-size: 11px; font-weight: 700; }
.gx-preview #mx-team .v2compose-tabs .note.active { color: #8a5a00; border-bottom-color: #e2c56a; }
.gx-preview #mx-team .v2compose-box.is-note { background: #fffaf0; border-color: #ead9a4; }
.gx-preview #mx-team .mx-dot { width: 8px; height: 8px; border-radius: 2px; background: #b6d94a; display: inline-block; }
.gx-preview #mx-team .mx-dot.is-amber { background: #f0b429; }
.gx-preview #mx-team .mx-dot.is-ink { background: #202321; }
.gx-preview #mx-team .mx-dot.is-blue { background: #7aa2d6; }
.gx-preview #mx-team .mx-issue { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px; border-radius: 8px; background: #f6f7f4; }
.gx-preview #mx-team .mx-issue img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
.gx-preview #mx-team .mx-issue b { display: block; font-size: 12.5px; }
.gx-preview #mx-team .mx-issue small { color: #6d776e; font-size: 11px; }
.gx-preview #mx-team .mx-sendgo { width: 100%; height: 32px; margin-top: 8px; border: 0; border-radius: 7px; background: #ccec44; font-size: 12.5px; font-weight: 800; }
.gx-preview #mx-team .mx-glance-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 16px 4px; }
.gx-preview #mx-team .mx-glance-kpis div { padding: 10px 12px; border: 1px solid #e5ebdf; border-radius: 10px; background: #fff; }
.gx-preview #mx-team .mx-glance-kpis b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.03em; }
.gx-preview #mx-team .mx-glance-kpis small { color: #7b857c; font-size: 11px; font-weight: 700; }
.gx-preview #mx-team .mx-glance { margin: 12px 16px 0; border: 1px solid #e5ebdf; border-radius: 10px; overflow: hidden; }
.gx-preview #mx-team .mx-glance > div { display: grid; grid-template-columns: 1.5fr .5fr .8fr; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-top: 1px solid #eef2ee; font-size: 13px; font-weight: 700; }
.gx-preview #mx-team .mx-glance > div:first-child { min-height: 32px; border-top: 0; color: #8b948d; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.gx-preview #mx-team .mx-glance .is-ai { background: #f7fce6; }
.gx-preview #mx-team .mx-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gx-preview #mx-team .mx-who img, .gx-preview #mx-team .mx-letter { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.gx-preview #mx-team .mx-letter { display: grid; place-items: center; background: #eef2e9; font-size: 12px; }
@media (max-width: 640px) {
    .gx-preview #mx-team .mx-team-stage { min-height: 400px; }
    .gx-preview #mx-team .mx-team-scr > .v2real-app { inset: 12px; }
    .gx-preview #mx-team .v2app-body { flex-wrap: nowrap; min-width: 0; }
    .gx-preview #mx-team .v2real-folders {
        display: block;
        width: 128px;
        flex: 0 0 128px;
        padding: 8px 6px;
    }
    .gx-preview #mx-team .v2real-folder { min-width: 0; height: 28px; padding-inline: 4px; font-size: 10px; letter-spacing: -0.02em; }
    .gx-preview #mx-team .v2real-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gx-preview #mx-team .v2real-list { overflow: hidden; }
    .gx-preview #mx-team .v2real-lhead,
    .gx-preview #mx-team .v2real-tabs,
    .gx-preview #mx-team .v2real-conv { flex: 0 0 auto; }
    .gx-preview #mx-team .v2real-msg { font-size: 10.5px; line-height: 1.3; }
    .gx-preview #mx-team .v2real-ftitle,
    .gx-preview #mx-team .v2real-lhead,
    .gx-preview #mx-team .v2real-ctop b,
    .gx-preview #mx-team .v2real-tid b,
    .gx-preview #mx-team .v2real-profile b { font-size: 11px; }
    .gx-preview #mx-team .v2real-lhead { height: 32px; }
    .gx-preview #mx-team .v2real-cmsg,
    .gx-preview #mx-team .v2real-agent,
    .gx-preview #mx-team .v2real-field,
    .gx-preview #mx-team .v2real-field b,
    .gx-preview #mx-team .v2real-profile span { font-size: 10px; }
    .gx-preview #mx-team .v2real-ctop span,
    .gx-preview #mx-team .v2real-phone { font-size: 8.5px; }
    .gx-preview #mx-team .v2real-tags small { font-size: 9px; }
    .gx-preview #mx-team .v2real-tags .pink,
    .gx-preview #mx-team .v2real-tags .amber,
    .gx-preview #mx-team .v2real-tags .green,
    .gx-preview #mx-team .v2real-tags .order-id { padding: 1px 4px; }
    .gx-preview #mx-team .v2real-tabs { height: 26px; font-size: 9px; }
    .gx-preview #mx-team .v2real-tabs .active { height: 20px; padding: 0 7px; font-size: 9px; }
    .gx-preview #mx-team .v2real-conv { min-height: 0; gap: 6px; padding: 6px 8px; }
    .gx-preview #mx-team .v2real-av { width: 26px; height: 26px; flex-basis: 26px; }
    .gx-preview #mx-team .mx-hist > div { min-height: 28px; font-size: 10px; }
    .gx-preview #mx-team .mx-hist-stats b { font-size: 13px; }
    .gx-preview #mx-team .v2real-obtns button,
    .gx-preview #mx-team .mx-sendgo { height: 26px; font-size: 10px; }
    .gx-preview #mx-team .v2compose-tabs span { height: 24px; }
    .gx-preview #mx-team .v2compose-box { min-height: 48px; padding: 6px 8px; }
    .gx-preview #mx-team .v2real-list,
    .gx-preview #mx-team .v2real-thread {
        display: flex;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .gx-preview #mx-team .v2real-side {
        display: block;
        width: 132px;
        flex: 0 0 132px;
        padding: 8px 6px;
    }
    .gx-preview #mx-team .mx-team-scr[data-screen="2"] .v2real-list { display: flex; flex: 1 1 auto; width: auto; min-width: 0; }
    .gx-preview #mx-team .mx-team-scr[data-screen="2"] .v2real-side { width: 46%; flex: 0 0 46%; }
    .gx-preview #mx-team .v2real-thead,
    .gx-preview #mx-team .v2real-tags,
    .gx-preview #mx-team .v2real-tabs,
    .gx-preview #mx-team .mx-assigned { flex-wrap: nowrap; }
    .gx-preview #mx-team .v2real-thead { min-width: 0; gap: 6px; padding-inline: 6px; }
    .gx-preview #mx-team .v2real-tid { min-width: 0; overflow: hidden; }
    .gx-preview #mx-team .v2real-tid b,
    .gx-preview #mx-team .v2real-phone,
    .gx-preview #mx-team .v2real-cmsg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gx-preview #mx-team .v2real-chip.assignee {
        display: inline-block;
        flex: 0 1 auto;
        max-width: 46%;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 22px;
    }
    .gx-preview #mx-team .v2real-chip.assignee img { vertical-align: middle; }
    .gx-preview #mx-team .v2real-tags,
    .gx-preview #mx-team .v2real-tabs { overflow: hidden; min-width: 0; }
    .gx-preview #mx-team .v2real-tabs { gap: 6px; padding-inline: 6px; }
    .gx-preview #mx-team .v2real-tabs span { flex: 0 0 auto; white-space: nowrap; }
    .gx-preview #mx-team .v2real-field b,
    .gx-preview #mx-team .mx-hist > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gx-preview #mx-team .mx-editpop {
        left: auto;
        right: 0;
        bottom: 8px;
        width: 132px;
        padding: 8px;
    }
    .gx-preview #mx-team .mx-team-scr[data-screen="3"] .v2real-side { width: 148px; flex-basis: 148px; }
    .gx-preview #mx-team .mx-team-scr[data-screen="3"] .v2real-field { grid-template-columns: minmax(0, 1fr) 12px; }
    .gx-preview #mx-team .mx-team-scr[data-screen="3"] .v2real-field > span { display: none; }
    .gx-preview #mx-team .mx-team-scr[data-screen="3"] .v2real-field b { font-size: 11px; }
    .gx-preview #mx-team .mx-editpop > b { font-size: 11px; }
    .gx-preview #mx-team .mx-editpop label span { font-size: 11px; padding: 5px 6px; }
    .gx-preview #mx-team .mx-editpop button { height: 26px; margin-top: 8px; font-size: 11px; }
    .gx-preview #mx-team .mx-modes { gap: 4px; padding: 8px; }
    .gx-preview #mx-team .mx-modes-h b { font-size: 12px; }
    .gx-preview #mx-team .mx-modes-h small { font-size: 10px; }
    .gx-preview #mx-team .mx-mode { gap: 8px; padding: 6px 8px; }
    .gx-preview #mx-team .mx-mode b { font-size: 11px; }
    .gx-preview #mx-team .mx-mode small { font-size: 9.5px; }
    .gx-preview #mx-team .mx-mode > span { width: 22px; height: 22px; flex-basis: 22px; font-size: 11px; }
    .gx-preview #mx-team .mx-assigned { min-width: 0; gap: 6px; padding: 8px; }
    .gx-preview #mx-team .mx-assigned > div { min-width: 0; }
    .gx-preview #mx-team .mx-assigned b,
    .gx-preview #mx-team .mx-assigned small,
    .gx-preview #mx-team .mx-assigned > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .gx-preview #mx-team .mx-assigned b { font-size: 11px; }
    .gx-preview #mx-team .mx-assigned small { font-size: 9px; }
    .gx-preview #mx-team .mx-assigned > span { flex: 0 0 auto; min-width: 0; margin-left: auto; overflow: visible; text-overflow: clip; font-size: 11px; }
    .gx-preview #mx-team .mx-glance-kpis { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 10px 2px; }
    .gx-preview #mx-team .mx-glance-kpis div { padding: 6px 4px; }
    .gx-preview #mx-team .mx-glance-kpis b { font-size: 14px; }
    .gx-preview #mx-team .mx-glance-kpis small { font-size: 8.5px; }
    .gx-preview #mx-team .mx-glance { margin: 8px 10px 0; }
    .gx-preview #mx-team .mx-glance > div { gap: 4px; min-height: 30px; padding-inline: 8px; font-size: 10px; white-space: nowrap; }
    .gx-preview #mx-team .mx-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gx-preview .mx-closed .wa-phone { width: min(250px, 70%); }
    .gx-preview .mx-hours-card { top: 16px; width: min(210px, 58%); }
}

.gx-preview .mx-conv-scr { display: none; width: 100%; }
.gx-preview .mx-conv-scr.active { display: block; animation: mxfade .45s ease both; }
@keyframes mxfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gx-preview .mx-conv-visual.is-fu .fu-stage { padding: 0; }
.gx-preview .mx-acc { display: flex; flex-direction: column; }
.gx-preview .mx-acc-item { position: relative; display: block; width: 100%; padding: 24px 0; border: 0; border-top: 1px solid rgba(17, 27, 33, .14); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.gx-preview .mx-acc-item:last-child { border-bottom: 1px solid rgba(17, 27, 33, .14); }
.gx-preview .mx-acc-item.active .mx-bar { animation: mxfill 10s linear forwards; }
.gx-preview .mx-acc-item h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: rgba(17, 27, 33, .55); transition: color .25s; }
.gx-preview .mx-acc-item.active h3 { color: var(--ink); }
.gx-preview .mx-acc-item p { max-height: 0; margin: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.6; color: rgba(31, 42, 40, .76); transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.gx-preview .mx-acc-item.active p { max-height: 140px; margin-top: 10px; opacity: 1; }

/* Conversations: copy left, visual right (the team section below flips it back) */
.gx-preview .mx-conv-card { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.gx-preview .mx-conv-card .mx-acc { order: -1; }

/* Shared entrance for illustration pieces; runs once the section is in view */
.gx-preview .mx-ai-b,
.gx-preview .mx-pop { opacity: 0; }
.gx-preview .is-in .active .mx-ai-b,
.gx-preview .is-in .active .mx-pop { animation: mxpop .5s cubic-bezier(.2, .9, .3, 1.1) var(--d, 0s) both; }
@keyframes mxpop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mxgrow { from { width: 0; } }
@keyframes mxpulse { 50% { box-shadow: 0 0 0 7px rgba(180, 241, 8, .12); } }

/* ---------- AI agent: dark card with the hero card geometry ---------- */
.gx-preview .mx-ai { padding: 24px; }
.gx-preview .mx-ai-card { position: relative; max-width: 1920px; margin: 0 auto; border-radius: 25px; overflow: hidden; background: #1b1a19; color: #fff; }
.gx-preview .mx-ai-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 64% at 74% 46%, rgba(180, 241, 8, .15), transparent 72%); pointer-events: none; }
.gx-preview .mx-ai-inner { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; max-width: 1200px; min-height: 720px; margin: 0 auto; padding: 72px 22px 40px; }
.gx-preview .mx-ai-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.gx-preview .mx-ai-tag img { width: 34px; height: 34px; border-radius: 9px; }
.gx-preview .mx-ai h2 { margin: 0; color: #fff !important; }
.gx-preview .mx-ai-lead { max-width: 480px; margin: 16px 0 32px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .64); }
.gx-preview .mx-ai-acc { display: flex; flex-direction: column; }
.gx-preview .mx-ai-item { position: relative; display: block; width: 100%; padding: 20px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .14); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.gx-preview .mx-ai-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.gx-preview .mx-ai-item .mx-bar { background: var(--lime); }
.gx-preview .mx-ai-item.active .mx-bar { animation: mxfill 9s linear forwards; }
.gx-preview .mx-ai-item h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: rgba(255, 255, 255, .42) !important; transition: color .25s; }
.gx-preview .mx-ai-item.active h3 { color: #fff !important; }
.gx-preview .mx-ai-item p { max-height: 0; margin: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .6); transition: max-height .4s ease, opacity .3s ease, margin .3s ease; }
.gx-preview .mx-ai-item.active p { max-height: 120px; margin-top: 8px; opacity: 1; }
.gx-preview .mx-ai-stats { display: flex; gap: 44px; margin: 32px 0 0; }
.gx-preview .mx-ai-stats dt { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--lime); }
.gx-preview .mx-ai-stats dd { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .52); }

.gx-preview .mx-ai-stage { position: relative; min-height: 580px; }
.gx-preview .mx-ai-scr { display: none; position: relative; min-height: 580px; }
.gx-preview .mx-ai-scr.active { display: block; }
.gx-preview .mx-ai .wa-phone { position: absolute; top: 50%; left: 2%; width: 318px; transform: translateY(-50%); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.gx-preview .mx-ai-top { padding-top: 12px; }
.gx-preview .mx-ai-thread { height: 420px; overflow: hidden; }
.gx-preview .mx-ai .wa-b.media { width: 68%; }
.gx-preview .mx-ai-sys { align-self: center; margin: 4px 0; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #54656f; font-size: 11.5px; font-weight: 600; box-shadow: 0 1px .5px rgba(11, 20, 26, .12); }
.gx-preview .mx-ai-by { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 700; color: #1b8a52; }

.gx-preview .mx-ai-side { position: absolute; right: 0; bottom: 13%; z-index: 2; width: 292px; padding: 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: #181a18; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); color: #fff; }
.gx-preview .mx-ai-scr[data-screen="2"] .mx-ai-side { top: 16%; bottom: auto; }
.gx-preview .mx-ai-side-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .74); }
.gx-preview .mx-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.gx-preview .mx-ai-av { width: 26px; height: 26px; border-radius: 50%; background: #333 center / cover no-repeat; }
.gx-preview .mx-ai-order { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; margin-top: 14px; }
.gx-preview .mx-ai-order img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.gx-preview .mx-ai-order b { display: block; font-size: 14px; font-weight: 600; }
.gx-preview .mx-ai-order small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .5); }
.gx-preview .mx-ai-order strong { font-size: 15px; font-weight: 600; }
.gx-preview .mx-ai-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(180, 241, 8, .14); color: var(--lime); font-size: 12.5px; font-weight: 600; }
.gx-preview .mx-ai-track { margin: 14px 0 0; padding: 0; list-style: none; }
.gx-preview .mx-ai-track li { position: relative; padding: 0 0 14px 24px; }
.gx-preview .mx-ai-track li:last-child { padding-bottom: 0; }
.gx-preview .mx-ai-track li::before { content: ""; position: absolute; top: 5px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.gx-preview .mx-ai-track li::after { content: ""; position: absolute; top: 17px; bottom: 1px; left: 7px; width: 1px; background: rgba(255, 255, 255, .18); }
.gx-preview .mx-ai-track li:last-child::after { display: none; }
.gx-preview .mx-ai-track li.done::before,
.gx-preview .mx-ai-track li.now::before { background: var(--lime); }
.gx-preview .mx-ai-track li.now::before { box-shadow: 0 0 0 4px rgba(180, 241, 8, .22); animation: mxpulse 1.6s ease-in-out infinite; }
.gx-preview .mx-ai-track b { display: block; font-size: 14px; font-weight: 600; }
.gx-preview .mx-ai-track small { font-size: 12px; color: rgba(255, 255, 255, .5); }
.gx-preview .mx-ai-sum { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--lime); color: var(--ink); }
.gx-preview .mx-ai-sum small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.gx-preview .mx-ai-sum p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }

/* Feature row on the same dark card (Gorgias-style: headline + icon tiles) */
.gx-preview .mx-ai-feats { position: relative; display: grid; grid-template-columns: minmax(200px, .62fr) minmax(0, 1.38fr); gap: 28px 56px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 40px 22px 72px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gx-preview .mx-ai-feats-title { margin: 0; max-width: 8em; font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: clamp(28px, 3vw, 36px); font-weight: 500; line-height: 1.12; letter-spacing: -.028em; color: #fff !important; }
body.locale-ar .gx-preview .mx-ai-feats-title,
body.locale-da .gx-preview .mx-ai-feats-title,
body.locale-dr .gx-preview .mx-ai-feats-title { font-family: 'Noto Kufi Arabic', sans-serif; }
.gx-preview .mx-ai-feats-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 32px; }
.gx-preview .mx-ai-feat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.gx-preview .mx-ai-fic { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #1b1a19; display: grid; place-items: center; font-size: 15px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.gx-preview .mx-ai-feat h3 { margin: 2px 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff !important; }
.gx-preview .mx-ai-feat p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .68); }

/* ---------- Team: visual left, copy right; flat illustrations ---------- */
.gx-preview .mx-team-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.gx-preview .mx-team-copy .section-text { margin: 14px 0 30px; }
.gx-preview .mx-team-stage { position: relative; min-height: 560px; border-radius: 28px; background: linear-gradient(150deg, #efe3cf 0%, #edf2d8 100%); overflow: hidden; }
.gx-preview .mx-team-scr { display: none; position: absolute; inset: 0; }
.gx-preview .mx-team-scr.active { display: block; }
.gx-preview .mx-tc { position: absolute; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(17, 27, 33, .10), 0 1px 2px rgba(17, 27, 33, .06); color: var(--ink); }
.gx-preview .mx-tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gx-preview .mx-tc-head b { font-size: 15px; font-weight: 600; }
.gx-preview .mx-count, .gx-preview .mx-muted { font-size: 12px; font-weight: 600; color: #6b756e; }
.gx-preview .mx-count { padding: 2px 8px; border-radius: 999px; background: #f1f3ee; }
.gx-preview .mx-av { display: block; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #dfe7df center / cover no-repeat; }
.gx-preview .mx-av.is-letter { display: grid; place-items: center; color: #3b4a3c; font-size: 14px; font-weight: 700; }
.gx-preview .mx-av.is-ai { overflow: hidden; background: #000; }
.gx-preview .mx-av.is-ai img { width: 100%; height: 100%; }
.gx-preview .mx-chip { padding: 3px 9px; border-radius: 999px; background: #eef0ec; color: #4d5751; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.gx-preview .mx-chip.is-green { background: #e3f6d6; color: #2f6b00; }
.gx-preview .mx-chip.is-amber { background: #fdf0d5; color: #8a5a00; }
.gx-preview .mx-chip.is-blue { background: #e2effc; color: #1f5fa8; }
.gx-preview .mx-chip.is-dark { background: var(--ink); color: var(--lime); }

.gx-preview .mx-inbox { top: 12%; left: 7%; width: min(360px, 86%); padding: 16px 12px; }
.gx-preview .mx-inbox .mx-tc-head { padding: 0 8px; }
.gx-preview .mx-inbox-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.gx-preview .mx-inbox-row.is-on { background: rgba(180, 241, 8, .18); }
.gx-preview .mx-inbox-row b { display: block; font-size: 14px; font-weight: 600; }
.gx-preview .mx-inbox-row small { display: block; overflow: hidden; font-size: 13px; color: #6b756e; white-space: nowrap; text-overflow: ellipsis; }
.gx-preview .mx-order { right: 6%; bottom: 9%; width: min(240px, 62%); }
.gx-preview .mx-order-top { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; }
.gx-preview .mx-order-top img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.gx-preview .mx-order-top small { display: block; font-size: 12px; color: #6b756e; }
.gx-preview .mx-order-top b { display: block; font-size: 15px; font-weight: 600; }
.gx-preview .mx-order-meta { display: flex; justify-content: space-between; margin: 14px 0; font-size: 13px; color: #6b756e; }
.gx-preview .mx-order-meta strong { font-size: 16px; color: var(--ink); }
.gx-preview .mx-order-btn { display: block; padding: 10px; border-radius: 999px; background: var(--lime); font-size: 14px; font-weight: 600; text-align: center; }

.gx-preview .mx-new,
.gx-preview .mx-assign { inset-inline: 0; margin-inline: auto; }
.gx-preview .mx-new { top: 10%; display: flex; align-items: center; gap: 12px; width: min(300px, 80%); padding: 12px 16px; }
.gx-preview .mx-new::after { content: ""; position: absolute; top: 100%; left: 50%; height: 38px; border-left: 2px dashed rgba(17, 27, 33, .2); }
.gx-preview .mx-new small { display: block; font-size: 12px; color: #6b756e; }
.gx-preview .mx-new b { display: block; font-size: 14px; font-weight: 600; }
.gx-preview .mx-new .fa-whatsapp { margin-inline-start: auto; color: #1daa61; font-size: 20px; }
.gx-preview .mx-assign { top: 32%; width: min(340px, 88%); padding: 16px 12px; }
.gx-preview .mx-assign .mx-tc-head { padding: 0 8px; }
.gx-preview .mx-rule { padding: 3px 9px; border-radius: 999px; background: rgba(180, 241, 8, .2); color: var(--lime-deep); font-size: 12px; font-weight: 600; }
.gx-preview .mx-assign-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 12px; }
.gx-preview .mx-assign-row b { font-size: 14px; font-weight: 600; }
.gx-preview .mx-assign-row small { margin-inline-start: auto; font-size: 12.5px; color: #6b756e; }
.gx-preview .mx-assign-row .fa-check { color: var(--lime-deep); font-size: 13px; }
.gx-preview .mx-assign-row.is-pick { background: rgba(180, 241, 8, .18); }

.gx-preview .mx-board { top: 11%; left: 7%; width: min(400px, 86%); padding: 22px; }
.gx-preview .mx-board-kpi { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 16px; }
.gx-preview .mx-board-kpi strong { font-size: 48px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.gx-preview .mx-board-kpi span { color: var(--lime-deep); font-size: 14px; font-weight: 600; }
.gx-preview .mx-board-row { display: grid; grid-template-columns: 76px 1fr 40px; align-items: center; gap: 12px; padding: 7px 0; }
.gx-preview .mx-board-row b { font-size: 14px; font-weight: 500; }
.gx-preview .mx-board-row em { font-size: 13.5px; font-style: normal; font-weight: 600; text-align: end; }
.gx-preview .mx-track { height: 8px; overflow: hidden; border-radius: 99px; background: #eef0ec; }
.gx-preview .mx-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--ink); }
.gx-preview .mx-board-row.is-ai .mx-track i { background: var(--lime); }
.gx-preview .is-in .active .mx-track i { animation: mxgrow 1s cubic-bezier(.2, .8, .2, 1) .5s both; }
.gx-preview .mx-comm { right: 7%; bottom: 11%; width: min(240px, 64%); padding: 14px 16px; }
.gx-preview .mx-comm small { display: block; font-size: 12px; color: #6b756e; }
.gx-preview .mx-comm b { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; }

.gx-preview .mx-act { top: 9%; left: 6%; width: min(340px, 76%); padding: 14px; }
.gx-preview .mx-act .mx-tc-head,
.gx-preview .mx-notechat .mx-tc-head,
.gx-preview .mx-prof-top { display: flex; align-items: center; gap: 10px; }
.gx-preview .mx-act .mx-tc-head b,
.gx-preview .mx-notechat .mx-tc-head b { margin-inline-end: auto; }
.gx-preview .mx-act-thread { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.gx-preview .mx-bub { max-width: 88%; padding: 8px 10px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
.gx-preview .mx-bub.in { align-self: flex-start; background: #f3f4f1; border-bottom-left-radius: 4px; }
.gx-preview .mx-bub.out { align-self: flex-end; background: #e7f8d4; border-bottom-right-radius: 4px; }
.gx-preview .mx-bub.note { align-self: stretch; max-width: none; background: #fff6d8; border: 1px dashed #e2c56a; }
.gx-preview .mx-bub.note b,
.gx-preview .mx-bub.in b { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.gx-preview .mx-bub.note b { color: #8a5a00; }
.gx-preview .mx-bub.in b { color: var(--lime-deep); text-transform: none; letter-spacing: 0; font-size: 12px; }
.gx-preview .mx-act-bar { display: flex; gap: 6px; }
.gx-preview .mx-act-bar span { flex: 1; padding: 8px 4px; border-radius: 999px; background: #f3f4f1; font-size: 12px; font-weight: 600; text-align: center; }
.gx-preview .mx-act-bar .is-on { background: var(--lime); }
.gx-preview .mx-act-bar .is-bad { background: #fdecec; color: #9a3b3b; }
.gx-preview .mx-addr { right: 5%; bottom: 20%; width: min(220px, 52%); z-index: 2; }
.gx-preview .mx-field { display: block; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #f6f7f4; }
.gx-preview .mx-field b { display: block; font-size: 11px; font-weight: 600; color: #6b756e; }
.gx-preview .mx-field span { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
.gx-preview .mx-profile { top: 10%; left: 8%; right: 8%; width: auto; }
.gx-preview .mx-prof-top small,
.gx-preview .mx-tagline small,
.gx-preview .mx-attach small { display: block; margin-top: 2px; font-size: 12px; color: #6b756e; }
.gx-preview .mx-prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.gx-preview .mx-prof-stats div { padding: 10px 6px; border-radius: 12px; background: #f6f7f4; text-align: center; }
.gx-preview .mx-prof-stats b { display: block; font-size: 20px; line-height: 1; }
.gx-preview .mx-prof-stats small { font-size: 11px; color: #6b756e; }
.gx-preview .mx-prof-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #eef0ec; font-size: 13.5px; font-weight: 600; }
.gx-preview .mx-notechat { top: 16%; left: 10%; width: min(360px, 80%); }
.gx-preview .mx-note-foot { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3b4a3c; }
.gx-preview .mx-note-foot .mx-av { width: 28px; height: 28px; flex-basis: 28px; }
.gx-preview .mx-tags { top: 12%; left: 6%; width: min(420px, 88%); }
.gx-preview .mx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.gx-preview .mx-filters span { padding: 5px 10px; border-radius: 999px; background: #f3f4f1; color: #4d5751; font-size: 12px; font-weight: 600; }
.gx-preview .mx-filters .is-on { background: var(--ink); color: var(--lime); }
.gx-preview .mx-tagline { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid #eef0ec; }
.gx-preview .mx-tagline b { display: block; font-size: 14px; }
.gx-preview .mx-chips { display: flex; gap: 4px; margin-inline-start: auto; }
.gx-preview .mx-report { top: 11%; left: 6%; width: min(250px, 54%); }
.gx-preview .mx-attach { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 8px; border-radius: 12px; background: #f6f7f4; }
.gx-preview .mx-attach img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.gx-preview .mx-attach b { display: block; font-size: 13.5px; }
.gx-preview .mx-ticket { right: 6%; bottom: 10%; width: min(250px, 54%); z-index: 2; }
.gx-preview .mx-ticket .mx-bub { max-width: 100%; }
.gx-preview .mx-dash { top: 9%; left: 6%; right: 6%; width: auto; }
.gx-preview .mx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 8px; }
.gx-preview .mx-kpis div { padding: 10px 8px; border-radius: 12px; background: #f6f7f4; }
.gx-preview .mx-kpis b { display: block; font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.gx-preview .mx-kpis small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.25; color: #6b756e; }
.gx-preview .mx-agent { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.gx-preview .mx-agent b { font-size: 14px; font-weight: 600; }
.gx-preview .mx-agent small { color: #6b756e; font-size: 12.5px; }
.gx-preview .mx-agent em { margin-inline-start: auto; font-style: normal; font-size: 14px; font-weight: 600; }


/* ---------- Services: four cards, sideways scroll on a phone ---------- */
.gx-preview .mx-mute { color: rgba(17, 27, 33, .36); }
.gx-preview .mx-svc .mx-head { max-width: 720px; }
.gx-preview .mx-svc .eyebrow { display: block; }
.gx-preview .mx-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.gx-preview .mx-svc-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 8px 8px 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--soft);
}
.gx-preview .mx-svc-photo {
    overflow: hidden;
    border-radius: 18px;
    background: #ece7dc;
}
.gx-preview .mx-svc-photo img {
    display: block;
    width: 100%;
    height: 168px;
    object-fit: cover;
    transform: scale(1.01);
}
.gx-preview .mx-svc-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 10px 2px;
}
.gx-preview .mx-svc-body h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.gx-preview .mx-svc-body p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}
.gx-preview .mx-svc-body ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: auto 0 0;
    padding: 16px 0 0;
    list-style: none;
}
.gx-preview .mx-svc-body li {
    position: relative;
    padding-inline-start: 18px;
    color: rgba(16, 21, 16, .82);
    font-size: 13.5px;
    line-height: 1.4;
}
.gx-preview .mx-svc-body li::before {
    content: "";
    position: absolute;
    top: 0.42em;
    inset-inline-start: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime-deep);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .gx-preview .mx-svc-card { transition: transform .22s ease, box-shadow .22s ease; }
    .gx-preview .mx-svc-photo img { transition: transform .45s ease; }
    .gx-preview .mx-svc-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(7, 18, 15, .12); }
    .gx-preview .mx-svc-card:hover img { transform: scale(1.05); }
}
@media (max-width: 1140px) {
    .gx-preview .mx-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gx-preview .mx-svc-photo img { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .gx-preview .mx-ai-b, .gx-preview .mx-pop { opacity: 1 !important; animation: none !important; }
}

/* ---------- Final CTA ---------- */
.gx-preview .mx-final-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.gx-preview .mx-quiet { display: inline-flex; align-items: center; height: 39px; padding: 0 16px; border: 1px solid rgba(17, 27, 33, .25); border-radius: 50px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
.gx-preview .mx-quiet:hover { background: rgba(17, 27, 33, .05); color: var(--ink); }
.gx-preview .mx-final-app { margin: 30px 0 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 980px) {
    .gx-preview .mx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
    .gx-preview .mx-conv-card { grid-template-columns: 1fr; gap: 28px; }
    .gx-preview .mx-conv-stage { min-height: calc(var(--wa-card-h) + 32px); padding: 8px 0 0; border-radius: 0; background: transparent; }
    .gx-preview .mx-conv-card .mx-acc { order: 0; }

    .gx-preview .mx-ai-inner { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding: 56px 22px 32px; }
    .gx-preview .mx-ai-feats { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px 48px; }
    .gx-preview .mx-ai-feats-title { max-width: none; }
    .gx-preview .mx-ai-stage, .gx-preview .mx-ai-scr { min-height: 0; }
    .gx-preview .mx-ai .wa-phone { position: relative; top: auto; left: auto; margin: 0 auto; transform: none; }
    .gx-preview .mx-ai-side,
    .gx-preview .mx-ai-scr[data-screen="2"] .mx-ai-side { position: relative; top: auto; right: auto; bottom: auto; width: min(318px, 100%); margin: -36px auto 0; }

    .gx-preview .mx-team-card { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 1023px) {
    .gx-preview .mx-ai { padding: 12px 16px; }
    .gx-preview .mx-ai-card { border-radius: 20px; }
}
@media (max-width: 576px) {
    .gx-preview .mx-flow { padding-top: 72px; }
    .gx-preview .mx-head { margin-bottom: 30px; }
    .gx-preview .mx-step h3 { font-size: 16px; }
    .gx-preview .mx-step p { font-size: 13px; }
    .gx-preview .mx-acc-item { padding: 18px 0; }
    .gx-preview .mx-acc-item h3 { font-size: 18px; }
    .gx-preview .mx-ai-inner { padding: 44px 18px 24px; }
    .gx-preview .mx-ai-feats { padding: 28px 18px 40px; }
    .gx-preview .mx-ai-feats-grid { grid-template-columns: 1fr; row-gap: 22px; }
    .gx-preview .mx-ai-lead { font-size: 16px; }
    .gx-preview .mx-ai-item h3 { font-size: 18px; }
    .gx-preview .mx-ai-stats { gap: 28px; }
    .gx-preview .mx-ai-thread { height: 380px; }
    .gx-preview .mx-team-stage { min-height: 400px; border-radius: 22px; }
    .gx-preview .mx-inbox { top: 6%; left: 5%; }
    .gx-preview .mx-order { right: 4%; bottom: 5%; }
    .gx-preview .mx-board { top: 6%; left: 5%; padding: 18px; }
    .gx-preview .mx-board-kpi strong { font-size: 40px; }
    .gx-preview .mx-comm { right: 4%; bottom: 5%; }
    .gx-preview .mx-act { top: 4%; left: 4%; width: min(250px, 68%); }
    .gx-preview .mx-addr { right: 3%; bottom: 4%; width: min(180px, 50%); }
    .gx-preview .mx-profile,
    .gx-preview .mx-tags,
    .gx-preview .mx-dash,
    .gx-preview .mx-notechat { top: 4%; left: 4%; right: 4%; width: auto; }
    .gx-preview .mx-kpis b { font-size: 16px; }
    .gx-preview .mx-report { top: 4%; left: 4%; width: min(190px, 56%); }
    .gx-preview .mx-ticket { right: 3%; bottom: 4%; width: min(180px, 52%); }
    .gx-preview .mx-svc { padding-inline: 0; }
    .gx-preview .mx-svc .mx-head { padding-inline: 22px; margin-bottom: 22px; }
    .gx-preview .mx-svc-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gx-preview .mx-svc-scroll::-webkit-scrollbar { display: none; }
    .gx-preview .mx-svc-grid {
        display: flex;
        gap: 12px;
        width: max-content;
        padding: 2px 22px 18px;
    }
    .gx-preview .mx-svc-card {
        flex: 0 0 min(82vw, 320px);
        scroll-snap-align: start;
        border-radius: 22px;
    }
    .gx-preview .mx-svc-photo { border-radius: 16px; }
    .gx-preview .mx-svc-photo img { height: 176px; }
    .gx-preview .mx-svc-body h3 { font-size: 17px; }
}

/* WhatsApp chrome follows the page. Headers, bubbles and tails mirror in RTL. */
.gx-preview[dir="rtl"] .wa-phone,
.gx-preview.v2-rtl .wa-phone { direction: rtl; }
.gx-preview[dir="rtl"] .wa-top .fa-chevron-left,
.gx-preview.v2-rtl .wa-top .fa-chevron-left { transform: scaleX(-1); }
.gx-preview[dir="rtl"] .wa-b.out,
.gx-preview.v2-rtl .wa-b.out { margin-left: 0; margin-right: auto; border-bottom-right-radius: 8px; border-bottom-left-radius: 2px; }
.gx-preview[dir="rtl"] .wa-b.in,
.gx-preview.v2-rtl .wa-b.in { margin-right: 0; margin-left: auto; border-bottom-left-radius: 8px; border-bottom-right-radius: 2px; }
.gx-preview[dir="rtl"] .wa-b.out::after,
.gx-preview.v2-rtl .wa-b.out::after { right: auto; left: -7px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.gx-preview[dir="rtl"] .wa-b.in::before,
.gx-preview.v2-rtl .wa-b.in::before { left: auto; right: -7px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.gx-preview[dir="rtl"] .wa-time,
.gx-preview.v2-rtl .wa-time { float: left; }
.gx-preview[dir="rtl"] .wa-stack,
.gx-preview.v2-rtl .wa-stack { margin-left: 0; margin-right: auto; }
.gx-preview[dir="rtl"] .wa-send i,
.gx-preview.v2-rtl .wa-send i { transform: scaleX(-1) translate(1px, 1px); }