/* Fake browser frame wrapping usage screenshots (see partials/usage-browser.html) */
.usage-browser {
    background: var(--hd-bg-canvas);
    border: 1px solid var(--hd-border-1);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
}

.usage-browser .browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--hd-bg-subtle);
    border-bottom: 1px solid var(--hd-border-1);
}

.usage-browser .browser-dots {
    display: flex;
    gap: 6px;
}

.usage-browser .browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hd-border-2);
}

.usage-browser .browser-url {
    flex: 1;
    font-family: var(--hd-font-mono, monospace);
    font-size: 11px;
    background: var(--hd-bg-canvas);
    border: 1px solid var(--hd-border-1);
    border-radius: 5px;
    padding: 4px 10px;
    color: var(--hd-fg-3);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.usage-browser .browser-url .lock {
    color: var(--hd-accent-text);
    font-size: 10px;
}

.usage-browser .browser-body {
    display: block;
}

.usage-browser .browser-body img {
    display: block;
    width: 100%;
    height: auto;
}

nav.navbar {
    /* Bootstrap bakes the navbar text to a fixed dark color, so it stays dark
       on the dark background in dark mode. Drive it from the theme-reactive
       --hd-fg-* vars so the text flips light when the background goes dark. */
    --bs-navbar-color: var(--hd-fg-2);
    --bs-navbar-hover-color: var(--hd-fg-1);
    --bs-navbar-active-color: var(--hd-fg-1);
    --bs-navbar-brand-color: var(--hd-fg-1);
    --bs-navbar-brand-hover-color: var(--hd-fg-1);
    color: var(--hd-fg-2);
    background: var(--hd-bg-default);
    box-shadow: 0 0px 3px 0 var(--hd-accent);
    border-bottom: 1px solid var(--hd-accent);
    z-index: 1024;
    transition: background 1s linear;
}
nav.navbar.beginscroll {
    background:
        linear-gradient(
            90deg,
            var(--hd-bg-default) 0%,
            var(--hd-bg-canvas) 100%
        ),
        var(--hd-bg-default);
    box-shadow: none;
    border-bottom: none;
}
nav.navbar.scrolled {
    background: var(--hd-bg-canvas);
    box-shadow: 0 0px 3px 0 var(--hd-accent);
    border-bottom: 1px solid var(--hd-accent);
}

/* ── Page breadcrumb band ──
   Sits directly under the fixed navbar (64px tall) and gives pages a proper
   header strip: a soft brand-tinted band with a clickable trail. */
.hd-breadcrumb {
    position: relative;
    padding-top: calc(64px + 30px);
    padding-bottom: 26px;
    background:
        linear-gradient(
            90deg,
            var(--hd-bg-default) 0%,
            var(--hd-bg-canvas) 100%
        ),
        var(--hd-bg-default);
    border-bottom: 1px solid var(--hd-border-1);
    overflow: hidden;
}

.hd-breadcrumb__trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1;
}

.hd-breadcrumb__trail li {
    display: inline-flex;
    align-items: center;
}

.hd-breadcrumb__trail li + li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin: 0 6px;
    border-right: 1.5px solid var(--hd-border-3);
    border-bottom: 1.5px solid var(--hd-border-3);
    transform: rotate(-45deg);
}

.hd-breadcrumb__trail a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hd-fg-3);
    text-decoration: none;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: var(--hd-radius);
    transition:
        color 0.15s,
        background-color 0.15s;
}

.hd-breadcrumb__trail a:hover {
    color: var(--hd-accent-text);
    background: var(--hd-accent-subtle);
}

.hd-breadcrumb__trail .bi {
    font-size: 0.875rem;
}

.hd-breadcrumb__trail .current {
    color: var(--hd-fg-1);
    font-weight: 600;
    padding: 4px 2px;
}

/* ── Usage / persona breadcrumb band ──
   A segmented control rather than a loose row of links: the personas sit in a
   single inset track, and the one matching the current page is filled in. The
   grouping is what tells the reader these are alternatives they can switch
   between, and the filled pill tells them where they currently are. */
