/* Servaro website. Plain CSS, no framework. Colours from the Route-S brand. */

:host {
    --navy: #17325f;
    --navy-deep: #0f1f3d;
    --navy-line: #2b4a7e;
    --accent: #1f5fe0;
    --accent-dark: #174bb8;
    --accent-light: #5b8dff;
    --accent-soft: #e3ecfd;
    --on-navy: #dbe4f5;
    --on-navy-quiet: #b3c2de;
    --on-navy-accent: #9dbbff;
    --ink: #1a2333;
    --quiet: #4f5c72;
    --bg: #ffffff;
    --tint: #eef2f8;
    --line: #dde3ee;
    --good: #0b6b45;
    --good-soft: #dcf5ea;
    --amber: #c77a06;
    --teal: #0f8f8a;
    --violet: #7445d6;
    --green: #12a066;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgb(16 30 60 / 5%), 0 6px 20px rgb(16 30 60 / 7%);
    --shadow-lg: 0 18px 50px rgb(5 14 34 / 35%), 0 2px 8px rgb(5 14 34 / 20%);
    --font:
        'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
        sans-serif;
    --container: 1160px;

    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:host {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
    :host {
        scroll-behavior: auto;
    }
}

:host {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 800;
}

h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

p {
    margin: 0;
}

a {
    color: var(--accent);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--accent-dark);
}

:focus-visible {
    outline: 3px solid var(--accent-light);
    outline-offset: 3px;
    border-radius: 4px;
}

ul {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 780px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--navy);
    color: #fff;
    font-weight: 600;
}

.skip-link:focus {
    top: 12px;
    color: #fff;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.15s,
        border-color 0.15s,
        color 0.15s;
}

.btn-lg {
    min-height: 52px;
    padding: 13px 24px;
    font-size: 1.05rem;
}

.btn-block {
    width: 100%;
    white-space: normal;
    text-align: center;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-dark);
    color: #fff;
}

.btn-outline {
    border-color: var(--line);
    background: #fff;
    color: var(--navy);
}

.btn-outline:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.btn-outline-light {
    border-color: rgb(255 255 255 / 40%);
    color: #fff;
}

.btn-outline-light:hover {
    border-color: #fff;
    color: #fff;
}

.btn-ghost {
    color: var(--navy);
}

.btn-ghost:hover {
    background: var(--tint);
    color: var(--navy);
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 96%);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.brand {
    flex: none;
}

.brand img {
    width: 150px;
    height: auto;
}

.main-nav {
    margin-left: auto;
}

.main-nav ul {
    list-style: none;
}

.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Top-level links and the summary of a group look the same. */
.main-nav > ul > li > a,
.nav-toggle > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.nav-toggle > summary {
    list-style: none;
}

.nav-toggle > summary::-webkit-details-marker {
    display: none;
}

.main-nav > ul > li > a:hover,
.nav-group:hover > .nav-toggle > summary,
.nav-toggle[open] > summary {
    background: var(--tint);
    color: var(--navy);
}

