/* ==========================================================================
   LinguisTriks layer over the Starbis template (wwwroot/starbis/css/style.css).

   The pages are built from the template's own markup and classes (shell / range / cell-*, section-*, offset-top-*,
   icon-box, box-counter, pricing-table, list-marked, btn ...). This file only adds what the template does not have
   or does with jQuery plugins we do not ship:
     1. readable text colours and sizes (the template's #9f9f9f body text fails contrast) and keyboard focus rings
        (the template removes them)
     2. the site header and its menus (same markup as before, drawn in the template's style)
     3. the hero slider, photo bands and page-title banners (the template's swiper / rd-parallax, without the plugins)
     4. product pictures, reveal-on-scroll, questions, the footer, the cookie banner
   ========================================================================== */

:root {
    --lt-ink: #00030a;
    --lt-text: #5c636e;          /* 6.0 : 1 on white */
    --lt-muted: #6f7680;         /* 4.6 : 1 on white */
    --lt-line: #e6e8ec;
    --lt-soft: #f9f9f9;
    --lt-accent: #58c4a7;        /* the template's green */
    --lt-accent-hover: #47b597;
    --lt-accent-ink: #06261f;    /* text on the green: 8 : 1 (white on it would be 2.1 : 1) */
    --lt-accent-text: #1f7f68;   /* the green as TEXT on white: 4.9 : 1 */
    --lt-blue: #2d5292;          /* logo blue: links in running text */
    --lt-red: #c62227;           /* logo red */
    --lt-header-h: 84px;
    --lt-head: "Montserrat", Helvetica, Arial, sans-serif;
}

/* ---------- 1. text ---------------------------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.7; color: var(--lt-text); }
p + p { margin-top: 14px; }
em { color: #6b6e6d; }
.context-dark em, .lt-band em, .lt-slider em { color: rgba(255, 255, 255, .72); }
.context-dark, .lt-band { color: rgba(255, 255, 255, .8); }
.lt-band h2, .lt-band h3, .lt-band .h3, .lt-band .h5, .lt-band .h6 { color: #fff; }
.lt-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
h2.h3 + p, .h3 + p { margin-top: 18px; }

/* links in running text: the template makes every link grey and inline-block, which hides them in a paragraph */
main p a:not(.btn), main li a:not(.btn), main dd a:not(.btn) { display: inline; color: var(--lt-blue); text-decoration: underline; text-decoration-color: rgba(45, 82, 146, .35); text-underline-offset: 3px; }
main p a:not(.btn):hover, main li a:not(.btn):hover, main dd a:not(.btn):hover { color: var(--lt-accent-text); text-decoration-color: currentColor; }
.context-dark p a:not(.btn), .lt-band p a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }

/* lists with the template's tick: no ";" and "." added after the items, and a readable size on mid-width screens */
.list-marked li { color: var(--lt-ink); font-size: 15.5px; }
.list-marked li::after { content: none !important; }
.list-marked li + li { margin-top: 10px; }
* + .list-marked { margin-top: 22px; }
@media (min-width: 992px) and (max-width: 1199px) { .list-marked li { font-size: 15px; padding-left: 28px; } }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 10px 16px; background: #fff; color: var(--lt-ink); font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }
/* the template removes focus outlines with !important; people using a keyboard need them back */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(45, 82, 146, .6) !important; outline-offset: 2px;
}
.context-dark a:focus-visible, .lt-band a:focus-visible, .lt-slider a:focus-visible, .lt-slider button:focus-visible, .lt-footer a:focus-visible, .lt-footer button:focus-visible, .lt-title a:focus-visible {
    outline-color: var(--lt-accent) !important;
}
main:focus { outline: none; }