.hd-breadcrumb--usage {
    padding-bottom: 22px;
}

.hd-breadcrumb--usage .hd-breadcrumb__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.hd-breadcrumb__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--hd-fg-2);
    margin: 0;
}

.hd-breadcrumb__lead .bi {
    color: var(--hd-accent-text);
    font-size: 1rem;
}

.hd-breadcrumb__lead .brand {
    font-family: var(--hd-font-brand);
    color: var(--hd-fg-1);
}

.hd-breadcrumb__personas {
    display: inline-flex;
    gap: 4px;
    max-width: 100%;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--hd-bg-inset);
    /* border-1 is the cool hairline: against a sage track on a sage band it is
       both invisible (1 L* apart) and off-temperature. border-2 is the sage
       edge and actually draws the track. */
    border: 1px solid var(--hd-border-2);
    border-radius: var(--hd-radius-full);
    box-shadow: var(--hd-shadow-inset);
}

.hd-breadcrumb__personas a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hd-fg-2);
    text-decoration: none;
    padding: 7px 15px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--hd-radius-full);
    transition:
        color 0.15s,
        border-color 0.15s,
        background-color 0.15s,
        box-shadow 0.15s;
}

.hd-breadcrumb__personas a:hover {
    color: var(--hd-accent-text);
    border-color: var(--hd-border-1);
    background: var(--hd-bg-canvas);
}

.hd-breadcrumb__personas a:focus-visible {
    outline: none;
    box-shadow: var(--hd-shadow-focus);
}

/* Current persona: filled pill, so the page you are on is unmistakable. */
.hd-breadcrumb__personas a.is-active,
.hd-breadcrumb__personas a.is-active:hover {
    color: var(--hd-accent-fg);
    background: var(--hd-accent);
    border-color: transparent;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
}

/* Below the tablet breakpoint the track would overflow, so let it wrap into a
   rounded block instead of scrolling out of sight. */
@media (max-width: 767.98px) {
    .hd-breadcrumb__personas {
        flex-wrap: wrap;
        border-radius: var(--hd-radius-lg);
    }
}

a.card {
    background: var(--hd-bg-subtle);
    transition: transform 250ms;
}
a.card:hover {
    background: var(--hd-bg-inset);
    transform: scale(1.14);
}

.section-title::after {
    content: "";
    width: 120px;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--hd-accent) 0%,
        var(--hd-brand-dark) 100%
    );
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

.link-rounded,
.circle-head {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 1.8em;
    line-height: 1em;
    width: 1.8em;
    background: var(--hd-accent);
    border-radius: 100%;
    color: var(--hd-accent-fg);
    font-size: 1.5rem;
}
.link-rounded:hover {
    background-color: var(--hd-accent-hover);
}
.link-rounded:hover > div {
    color: var(--hd-accent-fg);
}

.anchor {
    margin-top: -60px;
    height: 60px;
}

.text-hilight {
    background-color: yellow;
    color: black !important;
}

#voxppl {
    display: none;
}
#voxppl a {
    position: fixed;
    bottom: 5vh;
    right: 5vw;
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--hd-plum-400) 93%, transparent);
    z-index: 1023;
    max-width: 98%;
}
#voxppl a:hover {
    text-decoration: none;
    background-color: var(--hd-plum-400);
}

img {
    max-width: 100%;
}

/* ── How it works (#discover) ──
   A numbered journey rather than three neutral columns: accent pucks sit on a
   dashed rail that ties the steps together, so the 1-2-3 order reads first. */
#discover .steps-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--hd-border-1);
    border-radius: 12px;
    background: var(--hd-bg-canvas);
    margin: 0;
}

/* The rail: one dashed line crossing the whole surface, level with the pucks
   (28px of column padding + half of the 36px puck). */
#discover .steps-grid::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 46px;
    /* Stops on the third puck's centre instead of running to the edge. */
    right: calc(33.3333% - 46px);
    border-top: 1px dashed var(--hd-border-2);
}

#discover .step-col {
    position: relative;
    padding: 28px 28px 24px;
}

