/* Public site (modules/PublicSite) on top of Landkit. Never loaded by the app. */

/* The logo SVG has only a viewBox: it needs a fixed height (or width) to render at all. */
.navbar-brand-img { height: 1.9rem; max-height: none; width: auto; }
.footer-logo { width: 160px; height: auto; }

/* Product menu: two columns of products and a panel on desktop, a plain list on phones */
/* Landkit gives dropdown items negative side margins (full-bleed rows); in a grid that makes a hover spill into the next column. */
.site-menu .site-menu-item { display: flex; align-items: flex-start; gap: .9rem; margin: .15rem; width: auto; min-width: 0; white-space: normal; padding: .7rem .75rem; border-radius: .5rem; transition: background-color .15s ease; }
.site-menu .site-menu-item + .site-menu-item { margin-top: .15rem; }
.site-menu .site-menu-item:hover, .site-menu .site-menu-item:focus-visible { background: rgba(51, 94, 234, .06); }
.site-menu-name { color: #161c2d; transition: color .15s ease; }
.site-menu-item:hover .site-menu-name, .site-menu-item:focus-visible .site-menu-name { color: #335eea; }
.site-menu-icon { flex: 0 0 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; background: rgba(51, 94, 234, .1); color: #335eea; font-size: 1.05rem; transition: background-color .15s ease, color .15s ease; }
.site-menu-item:hover .site-menu-icon, .site-menu-item:focus-visible .site-menu-icon { background: #335eea; color: #fff; }
.site-menu .dropdown-body { padding: 1.5rem 1.25rem !important; }
.navbar-nav .site-menu-panel { background: linear-gradient(135deg, #335eea, #6c8aec); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; align-items: flex-start; text-align: left; }
.site-menu-compact .dropdown-body { padding: .75rem !important; }
@media (min-width: 992px) {
    /* One line per menu item: a wrapped "Log in" or "Start free trial" makes the bar uneven. */
    .navbar-nav .nav-link, .navbar-btn { white-space: nowrap; }
    .navbar-btn { flex-shrink: 0; }
    /* Centred under the navbar's container instead of under "Product", so a wide menu never runs off the screen. */
    .navbar > .container { position: relative; }
    .navbar-nav .dropdown.site-menu-parent, .navbar-expand-lg .navbar-collapse { position: static; }
    .navbar-nav .dropdown.site-menu-parent > .site-menu { width: 52rem; max-width: 100%; left: 0; right: 0; margin: 0 auto; transform: translateY(10px); }
    .navbar-nav .dropdown.site-menu-parent > .site-menu.show { transform: none; }
}
@media (max-width: 991.98px) {
    .site-menu .dropdown-body { padding: 0 !important; }
    .navbar-collapse .site-menu .site-menu-item { margin: 0; padding: .6rem .5rem; }
}

/* Product mock-ups with example data */
.mock { border: 1px solid #f1f4f8; text-align: left; }
.mock-table { font-size: .875rem; }
.mock-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #869ab8; font-weight: 600; border-top: 0; }
.mock-table td { vertical-align: middle; }
.mock-progress { height: .5rem; background: #f1f4f8; }
.mock-tile { background: #f9fbfd; border-radius: .5rem; padding: .6rem .25rem; }
.mock-row { padding: .75rem 0; border-bottom: 1px solid #f1f4f8; }
.mock-row:last-of-type { border-bottom: 0; }
.mock-conclusion { background: rgba(51, 94, 234, .07); border-radius: .5rem; padding: .75rem 1rem; }
.mock-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; }
.mock-spark i { display: block; width: 4px; background: #335eea; border-radius: 1px; opacity: .75; }
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.mock-bars i { display: block; flex: 1; background: linear-gradient(#335eea, #6c8aec); border-radius: 3px 3px 0 0; }

.mock-serp { display: flex; flex-direction: column; gap: 6px; }
.mock-serp-block { display: flex; align-items: center; justify-content: center; background: #f1f4f8; color: #869ab8; border-radius: .375rem; font-size: .8rem; font-weight: 600; padding: 0 .75rem; }
.mock-serp-you { justify-content: flex-start; height: 44px; background: #fff; color: #161c2d; border: 2px solid #335eea; }
.mock-serp-fold { position: relative; border-top: 2px dashed #df4759; margin: 4px 0; }
.mock-serp-fold span { position: absolute; right: 0; top: -.65rem; background: #fff; color: #df4759; font-size: .7rem; font-weight: 700; padding: 0 .3rem; }

/* Trial facts under a call to action */
.trial-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: inherit; }
.trial-facts li::before { content: "\2713"; color: #42ba96; margin-right: .4rem; font-weight: 700; }

/* Legal pages */
.legal h2 { font-size: 1.25rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.legal p, .legal li { color: #506690; }

.plan-table th, .plan-table td { white-space: nowrap; vertical-align: middle; }

/* SEO guides: cards, the article text, its table of contents */
.guide-card-img { height: 170px; background-size: cover; background-position: center; border-radius: var(--bs-border-radius-lg, .5rem) var(--bs-border-radius-lg, .5rem) 0 0; }
.guide-card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guide-topic { font-size: .8rem; font-weight: 600; padding: .45rem .8rem; text-decoration: none; }
.guide-body { font-size: 1.0625rem; line-height: 1.75; color: #384c74; }
.guide-body h2 { font-size: 1.6rem; font-weight: 700; color: #161c2d; margin: 2.75rem 0 1rem; scroll-margin-top: 1.5rem; }
.guide-body h3 { font-size: 1.25rem; font-weight: 700; color: #161c2d; margin: 2rem 0 .75rem; scroll-margin-top: 1.5rem; }
.guide-body h4 { font-size: 1.05rem; font-weight: 700; color: #161c2d; margin: 1.5rem 0 .5rem; }
.guide-body > :first-child { margin-top: 0; }
.guide-body p, .guide-body ul, .guide-body ol { margin-bottom: 1.25rem; }
.guide-body li { margin-bottom: .4rem; }
.guide-body li > ul, .guide-body li > ol { margin: .4rem 0 0; }
.guide-body a { text-decoration: underline; text-underline-offset: 2px; }
.guide-body table { font-size: .9375rem; }
.guide-body figure img { display: block; margin: 0 auto; }
.guide-body blockquote { border-left: 3px solid #335eea; padding-left: 1.25rem; color: #506690; }
.site-pre { background: #1b2a4e; color: #e3ebf6; border-radius: .5rem; padding: 1.25rem; font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.guide-toc li { margin-bottom: .5rem; line-height: 1.4; }
.guide-toc a { color: #506690; font-size: .9375rem; }
.guide-toc a:hover { color: #335eea; }
@media (min-width: 992px) { .guide-aside { position: sticky; top: 1.5rem; } }

/* Pages of the previous site: captions under screenshots, device frames, logos */
.site-caption { max-width: 28rem; }
.site-shot { width: 100%; }
.site-device-single { max-width: 18rem; margin: 0 auto; }
.site-recommended-img { height: 160px; border-radius: var(--bs-border-radius-lg, .5rem) var(--bs-border-radius-lg, .5rem) 0 0; overflow: hidden; }
.site-recommended-img img { max-width: 100%; max-height: 100%; object-fit: cover; }
.site-testimonial-logo { max-width: 260px; }
.site-client-logo { max-height: 48px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .15s ease, opacity .15s ease; }
.site-client-logo:hover { filter: none; opacity: 1; }

/* SERP index: chart cards and stat tiles, in the style of the app's dashboards */
.si-card .card-body { padding: 1.75rem; }
.si-chart { position: relative; height: 280px; }
.si-empty { padding: 2.5rem 0 1rem; }
.si-table { font-size: .875rem; font-variant-numeric: tabular-nums; }
.si-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #869ab8; font-weight: 600; border-top: 0; }
.si-table td { vertical-align: middle; white-space: nowrap; }
.si-swatch { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .5rem; }
.si-stat { background: #fff; border: 1px solid #f1f4f8; border-radius: .75rem; padding: 1.25rem 1.5rem; height: 100%; text-align: center; }
.si-stat-value { font-size: 1.5rem; font-weight: 700; color: #161c2d; line-height: 1.25; }
.si-icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: .75rem; background: rgba(51, 94, 234, .1); color: #335eea; font-size: 1.4rem; margin-right: .9rem; vertical-align: middle; }