/* === Design tokens (matched to AmpleoCRM landing page) ============= */

:root {
    --lp-blue-dark:  #32516E;
    --lp-blue-mid:   #62809C;
    --lp-blue-light: #7a98b4;
    --lp-blue-pale:  #e8eef4;
    --lp-brown:      #9c7e62;
    --lp-brown-lt:   #b89a7a;
    --lp-brown-pale: #f5efe8;
    --lp-warm:       #f9f8f6;
    --lp-white:      #ffffff;
    --lp-text:       #2a3a4a;
    --lp-muted:      #5a6d7e;
    --lp-light:      #8a97a5;
    --lp-border:     #e0ddd8;
    --lp-success:    #3d8a5e;
}

/* === Reset + base ================================================== */

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--lp-warm);
    color: var(--lp-text);
    font-family: 'Barlow', 'Aptos', 'Segoe UI', system-ui, sans-serif;
    font-weight: 300;
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--lp-blue-dark); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--lp-brown); }

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0 0 0.5em;
    color: var(--lp-text);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5rem; }
li + li { margin-top: 0.25em; }

hr { border: 0; border-top: 1px solid var(--lp-border); margin: 3rem 0; }

/* === Layout containers ============================================= */

/* Sticky footer: wrap header + main + footer in this flex column so the
   footer always sits at the bottom of the viewport on short pages. */
.page-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-wrap > .lp-nav,
.page-wrap > .lp-footer { flex-shrink: 0; }
.page-wrap > main { flex: 1 0 auto; }

.lp-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.lp-container--narrow { max-width: 800px; }
.lp-section { padding: 80px 0; }
.lp-section--tight { padding: 56px 0; }

@media (max-width: 700px) {
    .lp-section { padding: 56px 0; }
}

/* === Navigation =================================================== */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lp-border);
    box-shadow: 0 1px 8px rgba(50,81,110,0.05);
}

.lp-nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 0.5rem;
    border-radius: 8px;
    color: var(--lp-muted);
    transition: background 0.15s, color 0.15s;
}
.lp-nav-search:hover { background: var(--lp-blue-pale); color: var(--lp-blue-dark); }

.lp-search-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: 600px;
}
.lp-search-form input[type="search"] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 1rem;
}
.lp-search-form input[type="search"]::placeholder { color: rgba(255,255,255,0.5); }
.lp-search-form input[type="search"]:focus {
    outline: 2px solid var(--lp-brown-lt);
    outline-offset: 2px;
    background: rgba(255,255,255,0.15);
}
.lp-search-meta { color: var(--lp-muted); margin-bottom: 1.5rem; }

/* Skip link - only visible to keyboard users when it gets focus. */
.lp-skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1000;
    padding: 0.65rem 1rem;
    background: var(--lp-blue-dark);
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: top 0.15s;
}
.lp-skip-link:focus {
    top: 0.75rem;
    color: #fff;
    outline: 2px solid var(--lp-brown-lt);
    outline-offset: 2px;
}
/* The Blazor router's <FocusOnNavigate Selector="h1" /> moves focus to the
   page H1 after every navigation so screen readers know where new content
   begins. Sighted users don't need to see that - and some browsers treat
   the programmatic focus as keyboard-equivalent and trigger :focus-visible,
   so we suppress the ring on h1 specifically. H1 isn't tab-targetable by
   default, so this can't affect keyboard navigation. */
h1:focus,
h1:focus-visible { outline: none; }
#main-content { outline: none; }

.lp-nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.lp-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--lp-blue-dark);
    letter-spacing: -0.5px;
    text-decoration: none;
    flex-shrink: 0;
}
.lp-nav-brand:hover, .lp-nav-brand:visited { color: var(--lp-blue-dark); }
.lp-nav-logo { height: 32px; width: auto; }
.lp-nav-name { line-height: 1; }

