/* Nemo theme: "Citrus" - light, cheerful.
   Bright mint, lemon and tangerine; soft rounded shapes; light hero and footer.
   Single theme layer: replaces the previous palette in nemo-theme.css.
   Bright colours are decoration only; all text pairs meet WCAG AA. */
.dh-page,
.dh-route-loader {
    --dh-navy: #123c3a;
    --dh-ink: #123c3a;
    --dh-green: #0f7a57;
    --dh-cedar: #0a5a40;
    --dh-sky: #e6fbf3;
    --dh-cloud: #fafffd;
    --dh-saffron: #d97a1f;
    --dh-gold: #ffd24d;
    --dh-line: #d7f0e2;
    --dh-soft-shadow: 0 18px 44px rgba(15, 122, 87, .08);
    --dh-strong-shadow: 0 26px 66px rgba(15, 122, 87, .12);

    --nemo-primary: #0f7a57;
    --nemo-primary-dark: #0a5a40;
    --nemo-gradient: linear-gradient(135deg, #0f7a57, #17b978);

    /* Shape system: soft and rounded rather than the base 8px corners. */
    --nemo-radius-panel: 24px;
    --nemo-radius-card: 22px;
    --nemo-radius-control: 14px;
    --nemo-radius-pill: 999px;
}

/* ---------- Navigation ---------- */
.dh-page .dh-navbar {
    background: rgba(255, 255, 255, .93);
    border-bottom-color: #dff3e8;
    box-shadow: 0 8px 26px rgba(15, 122, 87, .06);
}

.dh-page .dh-brand-title { color: #0d3b36; }
.dh-page .dh-nav-link { color: #143f3a; }

.dh-page .dh-nav-link:hover,
.dh-page .dh-nav-link:focus-visible {
    color: #0a5a40;
    background: #e6fbf3;
}

/* ---------- Buttons ---------- */
.dh-page .dh-button {
    border-radius: var(--nemo-radius-pill);
    font-weight: 700;
}

.dh-page .dh-button-primary {
    background: var(--nemo-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(23, 185, 120, .26);
}

.dh-page .dh-button-primary:hover,
.dh-page .dh-button-primary:focus-visible {
    background: linear-gradient(135deg, #0a5a40, #0f7a57);
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 122, 87, .3);
}

.dh-page .dh-button-secondary {
    color: #0a5a40;
    background: #fff;
    border-color: #c4e9d6;
}

.dh-page .dh-button-secondary:hover,
.dh-page .dh-button-secondary:focus-visible {
    color: #0a5a40;
    background: #e6fbf3;
    border-color: #8bdbb4;
}

/* ---------- Hero ---------- */
.dh-page .dh-hero {
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 210, 77, .32), transparent 40%),
        radial-gradient(circle at 6% 92%, rgba(23, 185, 120, .20), transparent 44%),
        radial-gradient(circle at 55% 108%, rgba(255, 138, 61, .16), transparent 42%),
        linear-gradient(168deg, #f2fdf7 0%, #ffffff 62%, #fffaf1 100%);
    color: var(--dh-ink);
}

.dh-page .dh-hero h1 {
    color: #0e3531;
    font-weight: 840;
    line-height: 1.02;
    letter-spacing: -.025em;
}

.dh-page .dh-hero-copy { color: #3f615a; font-weight: 560; }
.dh-page .dh-hero .dh-button-primary { background: var(--nemo-gradient); }
.dh-page .dh-hero .dh-button-primary:hover { background: linear-gradient(135deg, #0a5a40, #0f7a57); }
.dh-page .dh-hero .dh-button-secondary { background: #fff; border-color: #c4e9d6; color: #0a5a40; }
.dh-page .dh-hero .dh-button-secondary:hover { background: #e6fbf3; color: #0a5a40; }

.dh-page .dh-eyebrow { color: #0a5a40; }
.dh-page .dh-eyebrow::before { background: var(--dh-gold); }

.dh-page .nemo-badges li {
    color: #12463a;
    background: #fff;
    border-color: #d4efe1;
    border-radius: var(--nemo-radius-pill);
    font-weight: 620;
    box-shadow: 0 6px 14px rgba(15, 122, 87, .06);
}

/* Logo stage: soft mint shading instead of the technical grid. */
.dh-page .dh-logo-stage {
    border-radius: var(--nemo-radius-panel);
    background: linear-gradient(150deg, #ffffff, #ecfdf4 58%, #fff7e6);
    border-color: #d4efe1;
    box-shadow: 0 34px 74px rgba(15, 122, 87, .13);
}

.dh-page .dh-logo-stage::before {
    background: linear-gradient(180deg, transparent, rgba(255, 210, 77, .18));
}

.dh-page .dh-logo-main img {
    filter: drop-shadow(0 18px 30px rgba(15, 122, 87, .10));
}

/* ---------- Sections, headings, cards ---------- */
.dh-page .dh-section { background: #fff; }
.dh-page .dh-section:nth-of-type(even),
.dh-page .dh-section-alt { background: #f4fdf8; }

.dh-page .dh-section-heading h2 {
    color: #0e3531;
    font-weight: 840;
    letter-spacing: -.02em;
}

.dh-page .dh-section-heading p { color: #4b6f66; }

.dh-page .dh-card {
    background: #fff;
    border-color: #dcf2e6;
    border-radius: var(--nemo-radius-card);
    box-shadow: 0 16px 38px rgba(15, 122, 87, .08);
}

.dh-page .dh-card h3,
.dh-page .dh-card h4 { color: #0e3531; font-weight: 780; }
.dh-page .dh-card p,
.dh-page .dh-card blockquote,
.dh-page .dh-card li { color: #4b6f66; }
.dh-page .dh-card a { color: #0f7a57; }
.dh-page .dh-card a:hover { color: #0a5a40; }
.dh-page .dh-card i { background: rgba(23, 185, 120, .14); color: #0f7a57; border-radius: 12px; }

.dh-page .dh-metric,
.dh-page .dh-status {
    border-color: #d7f0e2;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(15, 122, 87, .07);
}

.dh-page .dh-metric strong,
.dh-page .dh-status span { color: #0e3531; }
.dh-page .dh-metric span { color: #4b6f66; }
.dh-page .dh-status i { color: #d97a1f; }

/* ---------- Contact ---------- */
.dh-page .dh-contact-aside {
    background: linear-gradient(135deg, #0a5a40, #0f7a57);
    color: #fff;
    border-radius: var(--nemo-radius-panel);
}

/* Show the colour logo on a white chip instead of inverting it. */
.dh-page .dh-contact-aside img {
    width: 120px;
    filter: none;
    background: #fff;
    padding: 10px;
    border-radius: var(--nemo-radius-control);
}

.dh-page .dh-contact-aside p { color: rgba(255, 255, 255, .9); }

.dh-page .dh-contact-form {
    border-color: #dcf2e6;
    border-radius: var(--nemo-radius-panel);
    box-shadow: 0 18px 46px rgba(15, 122, 87, .08);
}

.dh-page .dh-input,
.dh-page .dh-select {
    border-color: #cfe9dc;
    border-radius: var(--nemo-radius-control);
}

.dh-page .dh-input:focus,
.dh-page .dh-select:focus {
    border-color: #0f7a57;
    box-shadow: 0 0 0 4px rgba(15, 122, 87, .14);
}

.dh-page .dh-option {
    background: #f8fdfb;
    border-color: #dcf2e6;
    border-radius: var(--nemo-radius-control);
}

.dh-page .dh-option input { accent-color: #0f7a57; }

.dh-page .dh-option:has(input:checked) {
    background: #e6fbf3;
    border-color: #17b978;
}

.dh-page .dh-small-note { color: #4b6f66; }
.dh-page .dh-button:disabled { opacity: .55; box-shadow: none; }

/* ---------- Footer ---------- */
.dh-page .dh-footer {
    background: #f2fbf6;
    color: #33665a;
    border-top: 1px solid #dff3e8;
}

.dh-page .dh-footer a { color: #0a5a40; }

.dh-page .dh-footer a:hover,
.dh-page .dh-footer a:focus-visible {
    color: #0f7a57;
    text-decoration: underline;
}

/* ---------- Overlays, focus, selection ---------- */
.dh-page .chat-overlay { background: rgba(18, 60, 58, .55); }

.dh-page a:focus-visible,
.dh-page button:focus-visible {
    outline: 3px solid #17b978;
    outline-offset: 4px;
}

.dh-page ::selection { background: #c9f5e2; color: #0a3d31; }

/* App-wide span rules must not hide text on light action buttons. */
.dh-page .dh-button > span { color: inherit !important; }

/* Inline text link used in the hero (AI assistant entry). */
.dh-page .dh-hero-note { margin: 16px 0 0; }

.dh-page .dh-text-link {
    padding: 0;
    border: 0;
    background: none;
    color: #0a5a40;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #8fd3c4;
    cursor: pointer;
}

.dh-page .dh-text-link:hover,
.dh-page .dh-text-link:focus-visible {
    color: #0f7a57;
    text-decoration-color: #0f7a57;
}
/* ---------- Hero: apps panel in place of the logo ---------- */
.dh-page .dh-hero {
    min-height: auto;
    padding: 44px 0 52px;
}

.dh-page .dh-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 520px);
    gap: 52px;
    align-items: center;
}

.dh-page .dh-hero-examples {
    display: grid;
    gap: 14px;
}

.dh-page .dh-hero-examples-label {
    margin: 0;
    color: #7b948c;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dh-page .dh-hero-examples-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dh-page .dh-example {
    display: grid;
    overflow: hidden;
    border: 1px solid #dcf2e6;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(15, 122, 87, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dh-page a.dh-example:hover,
.dh-page a.dh-example:focus-visible {
    transform: translateY(-3px);
    border-color: #b6e6d2;
    box-shadow: 0 18px 38px rgba(15, 122, 87, .14);
}

.dh-page .dh-example-shot {
    aspect-ratio: 16 / 10;
    height: auto;
    box-sizing: border-box;
    padding: 9px;
    border-bottom: 1px solid #eaf7f0;
    background: linear-gradient(150deg, #f2fdf8, #fffaf1);
}

/* Any supplied screenshot is scaled into the 16:10 thumbnail, never shown at full size. */
.dh-page .dh-example-shot > img,
.dh-page .dh-example-shot > .dh-mini-app {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Placeholder preview tile until real screenshots are added. */
.dh-page .dh-mini-app {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    border: 1px solid #d4efe1;
    border-radius: 8px;
    background: #fff;
}

.dh-page .dh-mini-rail {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 6px 5px;
    border-right: 1px solid #eaf7f0;
    background: #f8fdfb;
}

.dh-page .dh-mini-rail span {
    height: 4px;
    border-radius: 999px;
    background: #e4f4ec;
}

.dh-page .dh-mini-rail span.is-on { background: #17b978; }

.dh-page .dh-mini-main {
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 6px;
}

.dh-page .dh-mini-title {
    width: 56%;
    height: 5px;
    border-radius: 999px;
    background: #cfe9dc;
}

.dh-page .dh-mini-row {
    height: 12px;
    border: 1px solid #eef8f3;
    border-radius: 4px;
    background: #f4fbf8;
}

.dh-page .dh-example-body {
    display: grid;
    gap: 2px;
    padding: 10px 12px 12px;
}

.dh-page .dh-example-body strong {
    color: #0e3531;
    font-size: .88rem;
    font-weight: 780;
}

.dh-page .dh-example-body span {
    color: #7b948c;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .dh-page .dh-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
/* Link affordance on the hero app cards (only rendered for cards with a Url). */
.dh-page a.dh-example { position: relative; }

.dh-page a.dh-example::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #d4efe1;
    border-radius: 999px;
    background: #fff;
    color: #0a5a40;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(15, 122, 87, .14);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.dh-page a.dh-example.is-external::after { content: "\2197"; }
.dh-page a.dh-example.is-internal::after { content: "\2192"; }

.dh-page a.dh-example:hover::after,
.dh-page a.dh-example:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}