/* Puck and verb share one line, so the promise is spoken out loud rather than
   filed away above the heading. */
#discover .step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#discover .step-num {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hd-accent);
    color: var(--hd-accent-fg);
    font-family: var(--hd-font-mono, monospace);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    /* Masks the rail on both sides of the puck. */
    box-shadow: 0 0 0 6px var(--hd-bg-canvas);
}

#discover .step-tag {
    position: relative;
    z-index: 1;
    /* Same mask as the puck: the rail dies at the word, not under it. */
    background: var(--hd-bg-canvas);
    box-shadow: 0 0 0 4px var(--hd-bg-canvas);
    font-family: var(--hd-font-mono, monospace);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hd-accent-text);
}

#discover .step-col h3 {
    font-weight: 600;
    font-size: 1rem;
    color: var(--hd-fg-1);
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

#discover .step-col p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hd-fg-3);
    margin: 0;
}

/* The promises hang under their own rule, headed by a small label so the
   four answers read as one block rather than four loose reassurances. */
#discover .assurances-block {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--hd-border-1);
}

#discover .assurances-title {
    margin: 0 0 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hd-accent-text);
}

#discover .assurances {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 28px;
    margin: 0;
}

#discover .assurance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#discover .assurance-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    background: var(--hd-accent-subtle);
    border: 1px solid var(--hd-accent-border);
    color: var(--hd-accent-text);
    font-size: 11px;
    font-weight: 700;
}

[data-bs-theme="dark"] #discover .assurance-check {
    background: var(--hd-accent-muted);
}

#discover .assurance strong {
    display: block;
    font-size: 0.875rem;
    color: var(--hd-fg-1);
    margin-bottom: 3px;
}

#discover .assurance p {
    color: var(--hd-fg-3);
    font-size: 0.8125rem;
    line-height: 1.55;
}

@media (max-width: 991px) {
    #discover .assurances {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    #discover .steps-grid {
        grid-template-columns: 1fr;
    }
    /* Stacked: the rail turns vertical, each step linking down to the next.
       Columns share the same padding so a puck centre always sits 42px from
       the top of its column, which is where the segments start and end. */
    #discover .steps-grid::before {
        display: none;
    }
    #discover .step-col {
        padding: 24px;
    }
    /* Puck and verb keep their line; only the copy is indented past the rail,
       so no text ever sits on top of the dashes. */
    #discover .step-body {
        margin-left: 48px;
    }
    #discover .step-tag {
        font-size: 1.125rem;
    }
    #discover .step-col:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 42px;
        bottom: -42px;
        left: 42px;
        border-left: 1px dashed var(--hd-border-2);
    }
    #discover .assurances {
        grid-template-columns: 1fr;
    }
}

/* ── Checks deep-dive (#checks) ──
   Three scope columns sharing one bordered surface, each ending with a
   mock check-list whose rows echo the .svc rows of the big-idea section. */
.checks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--hd-border-1);
    border-radius: 12px;
    overflow: hidden;
    background: var(--hd-bg-canvas);
}

.checks-col {
    --col-c: var(--hd-accent-text);
    --col-bg: var(--hd-accent-subtle);
    --col-muted: var(--hd-accent-muted);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
}

/* A faint colored wash that fades into the canvas, so the three scopes read
   as distinct and lively. */
.checks-col::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 120px;
    background: linear-gradient(var(--col-bg), transparent);
    opacity: 0.6;
    pointer-events: none;
}

/* Per-column hues: Domain → green (brand), Zone → blue, Services → plum. */
.checks-col:nth-child(2) {
    --col-c: var(--hd-info);
    --col-bg: var(--hd-info-bg);
    --col-muted: var(--hd-info-bg);
}

.checks-col:nth-child(3) {
    --col-c: var(--hd-plum-500);
    --col-bg: var(--hd-plum-50);
    --col-muted: var(--hd-plum-100);
}

[data-bs-theme="dark"] .checks-col:nth-child(3) {
    --col-c: var(--hd-plum-300);
    --col-bg: var(--hd-plum-800);
    --col-muted: var(--hd-plum-700);
}