@media (max-width: 500px) {
    .lp-nav-name { display: none; }
}
.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lp-nav-link {
    color: var(--lp-muted);
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 400;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}
.lp-nav-link:hover { color: var(--lp-blue-dark); background: var(--lp-blue-pale); }
.lp-nav-cta, .lp-nav-cta:visited {
    background: var(--lp-brown);
    color: #fff;
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}
.lp-nav-cta:hover { background: var(--lp-brown-lt); color: #fff; }

/* Dropdown items in nav */
.lp-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.lp-nav-item > .lp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-nav-chevron {
    transition: transform 0.2s;
    color: var(--lp-light);
}
.lp-nav-item:hover .lp-nav-chevron,
.lp-nav-item:focus-within .lp-nav-chevron { transform: rotate(180deg); color: var(--lp-blue-dark); }

.lp-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(50,81,110,0.12);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 200;
}
.lp-nav-item:hover .lp-nav-dropdown,
.lp-nav-item:focus-within .lp-nav-dropdown,
.lp-nav-item.is-open .lp-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lp-nav-item.is-open .lp-nav-chevron { transform: rotate(180deg); color: var(--lp-blue-dark); }
.lp-nav-dropdown-item {
    display: block;
    padding: 8px 12px;
    font-size: 0.97rem;
    color: var(--lp-text);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.lp-nav-dropdown-item:hover { background: var(--lp-blue-pale); color: var(--lp-blue-dark); }

/* Burger toggle for narrow viewports */
.lp-nav-toggle { display: none; }
.lp-nav-burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    cursor: pointer;
    border-radius: 6px;
    margin-left: auto;
}
.lp-nav-burger span {
    display: block;
    height: 2px;
    background: var(--lp-blue-dark);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 900px) {
    .lp-nav-burger { display: flex; }
    .lp-nav-links {
        order: 99;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px 0;
        border-top: 1px solid var(--lp-border);
        margin-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s;
    }
    .lp-nav-toggle:checked ~ .lp-nav-links { max-height: 80vh; overflow-y: auto; }
    .lp-nav-link { padding: 10px 12px; }
    .lp-nav-item { display: block; }
    .lp-nav-dropdown {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: var(--lp-warm);
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 4px 12px 8px 24px;
        margin-bottom: 8px;
    }
    .lp-nav-cta { margin-left: auto; }
}

/* === Hero ========================================================= */

.lp-hero {
    background: linear-gradient(170deg, #28455e 0%, var(--lp-blue-dark) 40%, var(--lp-blue-mid) 100%);
    color: #fff;
    padding: 90px 0 110px;
    position: relative;
    overflow: hidden;
}
.lp-hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 70%; height: 200%;
    background: radial-gradient(ellipse, rgba(156,126,98,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.lp-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-brown), transparent);
    opacity: 0.3;
}
.lp-hero .lp-container { position: relative; z-index: 1; }
.lp-hero h1 { color: #fff; max-width: 720px; margin-bottom: 20px; }
.lp-hero h1 em { font-style: normal; color: var(--lp-brown-lt); }
.lp-hero-sub {
    color: rgba(255,255,255,0.75);
    max-width: 620px;
    margin: 0 0 36px;
    font-size: 1.18rem;
    line-height: 1.7;
    font-weight: 300;
}
.lp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Inner-page hero - shorter, less dramatic */
.lp-hero--inner { padding: 64px 0 64px; }
.lp-hero--inner h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.lp-hero--inner .lp-hero-sub { font-size: 1.08rem; max-width: 720px; margin-bottom: 0; }

/* Page body layout: text + floated cover image so the user sees the first
   paragraph immediately on desktop while the image sits in the right column.
   On mobile the image stacks between the first paragraph and the rest. */
.page-body { max-width: 1080px; margin: 0 auto; }
.page-body .prose { max-width: none; }
.page-body::after { content: ''; display: block; clear: both; }

/* Subheadings break the float so they always start on a fresh full-width
   row below the image rather than colliding with it half-way down. */
.page-body .prose h2,
.page-body .prose h3 { clear: both; }

.page-body__figure {
    float: right;
    width: 42%;
    max-width: 460px;
    margin: 0.5rem 0 1.5rem 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--lp-blue-pale);
    /* Reserve layout space before the image loads to avoid CLS. */
    aspect-ratio: 3 / 2;
}
.page-body__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 800px) {
    .page-body__figure {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 2rem 0;
    }
}