/* Chevron: points down, up while the submenu is open. */
.nav-chevron {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.nav-toggle[open] .nav-chevron {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/* Submenu panel. It opens on hover, when its details element is open (click
   or keyboard), and stays open while focus is inside it. The padding on top
   bridges the gap to the summary, so hover is not lost on the way down. */
.nav-group {
    position: relative;
}

.nav-panel {
    position: absolute;
    top: 100%;
    left: -8px;
    z-index: 70;
    display: none;
    padding-top: 8px;
}

.nav-group:hover > .nav-panel,
.nav-toggle[open] + .nav-panel,
.nav-panel:focus-within {
    display: block;
}

/* Hovering another group hides the one opened by click. menu.js closes it
   too; this is the same without a script. Escape (menu.js) hides a panel
   that is open on hover until the pointer leaves it. */
.main-nav > ul:has(> .nav-group:hover) > .nav-group:not(:hover) > .nav-panel,
.nav-group.is-dismissed > .nav-panel {
    display: none;
}

.nav-panel > ul {
    display: grid;
    gap: 2px;
    width: 300px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

/* A long submenu (the product menu) gets two columns. */
.nav-panel-wide > ul {
    grid-template-columns: repeat(2, 1fr);
    width: 580px;
}

.nav-panel a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
}

.nav-panel a:hover {
    background: var(--tint);
}

.nav-item-label {
    display: block;
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 700;
}

.nav-item-desc {
    display: block;
    margin-top: 2px;
    color: var(--quiet);
    font-size: 0.8rem;
    line-height: 1.35;
}

.header-actions {
    display: flex;
    gap: 8px;
}

.mobile-menu {
    display: none;
}

@media (max-width: 1100px) {
    :host {
        scroll-padding-top: 0;
    }

    /* Not sticky on small screens: an open menu then scrolls away with the
       top of the page after a menu link is followed. */
    .site-header {
        position: relative;
    }

    .main-nav {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu {
        display: block;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 12px;
        border: 2px solid var(--line);
        border-radius: var(--radius-sm);
        color: var(--navy);
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }

    .menu-toggle::-webkit-details-marker {
        display: none;
    }

    /* Three bars; a cross while the menu is open. */
    .menu-icon,
    .menu-icon::before,
    .menu-icon::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 1px;
        background: currentcolor;
    }

    .menu-icon {
        position: relative;
    }

    .menu-icon::before,
    .menu-icon::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .menu-icon::before {
        top: -6px;
    }

    .menu-icon::after {
        top: 6px;
    }

    .mobile-menu[open] .menu-icon {
        background: transparent;
    }

    .mobile-menu[open] .menu-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .mobile-menu[open] .menu-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .mobile-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 60;
        padding: 8px 16px 16px;
        border-bottom: 1px solid var(--line);
        background: #fff;
        box-shadow: var(--shadow);
    }

    .mobile-nav ul {
        list-style: none;
    }

    .mobile-nav a {
        display: block;
        min-height: 44px;
        padding: 12px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-nav > ul > li:last-child > a {
        border-bottom: 0;
    }

    /* Groups in the mobile menu: a summary that folds its links open. */
    .mobile-group summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: 12px 8px;
        border-bottom: 1px solid var(--line);
        color: var(--ink);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .mobile-group summary::-webkit-details-marker {
        display: none;
    }

    .mobile-group summary[aria-current='true'] {
        color: var(--accent);
    }

    .mobile-group details[open] .nav-chevron {
        margin-top: 3px;
        transform: rotate(-135deg);
    }

    .mobile-group ul {
        padding: 4px 0 8px 16px;
        border-bottom: 1px solid var(--line);
    }

    .mobile-group a {
        padding: 10px 8px;
        border-bottom: 0;
        font-size: 0.9rem;
        font-weight: 500;
    }
}

@media (max-width: 560px) {
    .header-actions .btn-ghost {
        display: none;
    }
}

/* The demo link is in the menu on small screens. */
@media (max-width: 760px) {
    .header-actions .header-demo {
        display: none;
    }
}

@media (max-width: 420px) {
    .container {
        padding: 0 16px;
    }

    .header-inner {
        gap: 12px;
    }

    .brand img {
        width: 120px;
    }

    .header-actions .btn,
    .menu-toggle {
        padding: 8px 12px;
    }
}

/* Sections */

.section {
    padding: clamp(64px, 9vw, 112px) 0;
}

.section-tint {
    background: var(--tint);
}

.section-navy {
    background: var(--navy);
    color: var(--on-navy);
}

.section-navy h2 {
    color: #fff;
}

.section-head {
    max-width: 720px;
    margin-bottom: 48px;
}

.section-head-center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.eyebrow {
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow-light {
    color: var(--on-navy-accent);
}

.section-lead {
    margin-top: 16px;
    color: var(--quiet);
    font-size: 1.1rem;
}

.section-navy .section-lead {
    color: var(--on-navy);
}

.split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.split-reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

@media (max-width: 860px) {
    .split,
    .split-reverse {
        grid-template-columns: 1fr;
    }

    .split-reverse > :first-child {
        order: 2;
    }
}

/* Hero */

.hero {
    overflow: hidden;
    padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px);
    background:
        radial-gradient(
            ellipse 70% 60% at 85% 20%,
            rgb(91 141 255 / 28%),
            transparent 70%
        ),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--on-navy);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
}

.hero h1 {
    color: #fff;
    hyphens: manual;
}

.lead {
    max-width: 600px;
    margin-top: 20px;
    color: var(--on-navy);
    font-size: 1.15rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero-actions-center {
    justify-content: center;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 28px;
    color: var(--on-navy-quiet);
    font-size: 0.95rem;
    list-style: none;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-points li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-light);
}

@media (max-width: 960px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-actions .btn {
        width: 100%;
    }
}

/* Hero mock-up (decorative) */

.hero-visual {
    position: relative;
    padding-bottom: 56px;
}

.mock-board {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-lg);
    color: var(--ink);
}