/* Keep column content above the decorative wash. */
.checks-col > * {
    position: relative;
}

.checks-col + .checks-col {
    border-left: 1px solid var(--hd-border-1);
}

.checks-col .idea-tag {
    color: var(--col-c);
}

.checks-col h3 {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--hd-fg-1);
    letter-spacing: -0.015em;
    margin: 0 0 10px;
}

.checks-col > p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hd-fg-3);
    margin: 0 0 18px;
}

.check-list {
    margin: auto 0 0;
    border: 1px solid var(--hd-border-1);
    border-radius: 8px;
    background: var(--hd-bg-subtle);
    overflow: hidden;
}

.check-list li + li {
    border-top: 1px solid var(--hd-border-1);
}

.check-list li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.check-list li > a:hover,
.check-list li > a:focus-visible {
    background: var(--col-bg);
}

[data-bs-theme="dark"] .check-list li > a:hover,
[data-bs-theme="dark"] .check-list li > a:focus-visible {
    background: var(--col-muted);
}

.check-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hd-fg-2);
}

.check-arrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--hd-fg-4, var(--hd-fg-3));
    transform: translateX(-2px);
    opacity: 0;
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.check-list li > a:hover .check-name,
.check-list li > a:focus-visible .check-name,
.check-list li > a:hover .check-arrow,
.check-list li > a:focus-visible .check-arrow {
    color: var(--col-c);
}

.check-list li > a:hover .check-arrow,
.check-list li > a:focus-visible .check-arrow {
    transform: translateX(0);
    opacity: 1;
}

.check-list li.check-more {
    background: var(--col-bg);
}

.check-list li.check-more .check-name {
    color: var(--col-c);
    font-weight: 700;
}

.check-list li.check-more .check-arrow {
    color: var(--col-c);
    opacity: 1;
    transform: translateX(0);
}

/* Dangling-records case study: copy on the left, mock check report on the
   right, sharing the same bordered surface language as .checks-grid. */
.checks-spotlight {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: center;
    margin-top: 24px;
    padding: 32px;
    border: 1px solid var(--hd-border-1);
    border-radius: 12px;
    background-color: var(--hd-bg-canvas);
}

.idea-tag-danger {
    color: var(--hd-danger);
}

.spotlight-copy h3 {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--hd-fg-1);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.spotlight-copy p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--hd-fg-3);
    margin: 0 0 14px;
}

.spotlight-sources-label {
    font-weight: 700;
    color: var(--hd-fg-2);
    margin-bottom: 6px;
}

.spotlight-sources {
    margin: 0 0 18px;
}

.spotlight-sources li {
    font-size: 0.875rem;
    line-height: 1.7;
}

.spotlight-sources a {
    color: var(--hd-fg-2);
    text-decoration: underline;
    text-decoration-color: var(--hd-border-3);
    text-underline-offset: 3px;
}

.spotlight-sources a:hover,
.spotlight-sources a:focus-visible {
    color: var(--hd-accent-text);
    text-decoration-color: var(--hd-accent-text);
}

.spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hd-accent-text);
    text-decoration: none;
}

.spotlight-cta:hover,
.spotlight-cta:focus-visible {
    text-decoration: underline;
}

.spotlight-demo {
    margin: 0;
}

.spotlight-demo img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hd-border-1);
    border-radius: 10px;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
}

.spotlight-demo figcaption {
    margin-top: 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hd-fg-4);
    text-align: center;
}

@media (max-width: 991px) {
    .checks-spotlight {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
}

.checks-footer {
    margin: 28px 0 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--hd-fg-2);
}

.checks-footer a {
    color: var(--hd-accent-text);
    font-weight: 600;
}

@media (max-width: 767px) {
    .checks-grid {
        grid-template-columns: 1fr;
    }
    .checks-col + .checks-col {
        border-left: none;
        border-top: 1px solid var(--hd-border-1);
    }
}

/* ── Personas (#personas) ── */
.personas-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.persona-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--hd-bg-canvas);
    border: 1px solid var(--hd-border-1);
    border-radius: 12px;
    overflow: hidden;
    transition:
        border-color 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}