.lp-overline {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lp-brown-lt);
    margin-bottom: 16px;
}

/* === Buttons ====================================================== */

.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}
/* :visited is included on every button so browsers don't override `color`
   with the default visited-link colour once a user has clicked through. */
.lp-btn-primary, .lp-btn-primary:visited { background: var(--lp-brown); color: #fff; }
.lp-btn-primary:hover { background: var(--lp-brown-lt); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(156,126,98,0.3); }
.lp-btn-ghost, .lp-btn-ghost:visited { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.lp-btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); color: #fff; }
.lp-btn-outline, .lp-btn-outline:visited { background: var(--lp-white); color: var(--lp-text); border: 1px solid var(--lp-border); }
.lp-btn-outline:hover { border-color: var(--lp-brown); color: var(--lp-brown); }
.lp-btn-danger, .lp-btn-danger:visited { background: #fff; color: #b43c3c; border: 1px solid rgba(180, 60, 60, 0.3); }
.lp-btn-danger:hover { background: #b43c3c; color: #fff; border-color: #b43c3c; }

/* Smaller button for admin chrome (header actions, toolbars). */
.lp-btn--sm { padding: 7px 14px; font-size: 0.9rem; border-radius: 6px; }

/* === Section headers ============================================== */

.lp-section-hd { text-align: center; margin-bottom: 48px; }
.lp-section-hd h2 { margin-bottom: 12px; }
.lp-section-hd p { color: var(--lp-muted); font-weight: 300; max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* === Feature grid (cards) ========================================= */

.lp-features { background: var(--lp-white); border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-feat-card {
    background: var(--lp-warm);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lp-feat-card:hover {
    border-color: var(--lp-brown);
    box-shadow: 0 4px 24px rgba(156,126,98,0.1);
    transform: translateY(-2px);
    color: inherit;
}
.lp-feat-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--lp-blue-pale);
}
.lp-feat-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop to the top so portrait shots keep heads in frame. */
    object-position: center top;
}
/* Case cards show the customer logo rather than a photo. Contain it on a
   clean white tile with padding so logos aren't cropped or stretched. */
.lp-feat-card__media--logo { background: #fff; }
.lp-feat-card__media--logo img { object-fit: contain; object-position: center; padding: 28px; }
.lp-feat-card__content {
    padding: 24px 28px 28px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.lp-feat-card__content h3 { margin-bottom: 4px; color: var(--lp-text); }
.lp-feat-card__sub { color: var(--lp-muted); font-size: 0.92rem; margin: 0 0 12px; font-weight: 400; }
.lp-feat-card__content p { color: var(--lp-muted); font-size: 0.97rem; line-height: 1.6; margin: 0; }
.lp-feat-card--link .lp-feat-card__content h3 { color: var(--lp-blue-dark); }
.lp-feat-card--link:hover .lp-feat-card__content h3 { color: var(--lp-brown); }

/* Action links inside the homepage feature cards. The first link in each
   list is the contextual "learn more" (blue, bold). The second one is the
   "Book en snak"-CTA - visually elevated to the brand brown so it reads
   as the primary action without being a full button. */
.lp-feat-card__actions {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    border-top: 1px solid var(--lp-border);
    padding-top: 1rem;
}
.lp-feat-card__actions li { margin-bottom: 0.5rem; }
.lp-feat-card__actions li:last-child { margin-bottom: 0; }
.lp-feat-card__actions a {
    display: inline-block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--lp-blue-dark);
    text-decoration: none;
    transition: color 0.15s, transform 0.15s;
}
.lp-feat-card__actions a:hover {
    color: var(--lp-brown);
    transform: translateX(2px);
}
/* The Book-en-snak CTA is always the last action - give it the brown
   highlight so users can scan it as the primary action without reading. */
.lp-feat-card__actions li:last-child a {
    color: var(--lp-brown);
}
.lp-feat-card__actions li:last-child a:hover {
    color: var(--lp-brown-lt);
}
.lp-feat-card__meta { color: var(--lp-light); font-size: 0.85rem; margin-bottom: 8px; }

/* Employee contact info - small stacked list inside the card content. */
.lp-feat-card__contact {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.95rem;
}
.lp-feat-card__contact a { color: var(--lp-blue-dark); }
.lp-feat-card__contact a:hover { color: var(--lp-brown); }

/* Partner cards - show logos at fixed size with white padding so they look
   consistent regardless of source aspect ratio. */
.lp-partner-card__media {
    aspect-ratio: 16 / 9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.lp-partner-card__media img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center !important;
}
.lp-partner-card__link { margin-top: 1rem !important; }

/* === Video facade ============================================== */
/* Thumbnail + play overlay that opens YouTube in a new tab. Keeps
   the page cookie-free until the user explicitly chooses to watch. */

.lp-video-facade {
    display: block;
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--lp-blue-dark);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.lp-video-facade:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(50, 81, 110, 0.25);
}
.lp-video-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-blue-dark);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s, background 0.2s, color 0.2s;
}
.lp-video-facade:hover .lp-video-facade__play {
    background: var(--lp-brown);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}
.lp-video-facade__play svg {
    /* Nudge play triangle to the optical centre of the circle. */
    margin-left: 4px;
}

@media (max-width: 900px) { .lp-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-feat-grid { grid-template-columns: 1fr; } }

/* === Entry list (articles) ======================================== */

.lp-entries { display: flex; flex-direction: column; }
.lp-entry {
    display: block;
    padding: 28px 0;
    border-bottom: 1px solid var(--lp-border);
    color: var(--lp-text);
    text-decoration: none;
    transition: color 0.2s;
}
.lp-entry:hover { color: inherit; }
.lp-entry:hover h3 { color: var(--lp-brown); }
.lp-entry h3 { margin: 0 0 8px; transition: color 0.2s; color: var(--lp-blue-dark); }
.lp-entry__meta { color: var(--lp-light); font-size: 0.9rem; margin-bottom: 6px; }
.lp-entry__lead { color: var(--lp-muted); margin: 0; }

/* === Prose (rendered markdown) ===================================== */

.prose {
    max-width: 70ch;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--lp-text);
}
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose img { margin: 1.5rem 0; border-radius: 8px; }
/* Exclude buttons: a .lp-btn placed inside prose must keep its own colour.
   `.prose a` (0,1,1) otherwise outranks `.lp-btn-primary` (0,1,0) and paints
   the label brown-on-brown. */