.mock-board-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    font-weight: 700;
}

.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-light);
}

.mock-rows {
    display: grid;
    gap: 10px;
    padding: 16px 18px 20px;
}

.mock-row {
    display: grid;
    grid-template-columns: 64px repeat(6, 1fr);
    gap: 6px;
    align-items: center;
    font-size: 0.8rem;
}

.mock-name {
    color: var(--quiet);
    font-weight: 600;
}

.mock-job {
    overflow: hidden;
    padding: 7px 9px;
    border-left: 3px solid;
    border-radius: 6px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-w1 {
    grid-column: span 1;
}

.job-w2 {
    grid-column: span 2;
}

.job-w3 {
    grid-column: span 3;
}

.job-w4 {
    grid-column: span 4;
}

.job-blue {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.job-green {
    border-color: var(--green);
    background: var(--good-soft);
}

.job-amber {
    border-color: var(--amber);
    background: #fdf0d8;
}

.job-teal {
    border-color: var(--teal);
    background: #dcf3f2;
}

.job-violet {
    border-color: var(--violet);
    background: #efe8fd;
}

.mock-card {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: min(290px, 78%);
    padding: 16px 18px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-lg);
    color: var(--ink);
}

.mock-card-label {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mock-card-title {
    margin-top: 4px;
    font-weight: 700;
    line-height: 1.3;
}

.mock-card-meta {
    margin-top: 2px;
    color: var(--quiet);
    font-size: 0.85rem;
}

.mock-progress {
    overflow: hidden;
    height: 8px;
    margin-top: 12px;
    border-radius: 4px;
    background: var(--tint);
}

.mock-progress span {
    display: block;
    width: 75%;
    height: 100%;
    border-radius: 4px;
    background: var(--green);
}

/* Lists, tables and tiles inside a mock-up window (mock-*.html) */

.mock-title {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Room at the bottom for the card that overlaps it (mock-card). */
.mock-board-card {
    padding-bottom: 64px;
}

.mock-head-chip {
    margin-left: auto;
}

.mock-list {
    display: grid;
    gap: 2px;
    padding: 10px 18px 18px;
    font-size: 0.82rem;
}

.mock-sub {
    padding: 4px 0 6px;
    color: var(--quiet);
    font-weight: 600;
}

.mock-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5em auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.mock-line:last-child {
    border-bottom: 0;
}

.mock-line-2 {
    grid-template-columns: minmax(0, 1fr) auto;
}

.mock-line-log {
    grid-template-columns: 3.2em minmax(0, 1fr) auto;
}

.mock-line-log-2 {
    grid-template-columns: 3.2em minmax(0, 1fr);
}

.mock-line-head {
    padding: 4px 0;
    color: var(--quiet);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mock-line-main {
    display: grid;
    min-width: 0;
}

.mock-line-main strong,
.mock-line-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-line-main small,
.mock-date {
    color: var(--quiet);
    font-size: 0.75rem;
}

.mock-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.mock-chip {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.chip-green {
    background: var(--good-soft);
    color: var(--good);
}

.chip-amber {
    background: #fdf0d8;
    color: #8a5300;
}

.chip-red {
    background: #fde4e4;
    color: #a12020;
}

.chip-blue {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.chip-teal {
    background: #dcf3f2;
    color: #0b6663;
}

.chip-violet {
    background: #efe8fd;
    color: #5a32b0;
}

/* Totals of an invoice and key-value facts: two columns. */
.mock-totals,
.mock-facts {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 12px;
    justify-content: space-between;
}

.mock-totals {
    padding-top: 10px;
}

.mock-totals > :nth-last-child(-n + 2) {
    padding-top: 6px;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
}

.mock-facts {
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--tint);
}

.mock-facts > span {
    color: var(--quiet);
}

.mock-facts > strong {
    text-align: right;
}

/* Customer timeline */
.mock-timeline {
    display: grid;
    gap: 14px;
    padding: 16px 18px 20px;
    font-size: 0.82rem;
    list-style: none;
}

.mock-timeline li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.mock-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
}

.icon-phone {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.icon-mail {
    background: #efe8fd;
    color: #5a32b0;
}

.icon-sms {
    background: #dcf3f2;
    color: #0b6663;
}

.icon-done {
    background: var(--good-soft);
    color: var(--good);
}

/* Dashboard tiles and a bar chart */
.mock-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 18px 6px;
}

.mock-kpi {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.mock-kpi small {
    color: var(--quiet);
    font-size: 0.75rem;
    font-weight: 600;
}

.mock-kpi strong {
    color: var(--navy);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.mock-kpi span {
    color: var(--quiet);
}

.mock-kpi .kpi-up {
    color: var(--good);
    font-weight: 700;
}

.mock-kpi .kpi-warn {
    color: #8a5300;
    font-weight: 700;
}

.mock-bars {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 84px;
    padding: 10px 18px 18px;
}

.mock-bars span {
    flex: 1;
    height: 40%;
    border-radius: 4px 4px 0 0;
    background: var(--accent-soft);
}

.mock-bars span:nth-child(2) {
    height: 55%;
}

.mock-bars span:nth-child(3) {
    height: 48%;
}

.mock-bars span:nth-child(4) {
    height: 62%;
}

.mock-bars span:nth-child(5) {
    height: 58%;
}

.mock-bars span:nth-child(6) {
    height: 70%;
}

.mock-bars span:nth-child(7) {
    height: 66%;
}

.mock-bars span:nth-child(8) {
    height: 78%;
}

.mock-bars span:nth-child(9) {
    height: 84%;
}

.mock-bars span:nth-child(10) {
    height: 100%;
    background: var(--accent);
}

@media (max-width: 960px) {
    .hero-visual {
        max-width: 560px;
    }

    .mock-card {
        right: 0;
    }
}

/* Features */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
}

.feature {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.feature .icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    padding: 10px;
    border-radius: 11px;
    background: var(--accent-soft);
    fill: none;
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.feature p {
    margin-top: 8px;
    color: var(--quiet);
    font-size: 0.97rem;
}

@media (max-width: 1040px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Inspections and QR */

.norm-list {
    display: grid;
    gap: 10px;
    margin-top: 28px;
    list-style: none;
}

.norm-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.norm-list span {
    color: var(--quiet);
    font-weight: 600;
}

.qr-visual {
    display: flex;
    justify-content: center;
}

.qr-label {
    width: min(320px, 100%);
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}

.qr-label-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 800;
}

.qr-code {
    width: 180px;
    height: 180px;
    margin: 20px auto 16px;
    fill: var(--navy);
}

.qr-id {
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.qr-meta {
    color: var(--quiet);
    font-size: 0.95rem;
}

.qr-status {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--good-soft);
    color: var(--good);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Technician app */

.phone-visual {
    display: flex;
    justify-content: center;
}

.phone {
    width: min(300px, 100%);
    padding: 12px;
    border-radius: 40px;
    background: var(--navy-deep);
    box-shadow: var(--shadow-lg);
}

.phone-screen {
    display: grid;
    gap: 10px;
    min-height: 460px;
    padding: 28px 16px 20px;
    border-radius: 30px;
    background: var(--tint);
    align-content: start;
}

.phone-head {
    margin-bottom: 4px;
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 800;
}

.phone-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.4;
}

.phone-item-active {
    outline: 2px solid var(--accent);
}

.phone-time {
    color: var(--accent);
    font-weight: 700;
}

.phone-offline {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--navy);
    font-size: 0.8rem;
    font-weight: 600;
}

.check-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 32px;
}

.check-list li::before,
.check-list li::after {
    content: '';
    position: absolute;
}

.check-list li::before {
    top: 3px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
}

/* The tick: two borders of a small rotated box. */
.check-list li::after {
    top: 8px;
    left: 8px;
    width: 6px;
    height: 10px;
    border: solid var(--accent);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.check-list-light li::before {
    background: rgb(255 255 255 / 14%);
}

.check-list-light li::after {
    border-color: #fff;
}

.check-list-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 24px;
}

@media (max-width: 860px) {
    .check-list-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .check-list-columns {
        grid-template-columns: 1fr;
    }
}

/* Panel card: a white card, also used on navy sections */

.panel-card {
    padding: clamp(24px, 4vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--ink);
}

.section-navy .panel-card {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.panel-card h2,
.panel-card h3 {
    color: var(--navy);
    font-size: 1.35rem;
    font-weight: 800;
}

.panel-card > p {
    margin: 12px 0 20px;
    color: var(--quiet);
}

.panel-card > p:last-child {
    margin-bottom: 0;
}

.panel-card .check-list {
    margin-top: 20px;
}

.mini-prices {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    list-style: none;
}

.mini-prices li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.mini-prices strong {
    color: var(--navy);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

/* Pricing */

.price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
}

.price-card {
    padding: 32px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    text-align: center;
}

.price-card h2 {
    color: var(--navy);
    font-size: 1.3rem;
    font-weight: 800;
}

.price {
    margin-top: 16px;
}

.price-amount {
    color: var(--ink);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.price-unit {
    color: var(--quiet);
}

.price-users {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--navy);
    font-weight: 700;
}

.price-includes {
    margin-top: 32px;
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--radius);
    background: var(--tint);
}

.price-includes .check-list {
    margin-top: 20px;
}

.price-includes h2 {
    font-size: 1.3rem;
}

.price-amount-text {
    font-size: 1.9rem;
    line-height: 1.45;
}

.price-for {
    margin-top: 14px;
    color: var(--quiet);
    font-size: 0.95rem;
}

@media (max-width: 1040px) {
    .price-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .price-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ */

.faq {
    display: grid;
    gap: 12px;
}

.faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    flex: none;
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}

.faq details[open] summary::after {
    content: '\2212';
}

.faq details p {
    padding: 0 20px 20px;
    color: var(--quiet);
}

/* Closing call to action */

.cta {
    border-top: 1px solid var(--line);
    background: var(--tint);
}

.cta-inner {
    max-width: 760px;
    text-align: center;
}

.cta p {
    margin-top: 16px;
    color: var(--quiet);
    font-size: 1.1rem;
}

/* Text pages */

.prose h1 {
    margin-bottom: 20px;
}

.prose h2 {
    margin: 36px 0 12px;
    font-size: 1.4rem;
}

.prose p + p {
    margin-top: 16px;
}

.prose .btn {
    margin: 8px 8px 0 0;
}

/* Legal pages: terms, data processing agreement, sub-processors */

/* Long Dutch compounds (gegevensbeschermingseffectbeoordeling) wrap. */
.legal {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* "Verwerkersovereenkomst" fits on one line at 375 px. */
.legal h1 {
    font-size: clamp(1.5rem, 6.2vw, 3.4rem);
}

.legal h3 {
    margin: 28px 0 10px;
    color: var(--navy);
}

.legal p + p,
.legal ul + p,
.legal ol + p {
    margin-top: 12px;
}

.legal ul,
.legal ol {
    margin: 12px 0;
    padding-left: 1.4em;
}

.legal li + li {
    margin-top: 6px;
}

.legal hr {
    margin: 40px 0 20px;
    border: 0;
    border-top: 1px solid var(--line);
}

.legal-meta {
    color: var(--quiet);
}

.legal .table-card {
    margin: 16px 0;
}

/* A long table scrolls inside its own box, never the page. */
.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.legal-table {
    font-size: 0.95rem;
}

.table-card .legal-table td {
    font-weight: 400;
    vertical-align: top;
}

.legal-table th:first-child,
.legal-table td:first-child {
    min-width: 9em;
}

.legal-table-wide {
    min-width: 680px;
}

/* Footer */

.site-footer {
    padding: 64px 0 32px;
    background: var(--navy-deep);
    color: var(--on-navy-quiet);
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
}

.footer-brand img {
    width: 190px;
    height: auto;
    margin-bottom: 16px;
}

.footer-title {
    margin-bottom: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
}

.footer-list {
    display: grid;
    gap: 8px;
    list-style: none;
}

.site-footer a {
    color: var(--on-navy);
}

.site-footer a:hover {
    color: #fff;
}

.footer-bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--navy-line);
    font-size: 0.88rem;
}

@media (max-width: 860px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Current page in the menus */

.main-nav > ul > li > a[aria-current='page'],
.nav-toggle > summary[aria-current='true'] {
    background: var(--accent-soft);
    color: var(--navy);
}

.nav-panel a[aria-current='page'] {
    background: var(--accent-soft);
}

.mobile-nav a[aria-current='page'] {
    color: var(--accent);
}

.site-footer a[aria-current='page'] {
    color: #fff;
}

@media (max-width: 560px) {
    .hide-sm {
        display: none;
    }
}

/* Page header for the inner pages */

.page-hero {
    overflow: hidden;
    padding: clamp(48px, 7vw, 88px) 0;
    background:
        radial-gradient(
            ellipse 60% 70% at 90% 0%,
            rgb(91 141 255 / 24%),
            transparent 70%
        ),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: var(--on-navy);
}

.page-hero h1 {
    max-width: 820px;
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 3rem);
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}

@media (max-width: 960px) {
    .page-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* Linked feature cards */

.feature-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1040px) {
    .feature-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .feature-grid-3 {
        grid-template-columns: 1fr;
    }
}

.feature-grid > li {
    display: flex;
}

.feature-grid > li > .feature {
    width: 100%;
}

.feature-grid > .feature {
    display: block;
}

.feature-link {
    display: flex;
    flex-direction: column;
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.feature-link:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    color: var(--ink);
}

.feature-more {
    margin-top: auto;
    padding-top: 16px;
    color: var(--accent);
    font-weight: 700;
}

.feature-more::after {
    content: ' \2192';
}

.tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--navy);
    font-size: 0.85rem;
    font-weight: 700;
}

.feature .tag {
    margin-top: 0;
    color: var(--navy);
}

.section-link {
    margin-top: 24px;
    font-weight: 600;
}

.section-link a::after {
    content: ' \2192';
}

/* Short facts in a grid */

.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    list-style: none;
}