.persona-card:hover {
    border-color: var(--hd-accent-border);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
}

/* The persona illustrations are transparent PNG-alpha WebPs, so the card gives
   them a tinted gradient to sit on rather than bare canvas. The angle is
   rotated per card so the row reads as five portraits, not one repeated tile. */
.persona-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: linear-gradient(
        var(--persona-angle, 160deg),
        var(--hd-accent-subtle) 0%,
        var(--hd-accent-muted) 45%,
        var(--hd-bg-subtle) 100%
    );
}

.persona-card:nth-child(2) img {
    --persona-angle: 200deg;
}
.persona-card:nth-child(3) img {
    --persona-angle: 130deg;
}
.persona-card:nth-child(4) img {
    --persona-angle: 220deg;
}
.persona-card:nth-child(5) img {
    --persona-angle: 145deg;
}

.persona-card .persona-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hd-fg-1);
    border-top: 1px solid var(--hd-border-1);
}

.persona-card .persona-name::after {
    content: "\2192";
    color: var(--hd-fg-4);
    transition:
        color 0.15s,
        transform 0.15s;
}

.persona-card:hover .persona-name::after {
    color: var(--hd-accent-text);
    transform: translateX(3px);
}

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

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

#cta {
    padding: 100px 0;
    background:
        linear-gradient(
            135deg,
            rgba(61, 0, 83, 0.6) 0%,
            rgba(0, 170, 125, 0.5) 100%
        ),
        url("/img/screenshots/home.webp");
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#cta::before,
#cta::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

#cta::before {
    top: -150px;
    left: -100px;
}

#cta::after {
    bottom: -150px;
    right: -100px;
    width: 350px;
    height: 350px;
}

.cta-content {
    position: relative;
    z-index: 2;
}

/* Frosted panel behind the CTA copy.
   The section background is a screenshot of the app, which is itself full of
   text: putting the headline straight on top of it made text sit on text.
   The blurred glass turns the area under the copy into an abstract wash while
   the screenshot stays sharp and recognizable all around the card. */
.cta-glass {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    border-radius: 1.75rem;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.06) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow:
        0 1.5rem 3rem rgba(23, 0, 31, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Without backdrop-filter the panel would be a barely tinted window onto the
   screenshot, i.e. the original problem. Fall back to an opaque plum panel. */
@supports not (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
    .cta-glass {
        background: linear-gradient(
            160deg,
            rgba(50, 0, 68, 0.88) 0%,
            rgba(20, 60, 55, 0.88) 100%
        );
    }
}

@media (max-width: 575.98px) {
    .cta-glass {
        padding: 2rem 1.25rem;
        border-radius: 1.25rem;
    }
}

#cta p {
    max-width: 700px;
}

/* "About us" closing band.
   The plum-* scale is only defined for the light theme, so a hardcoded
   var(--hd-plum-100) background stayed pale lavender in dark mode while
   btn-outline-dark / text-dark inverted to light and became unreadable.
   Drive every color from scoped band-* tokens that flip with the theme. */
.footer-us-band {
    --band-bg: linear-gradient(
        160deg,
        var(--hd-plum-50) 0%,
        var(--hd-plum-100) 100%
    );
    --band-fg: var(--hd-plum-700);
    --band-fg-strong: var(--hd-plum-800);
    --band-btn-fg: var(--hd-plum-700);
    --band-btn-border: var(--hd-plum-300);
    --band-btn-hover-bg: var(--hd-plum-700);
    --band-btn-hover-fg: var(--hd-plum-50);
    --band-hilight-bg: var(--hd-plum-300);
    --band-hilight-fg: var(--hd-plum-900);
    background: var(--band-bg);
    color: var(--band-fg);
}