.prose a:not(.lp-btn) { color: var(--lp-brown); text-decoration: underline; text-underline-offset: 2px; }
.prose a:not(.lp-btn):hover { color: var(--lp-brown-lt); }
.prose code {
    background: var(--lp-blue-pale);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre {
    background: var(--lp-blue-dark);
    color: #f7f7ee;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
}
.prose pre code { background: transparent; padding: 0; color: inherit; }
.prose blockquote {
    border-left: 3px solid var(--lp-brown);
    padding-left: 1.25rem;
    color: var(--lp-muted);
    margin: 1.5em 0;
    font-style: italic;
}

/* === Detail header (articles, cases, employees) ==================== */

.lp-detail__back { display: inline-block; color: var(--lp-light); margin-bottom: 1.25rem; font-size: 0.95rem; }
.lp-detail__back:hover { color: var(--lp-brown); }
.lp-detail__meta { color: var(--lp-light); font-size: 0.95rem; margin-bottom: 1rem; }
.lp-detail__cover { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: 12px; margin-bottom: 2rem; }
/* Case detail shows the customer logo: contain it on a white tile of fixed
   height instead of cropping it to the wide cover ratio used for photos. */
.lp-detail__cover--logo { aspect-ratio: auto; height: 200px; object-fit: contain; background: #fff; border: 1px solid var(--lp-border); padding: 32px; }

/* === Tags ========================================================= */

.lp-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.lp-tag {
    display: inline-block;
    background: var(--lp-blue-pale);
    color: var(--lp-blue-dark);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* === Empty state ================================================== */

.lp-empty {
    background: var(--lp-white);
    border: 1px dashed var(--lp-border);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--lp-muted);
}

/* === Forms ======================================================== */

.lp-form { max-width: 640px; }
.lp-field { margin-bottom: 1.25rem; }
.lp-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--lp-text);
}
.lp-field input,
.lp-field textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    background: var(--lp-white);
    color: var(--lp-text);
    font: inherit;
}
.lp-field input:focus,
.lp-field textarea:focus {
    outline: 2px solid var(--lp-brown);
    outline-offset: -1px;
    border-color: var(--lp-brown);
}
.lp-field textarea { min-height: 9rem; resize: vertical; }
.lp-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.validation-message,
.lp-form__error {
    color: #b43c3c;
    font-size: 0.9rem;
    margin-top: 0.35rem;
    display: block;
}
.lp-form__success {
    background: var(--lp-brown-pale);
    border-left: 3px solid var(--lp-brown);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    color: var(--lp-text);
}

