/* Poppins is the only font on the site (loaded from Google Fonts in each
   page's <head>; the --font-geist-* variables in site.css point to it).
   Many site.css rules still say "monospace" through the font shorthand, so
   the family is forced here. Weights are left to each rule. */

html,
body,
body * {
    font-family: 'Poppins', Arial, sans-serif !important
}

/* Poppins is wider than Geist: keep header menu items on one line and
   tighten them on small laptops so the menu still fits. */
.header .nav a {
    white-space: nowrap
}

@media (width<=1100px) {
    .header .nav a {
        padding-left: 12px;
        padding-right: 12px
    }
}

html {
    scroll-behavior: smooth;
    /* the 100vw nav backdrops include the scrollbar width; clip (not hidden)
       so sticky headers keep working */
    overflow-x: clip
}

button {
    font-family: inherit
}

[role=tab][aria-selected=true] {
    background: var(--brand-orange) !important;
    color: #111 !important
}

.count-up {
    font-variant-numeric: tabular-nums
}

.header,
.section-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    transition: transform .25s ease
}

.header::before,
.section-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background: var(--background);
    transform: translateX(-50%);
    z-index: -1
}

.header.nav-hidden {
    transform: translateY(-100%)
}

/* Section links under the shared header (accessories, dashboards).
   The bar sits under the sticky header and takes its place at the top of
   the screen once the header slides away while scrolling down. On phones
   these links are in the menu instead. */
.section-bar {
    z-index: 39;
    border-bottom: 1px solid var(--border);
    padding: 10px 0
}

/* Jumping to a section must not hide its title under the bar */
html:has(.section-bar) {
    scroll-padding-top: 90px
}

.section-nav {
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    gap: 28px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none
}

.section-nav::-webkit-scrollbar {
    display: none
}

/* Plain tab strip, so it does not look like a second copy of the main nav */
.section-nav a {
    color: var(--muted);
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color .2s, color .2s
}

.section-nav a:hover,
.section-nav a:focus-visible {
    color: var(--brand-orange);
    border-bottom-color: var(--brand-orange)
}

@media (width<=760px) {
    .section-bar {
        display: none
    }

    html:has(.section-bar) {
        scroll-padding-top: 0
    }
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 32px;
    max-width: 760px
}

.faq-item h3 {
    font-size: 19px;
    margin: 0 0 8px
}

.faq-item p {
    color: var(--muted);
    margin: 0;
    line-height: 1.6
}

.svg-brand-light,
html[data-theme=light] .svg-brand-dark {
    display: none
}

[data-theme=light] .svg-brand-light {
    display: block
}

/* Dashboard screenshot frame: holds the real product screenshot for each
   dashboards.html sections. Two images are provided per section (dark/light
   theme) and only the one matching the current theme is shown, same
   swap pattern as .svg-brand-dark/.svg-brand-light above. */
.screen-frame {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
    margin: 10px 0 46px;
    box-shadow: 0 24px 60px -34px #000a
}

.screen-frame img {
    display: none;
    width: 100%;
    height: auto
}

.screen-frame img.dash-shot,
.screen-frame img.dash-shot-dark {
    display: block
}

html[data-theme=light] .screen-frame img.dash-shot-dark {
    display: none
}

html[data-theme=light] .screen-frame img.dash-shot-light {
    display: block
}

/* dashboards.html: all six dashboards on one page, one section each.
   Cards on index.html link to dashboards.html#<slug>. */
.dashboards-page {
    padding-top: 0
}

.dashboard-section {
    padding-bottom: 30px
}

/* Screenshots are capped at 800px and centred in the text column;
   height follows width. */
.dashboards-page .screen-frame {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.dashboards-page .screen-frame img {
    height: auto
}

.dashboard-section+.dashboard-section {
    border-top: 1px solid var(--border)
}

.dashboard-detail .dashboard-title {
    letter-spacing: -2px;
    margin: 15px 0 25px;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.1
}

.detail-caps-title {
    margin: 20px 0;
    font-size: 28px
}

.detail-capabilities h4 {
    font-size: 19px;
    line-height: 1.5
}

.dashboard-section:target .dashboard-title {
    color: var(--brand-orange)
}

/* Card header titles: 16px when the card is wide enough, otherwise scaled
   to the card's own width so the longest title ("ORGANISED AROUND YOUR
   PROJECTS") stays on one line. */
.dashboard-mini {
    container-type: inline-size
}

.dashboard-mini-top>span {
    font-size: clamp(9px, calc(5cqi - 3.5px), 16px)
}


/* Customer / partner logo cards: wrap with a centred last row so any
   number of logos lays out cleanly (no orphan or empty grey cells). */
.customer-showcase .installation-logos,
.customer-showcase .leader-logos {
    --cols: 8;
    --gap: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible
}

.customer-showcase .leader-logos {
    --cols: 7;
    --gap: 12px
}

.customer-showcase .installation-logos>div,
.customer-showcase .leader-logos>div {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    min-width: 0
}

.customer-showcase .leader-logos>div {
    border: 1px solid color-mix(in srgb, var(--border) 50%, var(--card));
    border-radius: 12px;
    transition: background .25s, border-color .25s
}

.customer-showcase .leader-logos>div:hover {
    border-color: var(--brand-orange)
}

@media (width<=1050px) {
    .customer-showcase .installation-logos {
        --cols: 4
    }

    .customer-showcase .leader-logos {
        --cols: 6
    }
}

@media (width<=700px) {
    .customer-showcase .installation-logos {
        --cols: 2;
        --gap: 10px
    }

    .customer-showcase .leader-logos {
        --cols: 3;
        --gap: 8px
    }
}