/* buttons: the template's shapes; dark text on the green so it can be read */
.btn-primary, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover { color: var(--lt-accent-ink); background-color: var(--lt-accent); border-color: var(--lt-accent); }
.btn-primary:hover { color: var(--lt-accent-ink); background-color: var(--lt-accent-hover); border-color: var(--lt-accent-hover); }
.btn-default:hover, .btn-default:focus { color: var(--lt-accent-ink); background-color: var(--lt-accent); border-color: var(--lt-accent); }
/* the template pushes every button that follows something 30 - 44 px down; rows of buttons space themselves */
.lt-btn-row .btn, .nav-actions .btn, .cookie-actions .btn { margin-top: 0; }
.lt-btn-row { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.text-center .lt-btn-row, .lt-btn-row.is-center { justify-content: center; }
* + .lt-btn-row { margin-top: 34px; }
@media (max-width: 479px) { .lt-btn-row .btn { width: 100%; } }

/* a grid of several rows: the template spaces rows with per-cell offset classes; one rule does it here */
.range.lt-grid { row-gap: 44px; }
.range.lt-grid > [class*="cell-"] { margin-top: 0; }
@media (max-width: 479px) { .range.lt-grid > [class*="cell-"] + [class*="cell-"] { margin-top: 40px; } }

/* ---------- 2. header ---------------------------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--lt-header-h); background: #fff; box-shadow: 0 1px 0 var(--lt-line); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .1); }
.site-header .container { width: auto; max-width: 1200px; padding-left: 15px; padding-right: 15px; }
/* the template's clearfix pseudo-elements would count as two empty items of the header's row and push it out of line */
.site-header .container::before, .site-header .container::after { display: none; }
.site-header a { display: inline-flex; }
.header-inner { display: flex; align-items: center; height: 100%; gap: 16px; }
.site-header .brand { display: inline-flex; align-items: center; flex: none; }
.site-header .brand img { width: 176px; height: auto; }
.brand-on-dark { display: none !important; }
.site-header svg.icon { flex: none; }

.site-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; }
.nav-list { position: relative; display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item--mega { position: static; }
.site-header .nav-link, .nav-drop > summary {
    position: relative; display: inline-flex; align-items: center; gap: .25em; padding: 8px 8px;
    font: 700 12px/1.2 var(--lt-head); letter-spacing: .05em; text-transform: uppercase; color: var(--lt-ink); text-decoration: none; cursor: pointer;
    list-style: none; user-select: none; white-space: nowrap; transition: color .15s ease;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.site-header .nav-link::after, .nav-drop > summary::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--lt-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .33s ease-out;
}
.site-header .nav-link:hover::after, .nav-drop > summary:hover::after, .nav-drop[open] > summary::after,
.nav-item.is-active > .nav-link::after, .nav-item.is-active > .nav-drop > summary::after { transform: scaleX(1); }
.nav-drop .chev { transition: transform .2s ease; opacity: .6; }
.nav-drop[open] .chev { transform: rotate(180deg); }

.nav-panel {
    position: absolute; top: calc(100% + 26px); left: 0; z-index: 10; min-width: 300px; padding: 18px;
    background: #fff; border-top: 2px solid var(--lt-accent); box-shadow: 0 0 13px 0 rgba(0, 0, 0, .13);
    display: grid; gap: 2px; animation: nav-panel-in .2s ease-out; text-transform: none; letter-spacing: 0;
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(12px); } }
.nav-panel--product { width: min(960px, calc(100vw - 48px)); grid-template-columns: 1fr 236px; gap: 24px; padding: 28px; }
.nav-panel--solutions { width: min(830px, calc(100vw - 48px)); grid-template-columns: 1fr 250px; gap: 24px; padding: 28px; }
.nav-panel--resources { width: min(900px, calc(100vw - 48px)); grid-template-columns: 1fr 260px; gap: 24px; padding: 28px; }
.nav-panel--company { min-width: 320px; }
.nav-cols { display: grid; gap: 24px; align-content: start; }
.nav-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-col { display: grid; gap: 2px; align-content: start; }
.nav-head { margin: 0 0 8px; padding: 0 10px 10px; font: 700 11px/1.3 var(--lt-head); letter-spacing: .14em; text-transform: uppercase; color: var(--lt-ink); border-bottom: 1px solid var(--lt-line); }
.site-header .nav-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; color: var(--lt-ink); text-decoration: none; }
.nav-row:hover, .nav-row.is-current { background: var(--lt-soft); }
.nav-row-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--lt-accent-text); font-size: 22px; line-height: 1; transition: color .15s ease; }
.nav-row-icon .icon { font-size: 22px; line-height: 1; }
.nav-row:hover .nav-row-icon, .nav-row.is-current .nav-row-icon { color: var(--lt-ink); }
.nav-row-text { display: grid; line-height: 1.3; min-width: 0; }
.nav-row-text strong { font: 700 13px/1.3 var(--lt-head); color: var(--lt-ink); }
.nav-row-text small { color: var(--lt-muted); font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
.nav-plain { display: grid; gap: 2px; }
.site-header .nav-plain a { position: relative; display: block; padding: 6px 10px; color: var(--lt-text); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: color .15s ease, padding-left .25s ease; }
.nav-plain a::before { content: ""; position: absolute; left: 10px; top: calc(50% - 1px); width: 0; height: 2px; background: var(--lt-accent); transition: width .25s ease; }
.site-header .nav-plain a:hover, .site-header .nav-plain a.is-current { color: var(--lt-ink); padding-left: 26px; }
.nav-plain a:hover::before, .nav-plain a.is-current::before { width: 12px; }
.site-header .nav-feature { display: grid; align-content: end; gap: 8px; padding: 20px; text-decoration: none; color: var(--lt-text); background: var(--lt-soft); font-size: 13.5px; line-height: 1.5; }
.nav-feature strong { font: 700 15px/1.35 var(--lt-head); color: var(--lt-ink); }
.nav-feature .btn { justify-self: start; margin-top: 6px; }
.nav-feature .link-arrow { display: inline-flex; align-items: center; gap: .4em; font: 700 11px/1.4 var(--lt-head); letter-spacing: .08em; text-transform: uppercase; color: var(--lt-ink); }
.nav-feature-kicker { font: 700 10.5px/1.4 var(--lt-head); letter-spacing: .14em; text-transform: uppercase; color: var(--lt-red); }
.site-header .nav-feature--dark { color: rgba(255, 255, 255, .85); background: #111 linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .82)), url("/images/tpl/band-team-960.webp"); background-size: cover; background-position: center; }
.nav-feature--dark strong { color: #fff; }
.nav-feature--dark .nav-feature-kicker { color: var(--lt-accent); }
.site-header .nav-feature--post { padding: 0; overflow: hidden; align-content: start; }
.nav-feature--post img { display: block; width: 100%; height: auto; aspect-ratio: 1.9; object-fit: cover; }
.nav-feature-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.nav-contact { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 12px 10px 2px; border-top: 1px solid var(--lt-line); font-size: 13.5px; color: var(--lt-muted); }
.site-header .nav-contact a { color: var(--lt-ink); font-weight: 700; }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.site-header .nav-signin { color: var(--lt-text); }
.site-header .nav-signin::after { display: none; }
.site-header .btn { min-width: 0; padding: 9px 14px; font-size: 11px; line-height: 1.6; letter-spacing: .04em; border-radius: 4px; }
.site-header .btn-secondary { color: var(--lt-ink); background: #fff; border-color: var(--lt-ink); }
.site-header .btn-secondary:hover { color: #fff; background: var(--lt-ink); }
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; margin: 0 0 0 auto; width: 44px; height: 44px; place-items: center; cursor: pointer; color: var(--lt-ink); }
.nav-burger-close { display: none; }
.nav-toggle:focus-visible + .nav-burger { outline: 3px solid rgba(45, 82, 146, .45); outline-offset: 2px; }

@media (max-width: 1240px) {
    :root { --lt-header-h: 66px; }
    .nav-burger { display: grid; }
    .site-nav {
        position: fixed; inset: var(--lt-header-h) 0 0 0; z-index: 99; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px;
        padding: 18px 20px 32px; background: #fff; overflow-y: auto;
        transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .nav-toggle:checked ~ .site-nav { transform: none; opacity: 1; visibility: visible; }
    .site-nav > * { width: 100%; max-width: 640px; margin-inline: auto; }
    .nav-toggle:checked + .nav-burger .nav-burger-open { display: none; }
    .nav-toggle:checked + .nav-burger .nav-burger-close { display: inline; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-item--mega { position: relative; }
    .site-header .nav-link, .nav-drop > summary { width: 100%; justify-content: space-between; padding: 15px 10px; font-size: 13px; border-bottom: 1px solid var(--lt-line); }
    .site-header .nav-link::after, .nav-drop > summary::after { display: none; }
    .nav-item.is-active > .nav-link, .nav-item.is-active > .nav-drop > summary { box-shadow: inset 3px 0 0 var(--lt-accent); padding-left: 14px; }
    .nav-panel, .nav-panel--product, .nav-panel--solutions, .nav-panel--resources, .nav-panel--company {
        position: static; width: auto; min-width: 0; box-shadow: none; border: 0; padding: 8px 0 14px 6px; grid-template-columns: 1fr; gap: 10px; animation: none;
    }
    .nav-panel::before { display: none; }
    .nav-cols, .nav-cols--2, .nav-cols--3 { grid-template-columns: 1fr; gap: 14px; }
    .site-header .nav-feature { display: none; }
    .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .nav-actions .btn { width: 100%; padding: 13px 16px; font-size: 12px; justify-content: center; }
    .site-header .nav-signin { justify-content: center; border-bottom: 0; }
    body:has(.nav-toggle:checked) { overflow: hidden; }
}

/* ---------- 3a. hero slider (the template's swiper-variant-1, moved by site.js) ------------------------------------- */
.lt-slider { touch-action: pan-y; }
.lt-slider .swiper-wrapper { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.lt-slider .swiper-slide { background-size: cover; background-position: center; background-color: #1b2330; }
.lt-slider .swiper-slide::after { content: ""; position: absolute; inset: 0; background: rgba(8, 12, 20, .3); }
.lt-slider .swiper-slide-caption { position: relative; z-index: 1; margin-left: 0; }
.lt-slider .slider-header { margin: 0; color: #fff; font-size: 31px; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.lt-slider .slider-text { display: block; max-width: 760px; margin: 18px auto 0; color: rgba(255, 255, 255, .92); font-size: 16.5px; font-weight: 400; line-height: 1.6; }
.lt-slider .lt-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 30px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .9); font-size: 14.5px; }
.lt-slider .lt-ticks li::before { content: "\e005"; font-family: "fl-flat-icons-set-2"; font-size: 12px; color: var(--lt-accent); margin-right: 9px; }
.lt-slider .swiper-scrollbar { background: rgba(255, 255, 255, .12); }
.lt-slider .swiper-scrollbar-drag { width: 33.3334%; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.lt-slider .swiper-button-prev, .lt-slider .swiper-button-next { border: 0; padding: 0; background: none; }
.lt-slider .swiper-button-prev { left: 22px; }
.lt-slider .swiper-button-next { right: 22px; }
.lt-slider-pause { position: absolute; left: 22px; bottom: 18px; z-index: 10; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: #fff; opacity: .75; cursor: pointer; }
.lt-slider-pause:hover { opacity: 1; }
.lt-slider-pause::before { content: "\f4d3"; font: 400 26px/38px "Material Design Icons"; }       /* mdi-pause */
.lt-slider-pause[aria-pressed="true"]::before { content: "\f4f9"; }                                /* mdi-play */
html:not(.js) .lt-slider-pause, html:not(.js) .lt-slider .swiper-nav-wrap, html:not(.js) .lt-slider .swiper-scrollbar { display: none; }
.lt-slide-1 { background-image: url("/images/tpl/slide-1-1920.webp"); }
.lt-slide-2 { background-image: url("/images/tpl/slide-2-1920.webp"); }
.lt-slide-3 { background-image: url("/images/tpl/slide-3-1920.webp"); }
/* the words arrive after the slide does */
.js .lt-slider .swiper-slide-caption [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.js .lt-slider .swiper-slide.is-active .swiper-slide-caption [data-in] { opacity: 1; transform: none; }
.js .lt-slider .swiper-slide.is-active [data-in="2"] { transition-delay: .12s; }
.js .lt-slider .swiper-slide.is-active [data-in="3"] { transition-delay: .26s; }
.js .lt-slider .swiper-slide.is-active [data-in="4"] { transition-delay: .4s; }
@media (min-width: 768px) {
    .lt-slider .slider-header { font-size: 40px; }
    .lt-slider .slider-text { font-size: 18px; }
    .swiper-variant-1.lt-slider .swiper-slide-caption { padding: 64px 0 84px; }
}
@media (min-width: 1200px) {
    .lt-slider .slider-header { font-size: 48px; }
    .lt-slider .slider-text { font-size: 19px; }
    .swiper-variant-1.lt-slider .swiper-slide-caption { padding: 84px 0 104px; }
}
/* the first slide keeps its words on the left on a wide screen, so the laptop showing the product stays in view */
@media (min-width: 992px) {
    .lt-slide--left { background-position: left center; }
    .lt-slider .lt-slide--left::after { background: linear-gradient(90deg, rgba(8, 12, 20, .74) 0%, rgba(8, 12, 20, .5) 38%, rgba(8, 12, 20, .08) 62%, rgba(8, 12, 20, 0) 100%); }
    .lt-slide--left .swiper-slide-caption { text-align: left; }
    .lt-slide--left .slider-header { text-wrap: wrap; }
    .lt-slide--left .slider-text { margin-left: 0; }
    .lt-slide--left .lt-ticks { justify-content: flex-start; gap: 6px 24px; }
    .lt-slide--left .btn-xl { min-width: 0; padding-left: 34px; padding-right: 34px; }
}
@media (max-width: 960px) {
    .lt-slide-1 { background-image: url("/images/tpl/slide-1-960.webp"); background-position: 62% center; }
    .lt-slide-2 { background-image: url("/images/tpl/slide-2-960.webp"); }
    .lt-slide-3 { background-image: url("/images/tpl/slide-3-960.webp"); }
}
@media (max-width: 767px) {
    .swiper-variant-1.lt-slider, .swiper-variant-1.lt-slider .swiper-wrapper { min-height: 0; }
    .swiper-variant-1.lt-slider .swiper-slide-caption { padding: 54px 0 70px; }
    .lt-slider .swiper-slide::after { background: rgba(8, 12, 20, .45); }
    .lt-slider .btn-xl { min-width: 240px; }
}

/* ---------- 3b. photo bands (the template's rd-parallax sections) --------------------------------------------------- */
.lt-band { position: relative; background-color: #111; background-size: cover; background-position: center; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (hover: hover) { .lt-band { background-attachment: fixed; } }
.lt-band--dim::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.lt-band--dim > * { position: relative; }
.lt-band .text-white { color: rgba(255, 255, 255, .92); }
.lt-bg-team { background-image: url("/images/tpl/band-team-1920.webp"); }
.lt-bg-tablet { background-image: url("/images/tpl/band-tablet-1920.webp"); }
.lt-bg-bulbs { background-image: url("/images/tpl/band-bulbs-1920.webp"); }
.lt-bg-support { background-image: url("/images/tpl/band-support-1920.webp"); }
.lt-bg-keyboard { background-image: url("/images/tpl/band-keyboard-1920.webp"); }
.lt-bg-coffee { background-image: url("/images/tpl/band-coffee-1920.webp"); }
@media (max-width: 960px) {
    .lt-bg-team { background-image: url("/images/tpl/band-team-960.webp"); }
    .lt-bg-tablet { background-image: url("/images/tpl/band-tablet-960.webp"); }
    .lt-bg-bulbs { background-image: url("/images/tpl/band-bulbs-960.webp"); }
    .lt-bg-support { background-image: url("/images/tpl/band-support-960.webp"); }
    .lt-bg-keyboard { background-image: url("/images/tpl/band-keyboard-960.webp"); }
    .lt-bg-coffee { background-image: url("/images/tpl/band-coffee-960.webp"); }
}
.box-counter .counter { color: #fff; }
.box-counter-inverse-lighter .box-header { color: rgba(255, 255, 255, .78); font-size: 14px; letter-spacing: .04em; }
a.lt-tile { display: block; color: rgba(255, 255, 255, .8); }
.lt-tile .icon { display: inline-grid; place-items: center; width: 92px; height: 92px; border: 2px solid rgba(255, 255, 255, .75); color: #fff; font-size: 40px; line-height: 1; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.lt-tile:hover .icon { background: var(--lt-accent); border-color: var(--lt-accent); color: var(--lt-accent-ink); }
.lt-tile .h5 { margin-top: 22px; color: #fff; }
.lt-tile p { max-width: 300px; margin: 10px auto 0; font-size: 15px; color: rgba(255, 255, 255, .82); }

/* ---------- 3c. page-title banner (the template builds its ghost words with a script; here they are CSS only) --------- */
.lt-title { position: relative; overflow: hidden; padding: 44px 0 50px; background-color: #111; background-size: cover; background-position: center 60%; color: rgba(255, 255, 255, .88); }
.lt-title::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .45)); }
.lt-title .shell { position: relative; }
.lt-title h1 { margin: 0; max-width: 860px; color: #fff; font-size: 30px; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.lt-title-word { position: relative; display: inline-block; margin: 0 0 6px; font: 700 34px/1.1 var(--lt-head); letter-spacing: 0; text-transform: uppercase; color: #fff; white-space: nowrap; }
.lt-title-word::before, .lt-title-word::after { content: attr(data-ghost) "\00a0\00a0" attr(data-ghost) "\00a0\00a0" attr(data-ghost) "\00a0\00a0" attr(data-ghost); position: absolute; top: 0; white-space: nowrap; color: rgba(255, 255, 255, .13); pointer-events: none; }
.lt-title-word::before { right: 100%; padding-right: .5em; }
.lt-title-word::after { left: 100%; padding-left: .5em; }
.lt-title h1.lt-title-word { max-width: none; font-size: 34px; line-height: 1.1; letter-spacing: 0; }
.lt-crumbs { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font: 700 11px/1.4 var(--lt-head); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.lt-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .4); }
.lt-title .lt-crumbs a { color: rgba(255, 255, 255, .9); }
.lt-title .lt-crumbs a:hover { color: var(--lt-accent); }
.lt-title .lt-lead { max-width: 760px; margin-top: 16px; color: rgba(255, 255, 255, .9); font-size: 17px; line-height: 1.65; }
.lt-title .lt-btn-row { margin-top: 28px; }
@media (min-width: 768px) { .lt-title { padding: 60px 0 68px; } .lt-title h1 { font-size: 38px; } .lt-title-word, .lt-title h1.lt-title-word { font-size: 46px; } .lt-title .lt-lead { font-size: 18px; } }
@media (min-width: 1200px) { .lt-title { padding: 72px 0 84px; } .lt-title h1 { font-size: 44px; } .lt-title-word, .lt-title h1.lt-title-word { font-size: 59px; } }
@media (max-width: 767px) { .lt-title-word { white-space: normal; } .lt-title-word::before, .lt-title-word::after { display: none; } }
.lt-title-laptop { background-image: url("/images/photos/page-laptop-1920.jpg"); }
.lt-title-conversation { background-image: url("/images/photos/page-conversation-1920.jpg"); }
.lt-title-documents { background-image: url("/images/photos/page-documents-1920.jpg"); }
.lt-title-support { background-image: url("/images/photos/page-support-1920.jpg"); }
.lt-title-workspace { background-image: url("/images/photos/page-workspace-1920.jpg"); }
.lt-title-meeting { background-image: url("/images/photos/band-meeting-room-1920.jpg"); }
@media (max-width: 960px) {
    .lt-title-laptop { background-image: url("/images/photos/page-laptop-960.jpg"); }
    .lt-title-conversation { background-image: url("/images/photos/page-conversation-960.jpg"); }
    .lt-title-documents { background-image: url("/images/photos/page-documents-960.jpg"); }
    .lt-title-support { background-image: url("/images/photos/page-support-960.jpg"); }
    .lt-title-workspace { background-image: url("/images/photos/page-workspace-960.jpg"); }
    .lt-title-meeting { background-image: url("/images/photos/band-meeting-room-960.jpg"); }
}

/* ---------- 4a. product pictures ----------------------------------------------------------------------------------- */
main img { max-width: 100%; height: auto; }
.lt-shot { margin: 0; }
.lt-shot img { display: block; }
@media (min-width: 768px) { .lt-shot--bleed img { max-width: 108%; } .lt-shot--bleed-left img { max-width: 108%; margin-left: -8%; } }
.text-center .lt-shot img, .lt-shot--center img { margin-left: auto; margin-right: auto; }
.image-group figure { margin: 0; }
.image-wrap-3 img, .image-wrap-2 img { display: block; }
@media (max-width: 767px) { .image-wrap-3 { margin-left: 0; transform: none; } }

/* icon boxes are links on our pages: the whole box reacts */
a.icon-box { cursor: pointer; }
.icon-box .h5 { transition: color .33s ease; }
.icon-box .box-body p { color: var(--lt-text); font-size: 15px; line-height: 1.65; }
.icon-box:hover .h5 { color: var(--lt-accent-text); }
.icon-box-vertical { margin-left: auto; margin-right: auto; }
.icon-box-vertical p { font-size: 15px; }
.lt-also { margin-top: 44px; font-size: 16px; }
.lt-note .h6 { margin-top: 16px; font-size: 17px; line-height: 1.4; }
.lt-note .h6 a:hover { color: var(--lt-accent-text); }
.lt-note p { margin-top: 10px; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lt-quote { margin: 0; padding: 30px; background: #fff; box-shadow: -1px 2px 5px 0 rgba(65, 65, 65, .12); }
.lt-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; color: var(--lt-ink); }
.lt-quote figcaption { margin-top: 18px; display: grid; font-size: 14px; }
.lt-quote figcaption strong { font-family: var(--lt-head); color: var(--lt-ink); }

/* the integrations strip (IntegrationStrip): names only, in the template's heading face */
.integrations { text-align: center; }
.integrations-label { font: 700 12px/1.4 var(--lt-head); letter-spacing: .16em; text-transform: uppercase; color: var(--lt-muted); }
.integrations ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 38px; max-width: 900px; margin: 22px auto 0; padding: 0; list-style: none; font: 700 16px/1.4 var(--lt-head); color: #8b9096; }
.integrations svg.icon { display: none; }

/* ---------- 4b. sections rise into view (site.js adds is-visible, then is-done) -------------------------------------- */
@keyframes lt-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js .reveal:not(.is-done), .js .reveal-stagger > :not(.is-done) { opacity: 0; }
.js .reveal.is-visible:not(.is-done) { animation: lt-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.js .reveal-stagger.is-visible > :not(.is-done) { animation: lt-rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.js:not(.js-ready) .reveal:not(.is-done), .js:not(.js-ready) .reveal-stagger > :not(.is-done) { animation: lt-safety .01s linear 3s forwards; }
@keyframes lt-safety { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
    .js .lt-slider .swiper-slide-caption [data-in] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 4c. questions: the template's "corporate" accordion, on <details> ----------------------------------------- */
.lt-faq-item { background: #fff; border-radius: 6px; box-shadow: -1px 0 5px 0 rgba(65, 65, 65, .12); }
.lt-faq-item + .lt-faq-item { margin-top: 22px; }
.lt-faq-item > summary { position: relative; display: block; padding: 22px 92px 21px 30px; font: 700 16px/1.5 var(--lt-head); color: var(--lt-ink); cursor: pointer; list-style: none; border-radius: 6px; }
.lt-faq-item > summary::-webkit-details-marker { display: none; }
.lt-faq-arrow { position: absolute; top: 0; bottom: 0; right: 0; width: 70px; background: var(--lt-accent); border-radius: 0 6px 6px 0; transition: background-color .3s ease; }
.lt-faq-item[open] .lt-faq-arrow { border-radius: 0 6px 0 0; }
.lt-faq-item > summary:hover .lt-faq-arrow { background: var(--lt-accent-hover); }
.lt-faq-arrow::before, .lt-faq-arrow::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--lt-accent-ink); transform: translate(-50%, -50%); transition: opacity .2s ease; }
.lt-faq-arrow::before { width: 14px; height: 2px; }
.lt-faq-arrow::after { width: 2px; height: 14px; }
.lt-faq-item[open] .lt-faq-arrow::after { opacity: 0; }
.lt-faq-body { padding: 4px 44px 26px 30px; }
.lt-faq-body p { font-size: 15.5px; color: var(--lt-text); }
.list-terms-variant-1 dd { color: var(--lt-text); font-size: 15.5px; }
@media (max-width: 767px) { .lt-faq-item > summary { padding: 18px 70px 17px 20px; font-size: 15px; } .lt-faq-arrow { width: 52px; } .lt-faq-body { padding: 2px 20px 22px; } }

/* ---------- 4d. footer ----------------------------------------------------------------------------------------------- */
.lt-footer { background: #111; color: rgba(255, 255, 255, .68); font-size: 14.5px; line-height: 1.6; }
.lt-footer-main { padding-top: 60px; padding-bottom: 54px; }
.lt-footer h2 { margin: 0 0 18px; font: 700 12px/1.4 var(--lt-head); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.lt-footer a { display: inline; color: rgba(255, 255, 255, .68); }
.lt-footer a:hover { color: var(--lt-accent); }
.lt-footer-links { margin: 0; padding: 0; list-style: none; }
.lt-footer-links li + li { margin-top: 7px; }
.lt-footer .brand { display: inline-block; }
.lt-footer .brand img { width: 176px; height: auto; }
.lt-footer-brand p { margin-top: 18px; max-width: 300px; }
.lt-footer .contact-info { display: block; margin: 0; color: inherit; font-style: normal; }
.lt-footer .contact-info + .contact-info { margin-top: 14px; }
.lt-footer .contact-info .icon { color: var(--lt-accent); font-size: 20px; line-height: 1.2; width: 22px; }
.lt-footer .contact-info a { color: #fff; white-space: nowrap; }
.lt-footer-country { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.lt-social { margin: 22px 0 0; }
.lt-social a { display: inline-flex; color: rgba(255, 255, 255, .6); }
.lt-footer-bar { background: #000; color: rgba(255, 255, 255, .75); }
.lt-footer-bar .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 22px; }
.lt-footer-bar .rights { color: rgba(255, 255, 255, .75); font-weight: 400; }
.lt-footer-bar a, .lt-footer-bar .linklike { color: #fff; }
.lt-footer-bar .linklike:hover { color: var(--lt-accent); }
.linklike { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.lt-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }
@media (max-width: 767px) { .lt-footer-bar .shell { justify-content: center; text-align: center; } }

/* ---------- 4e. cookie banner ---------------------------------------------------------------------------------------- */
.cookie-banner { position: fixed; left: 16px; bottom: 16px; z-index: 200; max-width: 430px; padding: 20px 22px; background: #fff; color: var(--lt-text); font-size: 14px; line-height: 1.55; box-shadow: 0 0 22px rgba(0, 0, 0, .22); border-top: 3px solid var(--lt-accent); }
.cookie-banner[hidden] { display: none; }
.cookie-banner a { display: inline; color: var(--lt-blue); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; margin-top: 14px; }
.cookie-banner .btn { min-width: 0; padding: 9px 16px; font-size: 11px; line-height: 1.6; }
.cookie-banner .btn-secondary { color: var(--lt-ink); background: #fff; border-color: var(--lt-ink); }
.cookie-banner .btn-secondary:hover { color: #fff; background: var(--lt-ink); }
@media (max-width: 480px) { .cookie-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; } }

/* small screens */
@media (max-width: 767px) {
    .icon-box { padding: 40px 26px 36px; }
    .btn-xl { white-space: normal; }
}

/* ==========================================================================
   5. The inner pages. Their parts (css/lt-pages.css) keep their layout; this gives them the template's type, buttons,
      ticks and boxes, so they read as one site with the home page.
   ========================================================================== */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/lato-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/lato-900.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/playfair-display-700-italic.woff2") format("woff2"); }

html { font-size: 16px; }      /* the inner pages' sizes are in rem; the template sets 10px and uses px itself */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.container::before, .container::after { display: none; }
.container.narrow, .narrow { max-width: 860px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* headings and text inside the inner pages' sections (the template's bare h1 / h2 are slider sizes) */
.section h1, .page-hero h1, .hero h1, .post h1, .prose h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.section h2, .page-hero h2, .hero h2, .prose h2, .post h2, .cta-band h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.section h3, .page-hero h3, .prose h3, .post h3, .card h3, .mock h3 { font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.section h4, .prose h4, .post h4 { font-size: 16px; line-height: 1.4; }
@media (min-width: 768px) { .section h1, .page-hero h1, .hero h1, .post h1, .prose h1 { font-size: 40px; } .section h2, .page-hero h2, .hero h2, .prose h2, .post h2, .cta-band h2 { font-size: 30px; } }
@media (min-width: 1200px) { .section h1, .page-hero h1, .hero h1, .post h1, .prose h1 { font-size: 44px; } .section h2, .page-hero h2, .hero h2, .prose h2, .post h2, .cta-band h2 { font-size: 33px; } }
.section-header h1, .section-header h2 { margin: 0; }
.section-header .lead, .section-header > p { margin-top: 16px; }
.section-header.is-centered h2::after { content: ""; display: block; width: 49px; height: 2px; margin: 18px auto 0; background: var(--lt-accent); }
.section p, .page-hero p, .prose p, .post p, .card p { margin-top: 0; margin-bottom: 1em; }
.section p:last-child, .card p:last-child { margin-bottom: 0; }
.section ul:not([class]), .prose ul, .post ul, .prose ol, .post ol { margin: 0 0 1em; padding-left: 1.2em; }
.lead { font-size: 17px; line-height: 1.65; }
.eyebrow { font: 700 12px/1.4 var(--lt-head); letter-spacing: .16em; }
.section { padding: 75px 0; }
.section--tight { padding: 50px 0; }
@media (max-width: 767px) { .section { padding: 50px 0; } }
/* the header is no longer laid over the photo, so the banner needs no room for it */
.js main > .hero, .js main > .page-hero, .js main > .post > .page-hero, .page-hero { padding-top: 62px; padding-bottom: 68px; }
.page-hero h1 + p, .page-hero h1 + .lead, .hero h1 + p { margin-top: 18px; }
.post .prose h2 { font-size: 26px; } .post .prose h3 { font-size: 20px; }
.page-hero .hero-ctas, .hero .hero-ctas { margin: 26px 0 0; gap: 14px; }
.breadcrumbs ol { font: 700 11px/1.4 var(--lt-head); letter-spacing: .1em; text-transform: uppercase; }
.page-hero .breadcrumbs a, .page-hero .breadcrumbs li { color: rgba(255, 255, 255, .8); }
main .breadcrumbs a { display: inline; text-decoration: none; }

/* buttons the inner pages use, in the template's shapes */
.hero-ctas .btn, .cta-actions .btn, .btn-row .btn, .footer-cta .btn, .plan .btn, .calc .btn, form .btn, .card .btn, .lp-header-actions .btn { margin-top: 0; }
.btn-secondary { color: var(--lt-ink); background: #fff; border-color: var(--lt-ink); }
.btn-secondary:hover, .btn-secondary:focus { color: #fff; background: var(--lt-ink); border-color: var(--lt-ink); }
.page-hero .btn-secondary, .hero .btn-secondary, .btn-ghost { color: #fff; background: transparent; border-color: #fff; }
.page-hero .btn-secondary:hover, .hero .btn-secondary:hover, .btn-ghost:hover { color: var(--lt-ink); background: #fff; border-color: #fff; }
.btn-lg { min-width: 220px; }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.link-arrow { font: 700 12px/1.4 var(--lt-head); letter-spacing: .08em; text-transform: uppercase; color: var(--lt-ink); }
main a.link-arrow, main p a.link-arrow, main li a.link-arrow { display: inline-flex; color: var(--lt-ink); text-decoration: none; }
main a.link-arrow:hover { color: var(--lt-accent-text); }
.page-hero a.link-arrow, .hero a.link-arrow { color: var(--lt-accent); }

/* boxes: square, with the template's soft shadow; ticks as in the template's marked lists */
.card { border-radius: 5px; border: 0; box-shadow: -1px 2px 5px 0 rgba(65, 65, 65, .12); }
a.card, a.card-link { display: block; color: var(--lt-text); text-decoration: none; }
a.card:hover h3, a.card-link:hover h3 { color: var(--lt-accent-text); }
.icon-tile { border-radius: 0; background: none; border: 0; color: var(--lt-accent-text); width: auto; height: auto; justify-content: flex-start; }
.icon-tile .lt-glyph { font-size: 38px !important; }
.lt-glyph { line-height: 1; vertical-align: middle; }
.checklist li { padding-left: 32px; color: var(--lt-ink); }
.checklist li::before { content: "\e005"; font: 400 13px/1.9 "fl-flat-icons-set-2"; color: var(--lt-accent); background: none; border-radius: 0; width: auto; height: auto; top: 0; }
.page-hero .checklist li, .hero .checklist li { color: rgba(255, 255, 255, .9); }
.grid > .icon-box.lt-module { max-width: none; margin: 0; height: 100%; }
.table-wrap { box-shadow: -1px 2px 5px 0 rgba(65, 65, 65, .12); }
table th { font-family: var(--lt-head); }
.split-visual .lt-shot img { width: 100%; }
@media (min-width: 981px) { .split-visual .lt-shot { margin: 0 -4% 0 0; } .split.is-reversed .split-visual .lt-shot { margin: 0 0 0 -4%; } }
.page-hero .split-visual .lt-shot img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }

/* forms */
form label { font-weight: 700; color: var(--lt-ink); }
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="number"], form select, form textarea { border-radius: 4px; font: inherit; }

/* plans (pricing): the template's pricing tables */
.plan { border-radius: 5px; text-align: center; }
.plan .plan-name { font: 700 18px/1.3 var(--lt-head); letter-spacing: .05em; text-transform: uppercase; color: #535457; }
.plan .plan-price .amount { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-style: italic; color: #000; }
.plan .checklist { text-align: left; }
.plan-badge { border-radius: 0; background: linear-gradient(to right, #54a0d2 0%, #5154b1 12%, #511e7d 21%, #671955 37%, #cc2119 53%, #f57713 65%, #f8df68 83%, #5cf1f5 100%); color: #fff; font: 700 11px/1.4 var(--lt-head); letter-spacing: .05em; text-transform: uppercase; }

/* the landing pages' own small header and footer (LandingLayout) */
.lp-header-actions { display: flex; gap: 8px; margin-left: auto; }
.lp-footer { background: #000; color: rgba(255, 255, 255, .75); font-size: 13.5px; }
.lp-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 22px; }
.lp-footer a, .lp-footer .linklike { color: #fff; display: inline; }
.lp-footer .footer-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }

.card h2 { font-size: 26px; margin: 0 0 16px; }
.page-hero .center { text-align: left; margin-top: 18px; }
.page-hero.is-centered .center { text-align: center; }
@media (max-width: 640px) { .lp-hide-sm { display: none !important; } .lp-header .brand img { width: 140px; } .lp-header .btn { white-space: nowrap; } }
.split-copy > .section-header + p, .section h2 + p, .section h3 + p { margin-top: 14px; }
.page-hero .hero-ctas + *, .hero .hero-ctas + * { margin-top: 20px; }
/* icon above a card's title: one height, one gap, whichever icon it is */
.card > .icon-tile, .icon-tile { display: inline-flex; align-items: center; min-height: 42px; margin-bottom: 12px; }
.card > .icon-tile + h3 { margin-top: 0; }
.site-header .nav-signin .lt-glyph { font-size: 18px !important; }
/* a release note is one row: icon, words, arrow */
main a.release.card { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.release .icon-tile { margin: 0; flex: none; width: 44px; justify-content: center; }
.release > div { flex: 1; min-width: 0; }
.release h3 { margin: 0 0 4px; }
.release-chev { flex: none; color: var(--lt-accent-text); }
@media (max-width: 600px) { .release-chev { display: none; } main a.release.card { align-items: flex-start; } }