.lp-contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--lp-white);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    margin-bottom: 2rem;
}

/* === Footer ======================================================= */

.lp-footer {
    background: #1e3348;
    color: rgba(255,255,255,0.65);
    padding: 3.5rem 0 1.75rem;
    font-size: 0.95rem;
}
.lp-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.5rem;
}
.lp-footer-col p { margin: 0 0 0.85rem; line-height: 1.55; }
.lp-footer-col ul { list-style: none; padding: 0; margin: 0; }
.lp-footer-col li { margin-bottom: 0.5rem; }
.lp-footer-col a { color: rgba(255,255,255,0.75); transition: color 0.2s; }
.lp-footer-col a:hover { color: var(--lp-brown-lt); }
.lp-footer-col__title {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1rem;
}
.lp-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-footer-social svg { opacity: 0.85; }

.lp-partner-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding: 0.5rem 0.85rem 0.55rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-left: 3px solid #0078d4;
    border-radius: 3px;
    line-height: 1.15;
}
.lp-partner-badge__top {
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}
.lp-partner-badge__bottom {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.lp-footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
}
.lp-footer-bottom a { color: rgba(255,255,255,0.75); transition: color 0.2s; }
.lp-footer-bottom a:hover { color: var(--lp-brown-lt); }

@media (max-width: 720px) {
    .lp-footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}
@media (max-width: 480px) {
    .lp-footer-cols { grid-template-columns: 1fr; }
}

/* === Admin =========================================================
   Admin uses the same tokens but a flatter, info-density layout.
   ================================================================== */

.admin-shell { background: var(--lp-warm); min-height: 100vh; }
.admin-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2.5rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.5rem 24px 4rem;
}
.admin-layout__sidebar h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lp-light);
    margin: 0 0 12px;
}
.admin-layout__sidebar nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1.5rem; }
.admin-layout__sidebar nav a {
    color: var(--lp-text);
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}
.admin-layout__sidebar nav a:hover { background: var(--lp-blue-pale); color: var(--lp-blue-dark); }
.admin-layout__logout button {
    background: transparent;
    color: var(--lp-light);
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.admin-layout__logout button:hover { background: var(--lp-blue-dark); color: #fff; border-color: var(--lp-blue-dark); }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--lp-border);
}
.admin-header h1 { margin: 0; font-size: 1.6rem; }
.admin-header__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.admin-toolbar { margin-bottom: 1.25rem; display: flex; gap: 12px; }
.admin-toolbar__search {
    flex: 0 0 320px;
    max-width: 100%;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    font: inherit;
    background: var(--lp-white);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--lp-white);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}
.admin-table th, .admin-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--lp-border);
    font-size: 0.95rem;
}
.admin-table thead th {
    background: var(--lp-warm);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lp-light);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--lp-blue-pale); }
