/* Product screenshots: browser / phone frames, home page tour, gallery and enlarge dialog.
   Markup: include/et-product-screens.php. Brand: ink #133F4C, orange #F78425, teal #0DADA3. */
:root {
    --ets-ink: #133F4C;
    --ets-ink-2: #3f5960;
    --ets-muted: #61767c;
    --ets-orange: #F78425;
    --ets-teal: #0b8f86;
    --ets-teal-50: #e6f5f3;
    --ets-line: rgba(19, 63, 76, .12);
    --ets-shadow: 0 34px 60px -30px rgba(19, 63, 76, .45), 0 10px 24px -14px rgba(19, 63, 76, .22);
}

/* ---------- frames ---------- */
.ets-frame { margin: 0; position: relative; }
.ets-frame img { display: block; width: 100%; height: auto; }
.ets-frame__zoom { display: block; cursor: zoom-in; }
.ets-frame__zoom:focus-visible { outline: 3px solid var(--ets-orange); outline-offset: 3px; }
.ets-frame--browser {
    background: #fff; border: 1px solid var(--ets-line); border-radius: 14px; overflow: hidden;
    box-shadow: var(--ets-shadow);
    transition: transform .35s ease, box-shadow .35s ease;
}
.ets-frame__bar {
    position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
    background: linear-gradient(#f7f9fa, #eef3f4); border-bottom: 1px solid var(--ets-line);
}
.ets-frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ets-frame__bar span + span { background: #febc2e; }
.ets-frame__bar span + span + span { background: #28c840; }
.ets-frame__bar em {
    position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%;
    padding: 3px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 11.5px/1.4 Poppins, sans-serif; font-style: normal; color: var(--ets-muted);
    background: #fff; border: 1px solid var(--ets-line); border-radius: 7px;
}
.ets-frame--phone {
    padding: 20px 7px 9px; background: #0f2228; border-radius: 34px;
    box-shadow: 0 30px 50px -24px rgba(15, 34, 40, .6), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ets-frame--phone .ets-frame__zoom, .ets-frame--phone img { border-radius: 8px 8px 26px 26px; overflow: hidden; }
.ets-frame--phone::before { /* speaker, in the top bezel so it never covers the screen */
    content: ""; position: absolute; top: 8px; left: 50%; width: 22%; height: 5px;
    transform: translateX(-50%); background: #2c4148; border-radius: 3px;
}
/* old CMS screenshot slots */
.growth-img .ets-frame--inline { margin: 18px 28px; }
@media (max-width: 767.98px) { .growth-img .ets-frame--inline { margin: 14px 16px; } }
@media (hover: hover) {
    .ets-frame--browser:hover { transform: translateY(-4px); box-shadow: 0 44px 70px -32px rgba(19, 63, 76, .5), 0 12px 28px -14px rgba(19, 63, 76, .25); }
}

/* ---------- shared section head ---------- */
.ets-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.ets-eyebrow {
    display: inline-block; margin-bottom: 14px; padding: 5px 14px;
    font: 600 12px/1.4 Poppins, sans-serif; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ets-teal); background: var(--ets-teal-50); border-radius: 999px;
}
.ets-title { margin: 0 0 12px; font: 600 clamp(26px, 3.2vw, 38px)/1.2 Poppins, sans-serif; color: var(--ets-ink); text-wrap: balance; }
.ets-title span { color: #c45a0b; }
.ets-lead { margin: 0; font: 400 16.5px/1.65 Poppins, sans-serif; color: var(--ets-muted); }

/* ---------- home page tour ---------- */
.ets-tour {
    position: relative; overflow: hidden; padding: 86px 0 92px;
    background:
        radial-gradient(900px 420px at 85% 0%, rgba(247, 132, 37, .08), transparent 70%),
        radial-gradient(900px 480px at 10% 30%, rgba(13, 173, 163, .10), transparent 70%),
        linear-gradient(180deg, #f5f9fa 0%, #ffffff 100%);
}
.ets-tabs {
    display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%;
    margin: 0 auto 22px; padding: 6px; overflow-x: auto; scrollbar-width: none;
    background: #fff; border: 1px solid var(--ets-line); border-radius: 16px;
    box-shadow: 0 10px 30px -18px rgba(19, 63, 76, .35);
}
.ets-tabs::-webkit-scrollbar { display: none; }
.ets-tab {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 9px 18px; font: 600 15px/1.3 Poppins, sans-serif; color: var(--ets-ink);
    background: none; border: 0; border-radius: 11px; cursor: pointer; transition: background .2s, color .2s;
}
.ets-tab__kind { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ets-muted); }
.ets-tab:hover { background: #f1f6f7; }
.ets-tab[aria-selected="true"] { color: #fff; background: var(--ets-ink); box-shadow: 0 8px 18px -10px rgba(19, 63, 76, .8); }
.ets-tab[aria-selected="true"] .ets-tab__kind { color: rgba(255, 255, 255, .7); }
.ets-tab:focus-visible { outline: 3px solid var(--ets-orange); outline-offset: 2px; }
.ets-panel__text { max-width: 700px; min-height: 3.3em; margin: 0 auto 30px; text-align: center; font: 400 15.5px/1.65 Poppins, sans-serif; color: var(--ets-ink-2); }
.ets-panel:not([hidden]) .ets-stage { animation: ets-in .45s ease both; }
.ets-stage { position: relative; max-width: 1110px; margin: 0 auto; }
.ets-stage--duo { padding-right: 70px; }
.ets-frame--float { position: absolute; right: 0; bottom: -36px; width: 230px; }
.ets-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 64px; }
@keyframes ets-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- gallery (product pages, features page) ---------- */
.ets-gallery { padding: 80px 0; background: linear-gradient(180deg, #ffffff 0%, #f4f9f9 100%); }
.ets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.ets-card {
    display: flex; flex-direction: column; height: 100%; padding: 14px;
    background: #fff; border: 1px solid var(--ets-line); border-radius: 20px;
    box-shadow: 0 16px 40px -30px rgba(19, 63, 76, .5);
}
.ets-card .ets-frame--browser { box-shadow: 0 18px 34px -24px rgba(19, 63, 76, .45); }
.ets-card--phone .ets-frame--phone { width: min(250px, 70%); margin: 10px auto 0; }
.ets-card--phone { background: linear-gradient(180deg, var(--ets-teal-50), #fff 70%); }
.ets-card__body { padding: 18px 8px 6px; }
.ets-card__kind { font: 600 11px/1.4 Poppins, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ets-teal); }
.ets-card h3 { margin: 4px 0 6px; font: 600 19px/1.35 Poppins, sans-serif; color: var(--ets-ink); }
.ets-card p { margin: 0; font: 400 14.5px/1.6 Poppins, sans-serif; color: var(--ets-muted); }
.ets-gallery--three .ets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- enlarge dialog ---------- */
.ets-zoom {
    position: fixed; inset: 0; width: fit-content; height: fit-content; margin: auto;
    max-width: min(1400px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; background: #fff; overflow: auto;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.ets-zoom::backdrop { background: rgba(9, 24, 29, .78); }
.ets-zoom img { display: block; max-width: 100%; height: auto; }
.ets-zoom button {
    position: sticky; top: 10px; float: right; margin: 10px 10px -50px 0; width: 40px; height: 40px;
    font: 400 26px/1 sans-serif; color: #fff; background: rgba(19, 63, 76, .85); border: 0; border-radius: 50%; cursor: pointer;
}
.ets-zoom button:focus-visible { outline: 3px solid var(--ets-orange); }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .ets-gallery--three .ets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ets-frame--float { width: 170px; }
    .ets-stage--duo { padding-right: 40px; }
}
@media (max-width: 767.98px) {
    .ets-tour, .ets-gallery { padding: 56px 0 60px; }
    .ets-tabs { justify-content: flex-start; width: auto; margin-left: -4px; margin-right: -4px; }
    .ets-tab { padding: 8px 14px; font-size: 14px; }
    .ets-grid, .ets-gallery--three .ets-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .ets-stage--duo { padding-right: 0; padding-bottom: 0; }
    .ets-frame--float { position: relative; right: auto; bottom: auto; width: 58%; margin: -40px 0 0 auto; }
    .ets-frame__bar { height: 26px; padding: 0 10px; gap: 5px; }
    .ets-frame__bar span { width: 7px; height: 7px; }
    .ets-frame__bar em { display: none; }
    .ets-frame--browser { border-radius: 10px; }
    .ets-cta { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .ets-frame--browser, .ets-tab { transition: none; }
    .ets-frame--browser:hover { transform: none; }
    .ets-panel:not([hidden]) .ets-stage { animation: none; }
}