.facts h3 {
    padding-top: 16px;
    border-top: 3px solid var(--accent);
}

.facts p {
    margin-top: 8px;
    color: var(--quiet);
    font-size: 0.97rem;
}

@media (max-width: 960px) {
    .facts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .facts {
        grid-template-columns: 1fr;
    }
}

/* Steps from report to invoice */

.flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flow li {
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.flow-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
}

.flow p {
    margin-top: 8px;
    color: var(--quiet);
    font-size: 0.95rem;
}

@media (max-width: 1040px) {
    .flow {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .flow {
        grid-template-columns: 1fr;
    }
}

/* Work order statuses */

.status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.status-line li {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--navy);
    font-weight: 700;
}

.status-line li:not(:last-child)::after {
    content: ' \2192';
    color: var(--accent);
}

/* All modules overview */

.module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    list-style: none;
}

.module {
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.module h2 {
    color: var(--navy);
    font-size: 1.35rem;
}

.module .check-list {
    margin-top: 20px;
}

@media (max-width: 760px) {
    .module-grid {
        grid-template-columns: 1fr;
    }
}

/* Two ways to invoice */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    list-style: none;
}

.choice-card {
    padding: clamp(24px, 3vw, 36px);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.choice-card:first-child {
    border-color: var(--accent);
}

.choice-card h3 {
    color: var(--navy);
    font-size: 1.3rem;
    font-weight: 800;
}

.choice-card > p {
    margin-top: 12px;
    color: var(--quiet);
}

@media (max-width: 760px) {
    .choice-grid {
        grid-template-columns: 1fr;
    }
}

/* Table (F-gassen) */

.table-card {
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
}

.cookie-table {
    table-layout: fixed;
}

.cookie-table th,
.cookie-table td {
    overflow-wrap: anywhere;
}

.table-card caption {
    margin-bottom: 12px;
    color: var(--navy);
    font-size: 1.1rem;
    font-weight: 800;
    text-align: left;
}

.table-card th,
.table-card td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.table-card th {
    color: var(--quiet);
    font-size: 0.9rem;
}

.table-card td {
    font-weight: 600;
}

.table-note {
    margin-top: 16px;
    color: var(--quiet);
    font-size: 0.92rem;
}

/* Contact and company details */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 960px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-company {
    margin-top: 32px;
    color: var(--quiet);
}

.details-list {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
}

.details-list div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 4px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.details-list dt {
    color: var(--quiet);
    font-weight: 600;
}

.details-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    .details-list div {
        grid-template-columns: 1fr;
    }
}