.admin-table a { color: var(--lp-blue-dark); font-weight: 500; }
.admin-table a:hover { color: var(--lp-brown); }
.admin-table__empty { text-align: center; color: var(--lp-light); padding: 2rem !important; }

.admin-form { max-width: 960px; }

/* The admin form is grouped into cards. The first card holds the small
   fields, the second the markdown editor. Each card has its own white
   surface so the page looks structured rather than a wall of inputs. */
.admin-form__card {
    background: var(--lp-white);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.admin-form__card-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lp-light);
    font-weight: 600;
    margin: 0 0 1rem;
}

.admin-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
}
.admin-form__grid--full { grid-column: 1 / -1; }
.admin-form__actions {
    margin-top: 2rem;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Field - label on top, input below, with focus ring. */
.form__field { display: flex; flex-direction: column; }
.form__field label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lp-muted);
    margin-bottom: 0.4rem;
}
.form__field input,
.form__field textarea,
.form__field select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    background: var(--lp-white);
    color: var(--lp-text);
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
    outline: 0;
    border-color: var(--lp-brown);
    box-shadow: 0 0 0 3px rgba(156, 126, 98, 0.18);
}
.form__field textarea { min-height: 5rem; resize: vertical; }

.form__field--checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: var(--lp-text);
    cursor: pointer;
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.form__field--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--lp-brown);
}

@media (max-width: 700px) {
    .admin-form__grid { grid-template-columns: 1fr; }
    .admin-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* === Image upload ================================================== */

.image-upload {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.image-upload__preview {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    background: var(--lp-warm);
    flex-shrink: 0;
}
.image-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.image-upload__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-light);
    font-size: 0.9rem;
}
.image-upload__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.image-upload__btn { cursor: pointer; }
.image-upload__btn input[type="file"] { display: none; }

/* === WYSIWYG editor ================================================ */