[data-bs-theme="dark"] .footer-us-band {
    --band-bg: linear-gradient(160deg, #200a2b 0%, var(--hd-plum-900) 100%);
    --band-fg: var(--hd-plum-200);
    --band-fg-strong: var(--hd-plum-50);
    --band-btn-fg: var(--hd-plum-100);
    --band-btn-border: var(--hd-plum-400);
    --band-btn-hover-bg: var(--hd-plum-200);
    --band-btn-hover-fg: var(--hd-plum-900);
    --band-hilight-bg: var(--hd-plum-600);
    --band-hilight-fg: var(--hd-plum-50);
}

.footer-us-band h3,
.footer-us-band h4 {
    color: var(--band-fg-strong);
}

.footer-us-band .band-hilight {
    background-color: var(--band-hilight-bg);
    color: var(--band-hilight-fg);
    border-radius: var(--hd-radius-sm, 4px);
}

.footer-us-band .band-btn {
    color: var(--band-btn-fg);
    border: 1px solid var(--band-btn-border);
    background-color: transparent;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.footer-us-band .band-btn:hover,
.footer-us-band .band-btn:focus-visible {
    background-color: var(--band-btn-hover-bg);
    color: var(--band-btn-hover-fg);
    border-color: var(--band-btn-hover-bg);
}

/* Theme-aware neutral outline button.
   Bootstrap's .btn-outline-dark is compiled with a fixed dark gray, so it
   turns invisible on the dark body in dark mode. This flips with the theme. */
.btn-outline-soft {
    color: var(--hd-fg-1);
    border: 1px solid var(--hd-border-2);
    background-color: transparent;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
.btn-outline-soft:hover,
.btn-outline-soft:focus-visible {
    color: var(--hd-fg-1);
    background-color: var(--hd-bg-inset);
    border-color: var(--hd-border-3);
}

/* Language switcher in the navbar.
   .btn-outline-plum is generated from the $theme-colors "plum" entry, so its
   colors are baked to plum-500 at build time while the navbar background is
   theme-reactive. Lift it to a lighter plum in dark mode. */
[data-bs-theme="dark"] .btn-outline-plum {
    --bs-btn-color: var(--hd-plum-200);
    --bs-btn-border-color: var(--hd-plum-400);
    --bs-btn-hover-color: var(--hd-plum-900);
    --bs-btn-hover-bg: var(--hd-plum-200);
    --bs-btn-hover-border-color: var(--hd-plum-200);
    --bs-btn-active-color: var(--hd-plum-900);
    --bs-btn-active-bg: var(--hd-plum-300);
    --bs-btn-active-border-color: var(--hd-plum-300);
    --bs-btn-disabled-color: var(--hd-plum-400);
    --bs-btn-disabled-border-color: var(--hd-plum-600);
}

/* Text on surfaces that stay dark in *both* themes (the plum bands, the photo
   CTA, the survey popover). Bootstrap's .text-light is driven by
   --bs-light-rgb, which this theme deliberately inverts to a near-black in
   dark mode, so it flips the wrong way on top of a permanently dark surface.
   --hd-brand-dark-fg is defined once and stays light in both themes. */
.text-on-dark,
.text-on-dark h1,
.text-on-dark h2,
.text-on-dark h3,
.text-on-dark h4,
.text-on-dark h5,
.text-on-dark h6 {
    color: var(--hd-brand-dark-fg);
}

.footer-logo svg {
    /* Fixed intrinsic height, but never wider than its column (the brand
       column is only ~170px at the lg breakpoint). */
    max-width: 100%;
    height: auto;
}

footer {
    border-top: 3px solid var(--hd-plum-400);
    /* Footer is always a dark band (all child text is hardcoded white),
       so pin its colors instead of using the theme-reactive .bg-dark/.text-light. */
    background-color: #212529;
    color: #f8f9fa;
}

.footer-tagline {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
    max-width: 260px;
    margin-bottom: 0;
}

.footer-heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: white;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    transition:
        color 0.2s,
        border-color 0.2s,
        background-color 0.2s;
}

.footer-social a:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-git-link {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-git-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

#download-house {
    animation: floatinghouse 6s linear infinite;
}
@keyframes floatinghouse {
    0% {
        top: 0;
        left: 0;
    }
    10% {
        top: -2px;
    }
    20% {
        top: -4px;
    }
    30% {
        top: -6px;
    }
    40% {
        top: -2px;
    }
    50% {
        top: 0px;
    }
    60% {
        top: 4px;
    }
    70% {
        top: 6px;
    }
    80% {
        top: 8px;
    }
    90% {
        top: 4px;
    }
    100% {
        top: 0;
    }
}

@media (min-width: 768px) {
    #community > div > div {
        width: 50% !important;
    }
    #community > div > div:first-child {
        border-right: 1px solid var(--hd-plum-400);
    }
}