.footer-company {
    margin-top: 12px;
}

/* Additional features */

.feature-note {
    margin-bottom: clamp(48px, 7vw, 80px);
}

.feature-note p {
    padding: 16px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--quiet);
    font-size: 0.95rem;
}

.feature-note strong {
    color: var(--navy);
}

.section-tint + .feature-note {
    margin-top: clamp(48px, 7vw, 80px);
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 32px;
    list-style: none;
}

.feature-list li {
    position: relative;
    padding-left: 22px;
    color: var(--quiet);
}

.feature-list li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 2px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--accent-light);
    border-radius: 50%;
}

@media (max-width: 560px) {
    .feature-list {
        grid-template-columns: 1fr;
    }
}

/* Work types and branches */

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.pill-list li {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
}

.branch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
}

.branch {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.branch > p {
    margin-top: 8px;
    color: var(--quiet);
    font-size: 0.97rem;
}

.branch > p.branch-tag {
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--navy);
    font-size: 0.85rem;
    font-weight: 700;
}

.branch > p + p.branch-tag {
    margin-top: 16px;
}

.branch-note {
    max-width: 760px;
    margin-top: 32px;
    color: var(--quiet);
}

@media (max-width: 1040px) {
    .branch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .branch-grid {
        grid-template-columns: 1fr;
    }
}