.wysiwyg {
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    background: var(--lp-white);
    overflow: hidden;
}
.wysiwyg__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    background: var(--lp-warm);
    border-bottom: 1px solid var(--lp-border);
}
.wysiwyg__toolbar button {
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: var(--lp-text);
    font-size: 0.9rem;
    line-height: 1.2;
    min-width: 32px;
}
.wysiwyg__toolbar button:hover {
    background: var(--lp-white);
    border-color: var(--lp-border);
}
.wysiwyg__sep {
    width: 1px;
    height: 20px;
    background: var(--lp-border);
    margin: 0 6px;
}
.wysiwyg__upload {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--lp-text);
    border: 1px solid transparent;
}
.wysiwyg__upload:hover {
    background: var(--lp-white);
    border-color: var(--lp-border);
}
.wysiwyg__upload input { display: none; }
.wysiwyg__status {
    margin-left: 8px;
    font-size: 0.85rem;
    color: var(--lp-light);
}
.wysiwyg__status--error { color: #b43c3c; }

.wysiwyg__content {
    padding: 1.5rem 1.75rem;
    min-height: 22rem;
    outline: none;
    max-width: none;
}
.wysiwyg__content:focus {
    box-shadow: inset 0 0 0 2px rgba(156, 126, 98, 0.18);
}
/* The prose styles already give us nice headings/lists; keep the editor's
   first heading from being pushed down by the prose margin-reset rule. */
.wysiwyg__content > *:first-child { margin-top: 0; }

/* === Markdown editor =============================================== */

.md-editor {
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    background: var(--lp-white);
    overflow: hidden;
}
.md-editor__tabs {
    display: flex;
    align-items: center;
    background: var(--lp-warm);
    border-bottom: 1px solid var(--lp-border);
}
.md-editor__tab {
    background: transparent;
    color: var(--lp-light);
    padding: 0.65rem 1rem;
    border: 0;
    border-right: 1px solid var(--lp-border);
    border-radius: 0;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.md-editor__tab.is-active { background: var(--lp-white); color: var(--lp-text); box-shadow: inset 0 -2px 0 var(--lp-brown); }
.md-editor__tab:hover { background: var(--lp-white); color: var(--lp-text); }
.md-editor__toolbar { margin-left: auto; padding: 0 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.md-editor__upload {
    display: inline-flex; align-items: center; cursor: pointer;
    color: var(--lp-text); font-size: 0.9rem; font-weight: 500;
}
.md-editor__upload input { display: none; }
.md-editor__upload span {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    background: var(--lp-warm);
}
.md-editor__upload span:hover { background: var(--lp-blue-dark); color: #fff; border-color: var(--lp-blue-dark); }
.md-editor__status { font-size: 0.85rem; color: var(--lp-light); }
.md-editor__status--error { color: #b43c3c; }
.md-editor__textarea {
    width: 100%;
    border: 0;
    padding: 1rem;
    font: 0.95rem ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--lp-white);
    color: var(--lp-text);
    resize: vertical;
    min-height: 24rem;
    outline: none;
}
.md-editor__preview { padding: 1.25rem 1.5rem; min-height: 24rem; background: var(--lp-white); }

/* === Validation states ============================================= */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--lp-success); }
.invalid { outline: 1px solid #b43c3c; }

/* === Blazor error UI ============================================== */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #b43c3c;
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 8px;
}
.blazor-error-boundary::after { content: "Der opstod en fejl."; }

/* ── Customer testimonial on case pages ─────────────────────────────── */

.lp-case-quote {
    margin: 2rem 0 2.5rem;
    padding: 1.75rem 2rem 1.5rem;
    background: var(--lp-blue-pale);
    border-left: 4px solid var(--lp-brown);
    border-radius: 0 12px 12px 0;
}
.lp-case-quote blockquote {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--lp-blue-dark);
    font-weight: 300;
    font-style: italic;
}
.lp-case-quote blockquote::before { content: "\201C"; font-size: 1.6em; line-height: 0; color: var(--lp-brown-lt); margin-right: 0.15em; }
.lp-case-quote blockquote::after { content: "\201D"; font-size: 1.6em; line-height: 0; color: var(--lp-brown-lt); margin-left: 0.15em; }
.lp-case-quote figcaption {
    margin-top: 0.85rem;
    color: var(--lp-muted);
    font-size: 0.92rem;
}
.lp-case-quote figcaption strong { color: var(--lp-blue-dark); }

/* ── Employee profile page ──────────────────────────────────────────── */

.lp-employee {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--lp-border);
}
.lp-employee__photo {
    width: 220px;
    height: 280px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--lp-blue-pale);
}
.lp-employee__contact p { margin: 0 0 1rem; }
.lp-employee__contact strong { color: var(--lp-blue-dark); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }

@media (max-width: 600px) {
    .lp-employee { grid-template-columns: 1fr; }
    .lp-employee__photo { width: 100%; height: auto; aspect-ratio: 3 / 4; }
}

.lp-feat-card__head-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.lp-feat-card__head-link:hover h3 { color: var(--lp-brown); }

/* ── Article tags ───────────────────────────────────────────────────── */

.lp-article__tags {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lp-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.lp-tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--lp-blue-pale);
    color: var(--lp-blue-dark);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