/* ── Big idea section ── */
.section {
    padding: 96px 0;
}

.section--paper {
    background: var(--hd-bg-subtle);
    border-top: 1px solid var(--hd-border-1);
    border-bottom: 1px solid var(--hd-border-1);
}

.section-head {
    margin-bottom: 56px;
}

.section-head .eyebrow {
    display: flex;
    margin-bottom: 14px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hd-fg-3);
}

.eyebrow .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hd-accent);
    flex-shrink: 0;
}

.h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--hd-fg-1);
    margin: 0;
}

.section-head .h2 {
    max-width: 720px;
}

.cta-content h2 {
    /* The CTA band stays dark in both themes, but --bs-light inverts to a
       near-black in dark mode. Pin the always-light brand foreground. */
    color: var(--hd-brand-dark-fg);
}

.lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--hd-fg-2);
    margin-top: 14px;
    max-width: 640px;
}

.idea-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--hd-border-1);
    border-radius: 12px;
    overflow: hidden;
    background: var(--hd-bg-canvas);
}

.idea-col {
    padding: 28px 28px 24px;
}

.idea-col + .idea-col {
    border-left: 1px solid var(--hd-border-1);
}

.idea-tag {
    font-family: var(--hd-font-mono, monospace);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hd-fg-4);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.idea-tag .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--hd-bg-subtle);
    color: var(--hd-fg-3);
    font-size: 9px;
}

.idea-col h3 {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--hd-fg-1);
    letter-spacing: -0.015em;
    margin: 0 0 18px;
}

.idea-col h3 .strike {
    text-decoration: line-through;
    color: var(--hd-fg-4);
    font-weight: 600;
}

.zone-pre {
    font-family: var(--hd-font-mono, monospace);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--hd-fg-3);
    background: var(--hd-bg-subtle);
    border: 1px solid var(--hd-border-1);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0;
    white-space: pre;
    overflow: auto;
}

.zone-pre .k {
    color: var(--hd-fg-1);
    font-weight: 500;
}
.zone-pre .v {
    color: var(--hd-fg-2);
}
.zone-pre .c {
    color: var(--hd-fg-4);
}
.zone-pre .a {
    color: var(--hd-accent-text);
}

.svc {
    border: 1px solid var(--hd-border-1);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--hd-bg-canvas);
    overflow: hidden;
}

.svc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
}

.svc-row + .svc-row {
    border-top: 1px solid var(--hd-bg-subtle);
}

.svc-l {
    display: flex;
    align-items: center;
    gap: 9px;
}

.svc-ico {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--hd-accent-subtle);
    border: 1px solid var(--hd-accent-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-accent-text);
    font-size: 13px;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .svc-ico {
    background: var(--hd-accent-muted);
}

.svc-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hd-fg-1);
}

.svc-desc {
    font-size: 10.5px;
    color: var(--hd-fg-3);
    margin-top: 1px;
}

.svc-r {
    display: flex;
    align-items: center;
    gap: 8px;
}

.svc-cnt {
    font-family: var(--hd-font-mono, monospace);
    font-size: 10px;
    color: var(--hd-fg-4);
    background: var(--hd-bg-subtle);
    padding: 2px 6px;
    border-radius: 9999px;
}

.svc-ok {
    font-size: 10px;
    font-weight: 600;
    color: var(--hd-accent-text);
    display: flex;
    align-items: center;
    gap: 3px;
}

@media (max-width: 767px) {
    .idea-grid {
        grid-template-columns: 1fr;
    }
    .idea-col + .idea-col {
        border-left: none;
        border-top: 1px solid var(--hd-border-1);
    }
    .section {
        padding: 64px 0;
    }
}