/* Pricing example */

/* As wide as the package cards above it; the text keeps a readable width. */
.example {
    margin-top: 32px;
    padding: clamp(24px, 4vw, 32px);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow);
}

.example h2 {
    font-size: 1.3rem;
}

.example p {
    max-width: 780px;
    margin-top: 10px;
    color: var(--quiet);
}

.price-includes .hero-actions {
    margin-top: 28px;
}

.btn-gap {
    margin-top: 12px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

/* Header with the main menu on narrower desktops */

@media (max-width: 1240px) {
    .header-inner {
        gap: 16px;
    }

    .main-nav > ul > li > a,
    .nav-toggle > summary {
        padding: 8px 10px;
    }

    /* Room for Inloggen, Bekijk de demo and Demo aanvragen. */
    .header-actions {
        gap: 4px;
    }

    .header-actions .btn {
        padding: 10px 12px;
    }
}

/* Request dialogs (partials/aanvraag.html). They open with :target, so they
   work without a script; aanvraag.js only adds focus handling and Escape. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Target of the close links: fixed, so jumping to it never scrolls the page. */
.modal-anchor {
    position: fixed;
    top: 0;
    left: 0;
}

.modal {
    display: none;
}

.modal.is-open {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(10 20 40 / 62%);
}

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: auto 0;
    padding: 28px 32px 24px;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
}