a.lp-tag:hover { background: var(--lp-brown); color: #fff; }
.lp-tag--active { background: var(--lp-brown); color: #fff; }
a.lp-tag--active:hover { background: var(--lp-brown); color: #fff; }

.lp-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.lp-tag-cloud {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--lp-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.lp-tag-cloud p { margin: 0 0.5rem 0 0; color: var(--lp-muted); font-size: 0.92rem; }

/* ── Customer strip ─────────────────────────────────────────────────── */

.lp-customer-strip {
    background: var(--lp-white);
    border-bottom: 1px solid var(--lp-border);
    padding: 2.25rem 0;
}
.lp-customer-strip__intro {
    text-align: center;
    color: var(--lp-muted);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}
.lp-customer-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
}

.lp-customer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    background: var(--lp-white);
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    color: var(--lp-text);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.1;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lp-customer-pill:hover {
    border-color: var(--lp-brown);
    color: var(--lp-brown);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(50, 81, 110, 0.08);
}
.lp-customer-pill img {
    height: 1.6rem;
    width: 1.6rem;
    object-fit: contain;
    flex-shrink: 0;
}
.lp-customer-pill--text { padding-left: 1.25rem; padding-right: 1.25rem; }

/* ── Testimonial ────────────────────────────────────────────────────── */

.lp-testimonial { background: var(--lp-blue-pale); padding: 4rem 0; }
.lp-quote { margin: 0; text-align: center; }
.lp-quote blockquote {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--lp-blue-dark);
    font-weight: 300;
    quotes: "\201C" "\201D";
    position: relative;
    padding: 0 1.5rem;
}
.lp-quote blockquote::before {
    content: open-quote;
    font-size: 3rem;
    line-height: 1;
    color: var(--lp-brown-lt);
    position: absolute;
    left: -0.3rem;
    top: -0.6rem;
}
.lp-quote blockquote::after { content: close-quote; display: none; }
.lp-quote figcaption {
    margin-top: 1.25rem;
    color: var(--lp-muted);
    font-size: 0.95rem;
}
.lp-quote__case-link {
    display: inline-block;
    margin-left: 0.75rem;
    color: var(--lp-brown);
}

/* ── Cookie consent ─────────────────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--lp-white);
    border-top: 1px solid var(--lp-border);
    box-shadow: 0 -6px 24px rgba(40, 69, 94, 0.12);
    z-index: 1500;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 2rem;
    align-items: center;
}
.cookie-banner__title {
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
    color: var(--lp-blue-dark);
}
.cookie-banner__text p {
    margin: 0;
    color: var(--lp-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}
.cookie-banner__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cookie-banner__actions .lp-btn { min-width: 11rem; justify-content: center; }
.cookie-banner__settings {
    grid-column: 1 / -1;
    color: var(--lp-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    justify-self: end;
}
.cookie-banner__settings:hover { color: var(--lp-blue-dark); }

@media (max-width: 720px) {
    .cookie-banner__inner { grid-template-columns: 1fr; }
    .cookie-banner__actions { justify-content: stretch; }
    .cookie-banner__actions .lp-btn { flex: 1; min-width: 0; }
}

/* Modal */
.cookie-modal {
    position: fixed; inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(40, 69, 94, 0.45);
}
.cookie-modal__panel {
    position: relative;
    background: var(--lp-white);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(40, 69, 94, 0.3);
    max-width: 640px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}
.cookie-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--lp-border);
}
.cookie-modal__header h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--lp-blue-dark);
}
.cookie-modal__close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--lp-light);
    padding: 0.25rem 0.5rem;
}
.cookie-modal__close:hover { color: var(--lp-blue-dark); }
.cookie-modal__body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    color: var(--lp-text);
    font-size: 0.95rem;
}
.cookie-modal__body > p { margin-top: 0; color: var(--lp-muted); }
.cookie-modal__category {
    padding: 0.85rem 0;
    border-top: 1px solid var(--lp-border);
}
.cookie-modal__category:first-of-type { border-top: 0; }
.cookie-modal__category-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}
.cookie-modal__category-head input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--lp-blue-dark);
}
.cookie-modal__category-desc {
    margin: 0.35rem 0 0 1.7rem;
    color: var(--lp-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}
.cookie-modal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lp-border);
}
.cookie-modal__policy-link {
    color: var(--lp-muted);
    font-size: 0.9rem;
    text-decoration: underline;
}
.cookie-modal__policy-link:hover { color: var(--lp-blue-dark); }
body.cookie-modal-open { overflow: hidden; }

/* ── Privacy page tables ─────────────────────────────────────────────── */

.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.75rem;
    font-size: 0.92rem;
}
.privacy-table th,
.privacy-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--lp-border);
    vertical-align: top;
}
.privacy-table th {
    color: var(--lp-blue-dark);
    font-weight: 600;
    background: var(--lp-blue-pale);
}
.privacy-table code {
    background: var(--lp-warm);
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.88em;
}