.modal-panel:focus {
    outline: none;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.modal-head h2 {
    padding-top: 6px;
    color: var(--navy);
    font-size: clamp(1.45rem, 3vw, 1.85rem);
}

.modal-close {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin: -4px -12px 0 0;
    border-radius: var(--radius-sm);
    color: var(--navy);
}

.modal-close:hover {
    background: var(--tint);
}

.modal-close::before,
.modal-close::after {
    position: absolute;
    top: 21px;
    left: 12px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: '';
    transform: rotate(45deg);
}

.modal-close::after {
    transform: rotate(-45deg);
}

.modal-intro {
    margin-top: 8px;
    color: var(--quiet);
}

.lead-form {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field label,
.field legend {
    padding: 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.field legend {
    margin-bottom: 6px;
}

.optional {
    color: var(--quiet);
    font-weight: 400;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #b8c3d6;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.field textarea {
    min-height: 96px;
    resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    border-color: var(--accent);
    outline: 3px solid var(--accent-soft);
    outline-offset: 0;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #b8c3d6;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}

.field .choice {
    padding: 8px 16px 8px 12px;
    font-weight: 600;
}

.choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--navy);
}

.choice:has(input:focus-visible) {
    outline: 3px solid var(--accent-light);
    outline-offset: 2px;
}

.field .choice input,
.field-consent input {
    flex: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    accent-color: var(--accent);
}

.field-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
}

.field-consent input {
    margin-top: 3px;
}

.field-consent label {
    cursor: pointer;
}

/* Honeypot: off screen, not hidden with display:none (bots skip those). */
.field-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-form button {
    font-family: inherit;
    cursor: pointer;
}

.lead-form button[aria-busy='true'] {
    cursor: progress;
    opacity: 0.75;
}

.form-note {
    color: var(--quiet);
    font-size: 0.92rem;
    text-align: center;
}

.form-note a {
    display: inline-block;
    padding: 12px 0;
}

@media (max-width: 560px) {
    .modal.is-open {
        padding: 0;
    }

    .modal-panel {
        min-height: 100%;
        margin: 0;
        padding: 16px 16px 24px;
        border-radius: 0;
    }

    .modal-close {
        margin-right: -8px;
    }

    .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 320 px: logo, demo button and menu fit without horizontal scroll. After
   the wide-header rules above, which set the logo width and gap again. */
@media (max-width: 360px) {
    .header-inner {
        gap: 8px;
    }

    .brand img {
        width: 100px;
    }

    .header-actions .btn,
    .menu-toggle {
        padding: 8px 10px;
    }
}