/*
 * Divisi Brand CSS
 * Sits on top of Bootstrap 5.3 — override only what differs from vanilla Bootstrap.
 *
 * Brand palette (per brand guide):
 *   Primary:   #00A85A · #0CEA7B
 *   Secondary: #6D6E70 · #000000
 *
 * Brand fonts (self-hosted from brand kit):
 *   Heading: Qualy   (primary font)
 *   Body:    MazzardH (secondary font)
 */

/* ── 0a. Self-hosted brand fonts ────────────────────────────────────────── */
@font-face {
    font-family: 'Qualy';
    src: url("../fonts/Qualy.7bd158242f2c.woff2") format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MazzardH';
    src: url("../fonts/MazzardH-Regular.5bc51c70507c.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MazzardH';
    src: url("../fonts/MazzardH-Medium.330b61616737.woff2") format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MazzardH';
    src: url("../fonts/MazzardH-SemiBold.fec8f79a3547.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MazzardH';
    src: url("../fonts/MazzardH-Bold.663f35e00d91.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── 0b. Design tokens ──────────────────────────────────────────────────── */
:root {
    /* Brand fonts */
    --dv-font-heading: 'Qualy', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dv-font-body: 'MazzardH', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Brand palette — exact values from brand guide */
    --dv-green: #00A85A; /* Primary green */
    --dv-green-light: #0CEA7B; /* Primary accent green */
    --dv-green-dark: #007a45; /* Functional hover shade — not a structural colour */
    --dv-green-pale: #f0faf5; /* Reserved for hero & on-brand accent sections */
    /* Brand green as *text*. --dv-green is a background colour: at #00A85A it is
       only 3.1:1 on white, which fails AA for the small uppercase eyebrows it was
       being used for. No single green clears 4.5:1 in both themes, so this token
       resolves per theme — always reach for it when green is type, not fill. */
    --dv-green-accent: var(--dv-green-dark); /* 5.4:1 on white */
    --dv-tag-pill-bg: var(--dv-green-pale); /* resting fill for .dv-tag-pill */

    /* Decorative greens, light ground. The signature contours need roughly
       double the alpha and the darker brand green to register on white at all;
       the bloom needs less, because a bright wash on white reads as a stain
       rather than as light. */
    --dv-contour-stroke: rgba(0, 168, 90, 0.20);
    --dv-bloom-core: rgba(0, 168, 90, 0.09);
    --dv-bloom-mid: rgba(0, 168, 90, 0.035);
    --dv-gray: #6D6E70; /* Brand secondary gray */

    /* Text */
    --dv-text: #000000; /* Brand black */
    --dv-text-muted: #505153; /* Accessible secondary text — 5.8:1 on white (WCAG AA all sizes) */

    /* Surfaces */
    --dv-surface: #ffffff;
    --dv-surface-alt: #f5f5f5; /* Neutral alternating section background */

    /* Card / outline system — modern retro: crisp borders, no soft glow */
    --dv-card-border: rgba(0, 0, 0, 0.80);
    --dv-card-shadow: none;
    --dv-card-hover-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);

    /* Accessibility */
    --dv-min-touch: 48px; /* Minimum touch target height (WCAG 2.5.8) */

    /* Bootstrap token overrides */
    --bs-primary: var(--dv-green);
    --bs-primary-rgb: 0, 168, 90;
    --bs-link-color: var(--dv-green);
    --bs-link-color-rgb: 0, 168, 90;
    --bs-link-hover-color: var(--dv-green-dark);
    --bs-body-bg: #ffffff;
    --bs-body-font-family: var(--dv-font-body);
    --bs-body-font-size: 1.0625rem; /* 17px — rural readability baseline */
    --bs-body-line-height: 1.75; /* generous leading for low-literacy readers */
    --bs-body-color: var(--dv-text);
    --bs-secondary-color: var(--dv-text-muted);
    --bs-border-color: rgba(0, 0, 0, 0.2);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
}

/* ── Dark mode token overrides ──────────────────────────────────────────── */
/* Deep forest + brand green. base.html sets data-bs-theme on <html> from the
   device's prefers-color-scheme (no in-page switcher); dark is the default. */
[data-bs-theme="dark"] {
    --dv-contour-stroke: rgba(12, 234, 123, 0.10);
    --dv-bloom-core: rgba(12, 234, 123, 0.16);
    --dv-bloom-mid: rgba(12, 234, 123, 0.06);

    --dv-green-pale: #16241b; /* Deep green-tinted panel */
    --dv-green-accent: var(--dv-green-light); /* 13:1 on the forest canvas */
    --dv-tag-pill-bg: rgba(0, 168, 90, 0.14);
    --dv-gray: #9a9b9d;

    --dv-text: #f2f4f2;
    --dv-text-muted: #b9c0bb; /* green-grey secondary text */
    --dv-surface: #121a15; /* forest surface */
    --dv-surface-alt: #0f1611; /* deeper alternating band */

    --dv-card-border: rgba(255, 255, 255, 0.14);
    --dv-card-shadow: none;
    --dv-card-hover-shadow: 3px 3px 0 rgba(12, 234, 123, 0.25);

    --bs-body-bg: #0b110d; /* brand canvas: near-black with a green heart */
    --bs-body-color: var(--dv-text);
    --bs-secondary-color: var(--dv-text-muted);
    --bs-border-color: rgba(255, 255, 255, 0.14);
    --bs-link-color: var(--dv-green-light);
    --bs-link-hover-color: var(--dv-green-light);
}

/* Deep brand-green band — the download anchor's moment. Rich, not loud:
   the app splash's forest gradient with the site's normal light text.
   Always dark, so it carries its own dark tokens for when the page is light. */
.dv-band-green {
    --dv-text: #f2f4f2;
    --dv-text-muted: #b9c0bb;
    --dv-card-border: rgba(255, 255, 255, 0.14);
    --bs-body-bg: #0b110d;
    --bs-secondary-color: var(--dv-text-muted);
    background: linear-gradient(180deg, #103322 0%, #0b2416 60%, #0a1f13 100%);
    border-top: 1px solid rgba(12, 234, 123, 0.18);
    border-bottom: 1px solid rgba(12, 234, 123, 0.18);
    color: var(--dv-text);
}

/* ── 1. Base typography ─────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--dv-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Wide-gutter rows (.g-5) and decorative tilts overhang the viewport by a
       few px on phones; the overhang is never content, so clip it. */
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
    font-family: var(--dv-font-heading);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ── 2. Brand utility classes ───────────────────────────────────────────── */
.text-brand {
    color: var(--dv-green-accent) !important;
}

/* Topic / version pill — the filter chips above the insights list and the version
   marker on the changelog. Lived in a <style> block on the insights template until
   a second page needed it. */
.dv-tag-pill {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--dv-green-accent);
    background: var(--dv-tag-pill-bg);
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Dark type on the green fill, not white: white on --dv-green is 3.1:1, which
   fails AA in both themes — and the selected filter is the one chip that has to
   stay readable.
   The resting background is a token rather than a `[data-bs-theme] .dv-tag-pill`
   rule: that rule outranks this one on specificity and would take the fill back
   off the selected chip, leaving dark type on a near-black panel. */
.dv-tag-pill:hover,
.dv-tag-pill:focus-visible,
.dv-tag-pill--active {
    background: var(--dv-green);
    color: #0b110d;
}

.bg-brand {
    background-color: var(--dv-green) !important;
}

.border-brand {
    border-color: var(--dv-green) !important;
}

/* ── 3. Navbar ──────────────────────────────────────────────────────────── */
.dv-navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #000000; /* Brand black — per brand guide */
    box-shadow: 0 2px 0 rgba(0, 168, 90, 0.35); /* Green rule under pure black reads crisper */
    transition: box-shadow 0.2s ease;
}

.dv-navbar .navbar-brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dv-green-light); /* bright accent on dark bg */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv-navbar .navbar-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.dv-navbar .navbar-brand:hover {
    color: #fff;
    text-decoration: none;
}

.dv-navbar .nav-link {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78) !important; /* light on dark bg */
    padding: 0.5rem 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 0.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dv-navbar .nav-link {
    position: relative;
}

.dv-navbar .nav-link:hover {
    color: #fff !important;
    background-color: rgba(0, 168, 90, 0.12);
}

.dv-navbar .nav-link.active {
    color: #fff !important;
}

.dv-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--dv-green-light);
}

/* Mobile drawer border */
.dv-navbar .dv-nav-drawer-border {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── 4. Buttons ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: var(--dv-green);
    border-color: var(--dv-green);
    color: #04170d; /* black-on-green, like the app — and AA contrast */
    font-weight: 700;
    min-height: var(--dv-min-touch);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--dv-green-light);
    border-color: var(--dv-green-light);
    color: #04170d;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(0, 168, 90, 0.4);
}

/* Bootstrap's .btn-outline-primary, form focus rings, checkboxes and pagination
   bake in their own blue and ignore --bs-primary — rebrand them to Divisi green
   here so the whole site is on-brand (not just .btn-primary). */
.btn-outline-primary {
    --bs-btn-color: var(--dv-green);
    --bs-btn-border-color: var(--dv-green);
    --bs-btn-hover-bg: var(--dv-green);
    --bs-btn-hover-border-color: var(--dv-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--dv-green-dark);
    --bs-btn-active-border-color: var(--dv-green-dark);
    --bs-btn-disabled-color: var(--dv-green);
    --bs-btn-disabled-border-color: var(--dv-green);
    --bs-btn-focus-shadow-rgb: 0, 168, 90;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--dv-green-light);
    --bs-btn-border-color: var(--dv-green-light);
    --bs-btn-hover-bg: var(--dv-green-light);
    --bs-btn-hover-border-color: var(--dv-green-light);
    --bs-btn-hover-color: #06241a;
    --bs-btn-active-bg: var(--dv-green-light);
    --bs-btn-active-border-color: var(--dv-green-light);
    --bs-btn-active-color: #06241a;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dv-green);
    box-shadow: 0 0 0 0.2rem rgba(0, 168, 90, 0.25);
}

.form-check-input:checked {
    background-color: var(--dv-green);
    border-color: var(--dv-green);
}

.pagination {
    --bs-pagination-color: var(--dv-green);
    --bs-pagination-hover-color: var(--dv-green-dark);
    --bs-pagination-focus-color: var(--dv-green-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(0, 168, 90, 0.25);
    --bs-pagination-active-bg: var(--dv-green);
    --bs-pagination-active-border-color: var(--dv-green);
}

/* ── 5. App store buttons ───────────────────────────────────────────────── */
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    background: #0b0b0c;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    min-height: var(--dv-min-touch);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.store-btn:hover {
    border-color: var(--dv-green-light);
    transform: translateY(-1px);
    text-decoration: none;
}

.store-btn i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.store-btn-play i {
    color: var(--dv-green-light);
}

.store-btn-apple i {
    color: #fff;
}

/* Footer variant — shares the row evenly whether the container has it stacked
   (xs, lg) or side by side (sm, md). flex:1 1 0 + min-width:0 rather than
   width:100%, so two of them in a flex row divide the space instead of
   overflowing it. nowrap because "Download on App Store" breaking over two lines
   is what made the tablet footer look broken; the clamp shrinks the label instead.
   The vw term is capped at the lg column width (~300px) rather than the viewport,
   so a wide screen doesn't push the label past a narrow stacked column. */
.store-btn-footer {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    padding-inline: 0.9rem;
    font-size: clamp(0.78rem, 1.6vw, 0.9rem);
}

/* Detected platform button — bigger, ringed; the other one fades back */
.store-btn-featured {
    padding: 0.85rem 1.55rem;
    font-size: 1.05rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 6px 20px rgba(0, 0, 0, 0.18);
}

.store-btn-featured:hover {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* ── 6. Hero section ────────────────────────────────────────────────────── */
.dv-hero {
    background-color: var(--bs-body-bg);
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.dv-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dv-green), var(--dv-green-light));
}

.dv-hero-headline {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.15;
    font-weight: 900;
    color: var(--dv-text);
}

.dv-hero-headline span {
    color: var(--dv-green);
}

/* Stat pills */
.dv-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--dv-card-border);
    border-radius: 2rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dv-text);
    box-shadow: var(--dv-card-shadow);
}

.dv-stat-pill .dv-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dv-green);
    flex-shrink: 0;
}

/* Trust strip */
/* ── Form controls — crisp, app-like visibility in both themes ─────────── */
.form-control,
.form-select,
.input-group-text {
    border-color: rgba(0, 0, 0, 0.45);
    background-color: var(--dv-surface);
    color: var(--dv-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dv-green);
    box-shadow: 0 0 0 0.25rem rgba(0, 168, 90, 0.18);
    background-color: var(--dv-surface);
    color: var(--dv-text);
}

.form-control::placeholder {
    color: var(--dv-text-muted);
    opacity: 0.75;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: #161616;
}

/* ── Article share row — labelled pills, platform-tinted on hover ──────── */
.dv-share-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dv-text-muted);
    margin-bottom: 0.6rem;
}

.dv-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dv-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--dv-card-border);
    background: var(--dv-surface);
    color: var(--dv-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
    min-height: var(--dv-min-touch);
}

.dv-share-btn i {
    font-size: 1.15rem;
    color: var(--dv-green);
}

[data-bs-theme="dark"] .dv-share-btn i {
    color: var(--dv-green-light);
}

.dv-share-btn:hover {
    transform: translateY(-1px);
    border-color: var(--dv-green);
    color: var(--dv-text);
}

.dv-share-btn--wa:hover { border-color: #25d366; }
.dv-share-btn--wa i { color: #25d366; }
.dv-share-btn--fb:hover { border-color: #1877f2; }
.dv-share-btn--fb i { color: #1877f2; }

[data-bs-theme="dark"] .dv-share-btn--fb i { color: #6ea8ff; }

/* ── Tag badge — readable green on the pale surface in either theme ────── */
.dv-tag-badge {
    background: var(--dv-green-pale);
    color: var(--dv-green-dark);
    font-weight: 600;
}

[data-bs-theme="dark"] .dv-tag-badge {
    color: var(--dv-green-light);
}

/* ── Accessibility: black-on-green buttons (matches the app) + visible
   prose links (never colour-only) ──────────────────────────────────────── */
p a:not(.btn),
.dv-faq-body a,
.dv-article-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Brand icon (inline SVG sprite, templates/includes/_icons.html) ────── */
.dv-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.22em;
    flex-shrink: 0;
}

.dv-icon--lg {
    width: 2rem;
    height: 2rem;
}

/* ── App-UI fragments (WhatsApp-style cropped showcase pieces) ─────────── */
.dv-frag {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.9rem;
    border: 1.5px solid var(--dv-card-border);
    background: var(--dv-surface);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.10);
}

[data-bs-theme="dark"] .dv-frag {
    box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.06);
}

.dv-frag-stack {
    max-width: 360px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.dv-frag--tilt-l {
    transform: rotate(-1.6deg) translateX(-4%);
}

.dv-frag--tilt-r {
    transform: rotate(1.4deg) translateX(4%);
}

/* Phones: the collaged stacks read as clutter at 375px — show one straight
   fragment per stack, sized like an app-screenshot chip. */
@media (max-width: 767.98px) {
    .dv-frag-stack {
        max-width: 300px;
    }

    .dv-frag-stack > :nth-child(n+2) {
        display: none;
    }

    .dv-frag--tilt-l,
    .dv-frag--tilt-r {
        transform: none;
    }

    /* Wide pillar cards (meaning teaser, "works offline") stack vertically */
    .dv-about-pillar-card--wide {
        flex-direction: column;
    }
}

/* ── Per-section conversion row ────────────────────────────────────────── */
.dv-section-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* ── Hero collage — broken-up app UI, arranged with intent ─────────────── */
.dv-hero-collage {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    display: grid;
    gap: 1.1rem;
}

.dv-collage-a {
    width: 88%;
    transform: rotate(-1.6deg);
}

.dv-collage-b {
    width: 78%;
    margin-left: auto;
    margin-top: -2.2rem;
    transform: rotate(1.8deg);
}

.dv-collage-c {
    width: 62%;
    margin-left: 6%;
    margin-top: -1.4rem;
    transform: rotate(-1.2deg);
}

/* ── Phone widget: selected-country flag over a compact select ─────────── */
.dv-phone-widget {
    position: relative;
}

.dv-phone-widget .dv-phone-country {
    flex: 0 0 4.6rem;
    max-width: 4.6rem;
    color: transparent; /* the flag overlay is the visible value */
}

.dv-phone-widget .dv-phone-flag {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    font-size: 1.15rem;
    line-height: 1;
    pointer-events: none;
}

/* ── Scroll FAB — the app's nudge, on the web ──────────────────────────── */
.dv-scroll-fab {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 1040;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dv-card-border);
    border-radius: 50%;
    background: rgba(18, 26, 21, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--dv-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.dv-scroll-fab:hover {
    transform: translateX(-50%) scale(1.06);
    background: rgba(18, 26, 21, 0.95);
}

.dv-scroll-fab i {
    transition: transform 0.25s ease;
}

.dv-scroll-fab.is-up i {
    transform: rotate(180deg);
}

/* ── Scroll-reveal (progressive: visible without JS; base.html observes) ── */
.dv-reveal--init {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.dv-reveal--init.is-in {
    opacity: 1;
    transform: none;
}

.dv-reveal-d1 { transition-delay: 0.08s; }
.dv-reveal-d2 { transition-delay: 0.16s; }
.dv-reveal-d3 { transition-delay: 0.24s; }

/* ── 7. Section spacing ─────────────────────────────────────────────────── */
.section-py {
    padding: 5rem 0;
}

.section-py-sm {
    padding: 3.5rem 0;
}

/* ── 8. Feature cards ───────────────────────────────────────────────────── */
.dv-feature-card {
    border: 1.5px solid var(--dv-card-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem;
    height: 100%;
    background: var(--dv-surface);
    box-shadow: var(--dv-card-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dv-feature-card:hover {
    border-color: var(--dv-text);
    box-shadow: var(--dv-card-hover-shadow);
    transform: none;
}

.dv-feature-card .dv-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    background: var(--dv-green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--dv-green);
    flex-shrink: 0;
}

.dv-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.dv-feature-card p {
    font-size: 1rem;
    color: var(--dv-text-muted);
    margin: 0;
    line-height: 1.7;
}

.dv-coming-soon {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(0, 168, 90, 0.12);
    color: var(--dv-green);
    padding: 0.2em 0.55em;
    border-radius: 0.3rem;
    vertical-align: middle;
    margin-left: 0.35rem;
}

/* ── 9. Steps (How it works) ────────────────────────────────────────────── */
.dv-steps-section {
    background: var(--dv-surface-alt);
}

.dv-steps-row {
    display: flex;
    align-items: flex-start;
}

.dv-step-item {
    flex: 1;
    min-width: 0;
}

.dv-step-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--dv-green);
    color: #fff;
    font-family: var(--dv-font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.dv-step-connector {
    flex: 0 0 2.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--dv-green), var(--dv-green-light));
    margin-top: 2rem; /* aligns to vertical centre of 64px circle */
    opacity: 0.35;
    align-self: flex-start;
}

@media (max-width: 767px) {
    .dv-steps-row {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .dv-step-item {
        width: 100%;
        max-width: 320px;
    }

    .dv-step-connector {
        display: none;
    }
}

/* ── 10. CTA section ────────────────────────────────────────────────────── */
.dv-cta-section {
    background: #000000; /* Brand black — flat, no gradient */
    color: #fff;
}

.dv-cta-section h2,
.dv-cta-section h3,
.dv-cta-section h4 {
    color: #fff;
}

.dv-cta-section p {
    color: rgba(255, 255, 255, 0.88);
}

.dv-cta-tertiary,
.dv-cta-tertiary:hover {
    color: rgba(255, 255, 255, 0.65);
}

/* App download page — page-specific overrides */
.dv-app-section {
    min-height: 88vh;
}

.dv-app-section h1 {
    font-size: clamp(1.6rem, 5vw, 2.25rem);
}

.dv-app-tagline {
    max-width: 36ch;
    margin-inline: auto;
}


/* ── 10b. FAQ ───────────────────────────────────────────────────────────── */
.dv-faq-item {
    border: 1px solid var(--dv-card-border) !important;
    border-radius: var(--bs-border-radius-lg) !important;
    margin-bottom: 0.625rem;
    overflow: hidden;
    background: var(--dv-surface);
}

.dv-faq-btn {
    font-weight: 700;
    font-size: 1rem;
    color: var(--dv-text) !important;
    background: var(--dv-surface) !important;
    box-shadow: none !important;
    border: none;
    padding: 1.1rem 1.4rem;
    min-height: 52px;
    display: flex;
    align-items: center;
}

.dv-faq-btn:not(.collapsed) {
    color: var(--dv-green) !important;
    background: var(--dv-surface-alt) !important;
}

/* Override Bootstrap's accordion chevron in both light and dark mode */
.dv-faq-btn::after,
.dv-faq-btn:not(.collapsed)::after,
[data-bs-theme=dark] .dv-faq-btn::after,
[data-bs-theme=dark] .dv-faq-btn:not(.collapsed)::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A85A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A85A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e");
}

.dv-faq-body {
    font-size: 1rem;
    color: var(--dv-text);
    line-height: 1.8;
    padding: 0 1.4rem 1.5rem;
    background: var(--dv-surface);
}

/* Deep links (/what-grows/ → /faq/#faq2) target the collapse panel, so the
   browser's fragment scroll parks the question itself behind the sticky navbar.
   Native scroll-margin fixes the landing without any JS scroll-offset maths:
   navbar (~52px) + the question button (~52px) + breathing room. */
.dv-faq-accordion .accordion-collapse {
    scroll-margin-top: 8rem;
}

/* ── 11. Footer ─────────────────────────────────────────────────────────── */
.dv-footer {
    background: #000000; /* Brand black — same as navbar */
    color: rgba(255, 255, 255, 0.72);
    padding: 3rem 0 1.75rem;
}

.dv-footer-brand {
    font-family: var(--dv-font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
}

.dv-footer-brand img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.dv-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.dv-footer a:hover {
    color: var(--dv-green-light);
}

.dv-footer .dv-footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 1.75rem 0 1.25rem;
}

.dv-footer .dv-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dv-footer .dv-social-btn:hover {
    background: var(--dv-green);
    color: #fff;
}

/* ── 11b. Social share buttons ─────────────────────────────────────────── */
.dv-social-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.1rem;
    border-radius: 2rem;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    color: #fff !important;
    text-decoration: none;
    transition: opacity .15s ease, transform .12s ease;
    white-space: nowrap;
}

.dv-social-btn:hover {
    opacity: .85;
    transform: translateY(-1px);
}

.dv-social-btn i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dv-social-btn-wa {
    background: #25D366;
}

.dv-social-btn-wa:hover {
    background: #1fbd5a;
}

.dv-social-btn-fb {
    background: #1877F2;
}

.dv-social-btn-fb:hover {
    background: #0d69df;
}

.dv-social-btn-x {
    background: #1a1a1a;
}

.dv-social-btn-x:hover {
    background: #000;
}

/* ── 12. Share page cards ───────────────────────────────────────────────── */
.dv-share-strip {
    height: 4px;
    background: linear-gradient(90deg, var(--dv-green), var(--dv-green-light));
}

.dv-share-hero {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}

.dv-share-card {
    border: 1px solid var(--dv-card-border);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--dv-card-shadow);
}

.dv-profile-header {
    background: linear-gradient(135deg, var(--dv-green-dark) 0%, var(--dv-green) 100%);
    padding: 2rem 1.5rem;
    text-align: center;
}

.dv-profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    display: block;
    margin: 0 auto 0.75rem;
}

.dv-profile-avatar--brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 0;
}

.dv-crop-badge {
    background: rgba(0, 168, 90, 0.12);
    color: var(--dv-green);
    border: 1px solid rgba(0, 168, 90, 0.2);
    border-radius: 2rem;
    padding: 0.3em 0.8em;
    font-size: 0.8rem;
    font-weight: 600;
}

[data-bs-theme="dark"] .dv-crop-badge {
    background: rgba(0, 168, 90, 0.18);
    border-color: rgba(0, 168, 90, 0.3);
}

/* Hero wrap and placeholder */
.dv-share-hero-wrap {
    position: relative;
    background: linear-gradient(135deg, var(--dv-green-dark) 0%, var(--dv-green) 100%);
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
    overflow: hidden;
    min-height: 200px;
}

.dv-share-hero-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dv-share-hero-icon {
    font-size: 3.5rem;
    opacity: 0.85;
}

.dv-photo-count {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* Creator avatar */
.dv-creator-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dv-creator-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dv-green-pale);
    color: var(--dv-green);
    font-size: 1.2rem;
}

/* Profile avatar placeholder */
.dv-profile-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
}

/* ── 13. Error pages ────────────────────────────────────────────────────── */
.dv-error-code {
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 900;
    color: var(--dv-green);
    line-height: 1;
    font-family: var(--dv-font-heading);
}

.dv-error-icon {
    font-size: 3.5rem;
    color: var(--dv-green);
    opacity: 0.6;
}

/* ── 14. Contact form ───────────────────────────────────────────────────── */
/* Phone widget: country select capped so the number input gets most space */
.dv-phone-widget .dv-phone-country {
    max-width: 52%;
    flex: 0 0 auto;
}

.dv-phone-widget .dv-phone-dial {
    font-size: 0.9rem;
    min-width: 3.2rem;
    background: var(--dv-surface, #f0f4f1);
    color: var(--dv-green);
    border-color: var(--bs-border-color);
}

.dv-phone-widget .dv-phone-local {
    min-width: 0;
    flex: 1 1 auto;
}

/* ── 15. Article body (blog detail) — mobile-first ──────────────────────── */
.dv-article-body {
    /* Mobile: comfortable 18px reading baseline for rural users */
    font-family: var(--dv-font-body);
    font-size: 1.125rem;
    line-height: 1.95;
    color: var(--dv-text);
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Desktop: bump size + constrain line length for comfortable reading */
@media (min-width: 768px) {
    .dv-article-body {
        font-size: 1.1875rem;
        line-height: 1.9;
        max-width: 72ch; /* ~65–70 characters per line — optimal reading measure */
    }
}

.dv-article-body h2 {
    font-family: var(--dv-font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    margin: 2.5rem 0 0.75rem;
    color: var(--dv-text);
    border-bottom: 2px solid var(--dv-card-border);
    padding-bottom: 0.4rem;
}

@media (min-width: 768px) {
    .dv-article-body h2 {
        font-size: 1.625rem;
    }
}

.dv-article-body h3 {
    font-family: var(--dv-font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 2rem 0 0.6rem;
    color: var(--dv-green);
}

@media (min-width: 768px) {
    .dv-article-body h3 {
        font-size: 1.35rem;
    }
}

.dv-article-body h4 {
    font-weight: 600;
    font-size: 1.05rem;
    margin: 1.5rem 0 0.4rem;
    color: var(--dv-text);
}

.dv-article-body p {
    margin-bottom: 1.5rem;
}

.dv-article-body ul,
.dv-article-body ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.dv-article-body li {
    margin-bottom: 0.65rem;
    line-height: 1.8;
}

/* Images: full-width on mobile, constrained + rounded on desktop */
.dv-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    display: block;
}

/* Photo credit — the MCP pipeline emits "![…](…)\n*Photo: … / Pexels*" in one
   paragraph (sometimes with a hard <br>), so an <em> straight after an image
   is a caption: pull it up against the image and set it small and muted. */
.dv-article-body img + em,
.dv-article-body img + br + em {
    display: block;
    margin-top: -1.1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--dv-text-muted);
}

.dv-article-body img + br {
    display: none;
}

.dv-article-body blockquote {
    border-left: 4px solid var(--dv-green);
    padding: 0.75rem 1.1rem;
    margin: 1.5rem 0;
    background: var(--dv-green-pale);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: var(--dv-text-muted);
}

.dv-article-body pre {
    background: var(--dv-surface-alt);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.dv-article-body code {
    background: var(--dv-surface-alt);
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: var(--dv-green-dark);
}

.dv-article-body pre code {
    background: none;
    padding: 0;
    color: var(--dv-text);
}

.dv-article-body strong {
    color: var(--dv-text);
    font-weight: 700;
}

/* Links — visible brand green with accessible underline */
.dv-article-body a {
    color: var(--dv-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.dv-article-body a:hover {
    color: var(--dv-green-dark);
    text-decoration-thickness: 2px;
}

.dv-article-body hr {
    border-color: var(--dv-card-border);
    margin: 2.25rem 0;
}

/* Tables: scrollable on mobile */
.dv-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dv-article-body table th,
.dv-article-body table td {
    padding: 0.65rem 1rem;
    border: 1px solid var(--dv-card-border);
    text-align: left;
    white-space: nowrap;
}

.dv-article-body table th {
    background: var(--dv-surface-alt);
    color: var(--dv-text);
    font-weight: 600;
}

/* ── Dark mode article overrides ────────────────────────────────────────── */
[data-bs-theme="dark"] .dv-article-body a {
    color: var(--dv-green-light);
}

[data-bs-theme="dark"] .dv-article-body a:hover {
    color: #fff;
}

[data-bs-theme="dark"] .dv-article-body blockquote {
    color: var(--dv-text-muted);
}

[data-bs-theme="dark"] .dv-article-body code {
    color: var(--dv-green-light);
}

/* ── Article hero ────────────────────────────────────────────────────────── */
.dv-article-hero {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

@media (min-width: 576px) {
    .dv-article-hero {
        min-height: 300px;
    }
}

@media (min-width: 768px) {
    .dv-article-hero {
        min-height: 380px;
    }
}

.dv-article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .75) 100%);
    pointer-events: none;
}

.dv-article-hero-content {
    position: relative;
    z-index: 1;
    padding: 1.5rem 0;
}

@media (min-width: 768px) {
    .dv-article-hero-content {
        padding: 2rem 0;
    }
}

.dv-article-hero-tag {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .25em .75em;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22);
    transition: background .15s;
}

.dv-article-hero-tag:hover {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

.dv-article-hero-title {
    color: #fff;
    font-size: clamp(1.35rem, 4.5vw, 2.35rem);
    font-weight: 800;
    line-height: 1.22;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    margin: 0;
}

/* Article meta bar icons */
.dv-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color: var(--dv-text-muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--dv-card-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. About page
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.dv-about-hero {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--dv-card-border);
}

/* Problem section */
.dv-about-problem-section {
    background: var(--dv-surface);
}

/* Stat grid */
.dv-about-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dv-about-stat-card {
    background: var(--dv-surface);
    border: 1.5px solid var(--dv-card-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--dv-card-shadow);
}

.dv-about-stat-card--brand {
    background: var(--dv-green);
    border-color: var(--dv-green);
    color: #fff;
}

.dv-about-stat-num {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--dv-green);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.dv-about-stat-card--brand .dv-about-stat-num {
    color: #fff;
}

.dv-about-stat-label {
    font-size: .85rem;
    color: var(--dv-text-muted);
    line-height: 1.4;
}

.dv-about-stat-card--brand .dv-about-stat-label {
    color: rgba(255, 255, 255, .85);
}

/* Pillar cards */
.dv-about-pillar-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--dv-surface);
    border: 1.5px solid var(--dv-card-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--dv-card-shadow);
    height: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.dv-about-pillar-card:hover {
    border-color: var(--dv-text);
    box-shadow: var(--dv-card-hover-shadow);
}

.dv-about-pillar-card--wide {
    align-items: flex-start;
}

/* Brand mark inside a card — the logo carries its own colour, so it gets no
   tinted tile behind it the way .dv-about-pillar-icon glyphs do. Intrinsic
   width/height on the <img> plus auto height keeps the real aspect ratio. */
.dv-teaser-mark {
    width: 3.5rem;
    height: auto;
    flex-shrink: 0;
}

/* Stacked variant: icon (or image) above the text instead of beside it.
   The default row layout reserves a fixed 52px icon column for the full height
   of the card, which is fine in a two-across grid but leaves a tall empty
   gutter once cards get narrow — three-across, or any card carrying a real
   paragraph. Stack those so the text uses the whole width. */
.dv-about-pillar-card--stack {
    flex-direction: column;
    align-items: flex-start;
}

.dv-about-pillar-icon {
    width: 52px;
    height: 52px;
    border-radius: .875rem;
    background: var(--dv-green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--dv-green);
    flex-shrink: 0;
}

.dv-about-pillar-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dv-green);
    margin-bottom: .3rem;
}

.dv-about-pillar-title {
    font-size: 1.0625rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

/* Value cards */
.dv-about-value-card {
    padding: 2rem 1.5rem;
    background: var(--dv-surface);
    border: 1.5px solid var(--dv-card-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--dv-card-shadow);
    height: 100%;
}

.dv-about-value-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dv-green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--dv-green);
    margin: 0 auto 1.25rem;
}

.dv-about-value-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

/* Partnership section */
.dv-about-partner-section {
    background: var(--dv-surface);
}

.dv-about-partner-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.dv-about-partner-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: var(--dv-surface);
    border: 1.5px solid var(--dv-card-border);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--dv-text);
    box-shadow: var(--dv-card-shadow);
}

.dv-about-partner-pill i {
    color: var(--dv-green);
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. Features section — revamped pillars layout
   ═══════════════════════════════════════════════════════════════════════════ */

.dv-features-pillar {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
    background: var(--dv-surface);
    border: 1.5px solid var(--dv-card-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--dv-card-shadow);
    height: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.dv-features-pillar:hover {
    border-color: var(--dv-text);
    box-shadow: var(--dv-card-hover-shadow);
    transform: none;
}

.dv-features-pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    background: var(--dv-green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--dv-green);
    flex-shrink: 0;
}

.dv-features-pillar-kicker {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dv-green);
    margin-bottom: .25rem;
}

.dv-features-pillar h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: .4rem;
    line-height: 1.3;
}

.dv-features-pillar p {
    font-size: 1rem;
    color: var(--dv-gray);
    margin: 0;
    line-height: 1.6;
}

.dv-features-pillar-outcome {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--dv-green);
    margin-top: .75rem;
    padding: .3em .75em;
    background: var(--dv-green-pale);
    border-radius: 999px;
}


/* ── Product showcase rows (device ⇄ copy, zig-zag) ──────────────────────────── */
.dv-showcase-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
}

.dv-showcase-row + .dv-showcase-row {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.dv-showcase-row--reverse .dv-showcase-media {
    order: 2;
}

/* Soft brand glow behind the device for depth (best-in-class app showcase look) */
.dv-showcase-media {
    position: relative;
}

.dv-showcase-media::before {
    content: "";
    position: absolute;
    inset: 6% 18%;
    z-index: 0;
    background: radial-gradient(closest-side, rgba(0, 168, 90, .22), transparent 72%);
    filter: blur(26px);
}


.dv-showcase-h {
    font-family: var(--dv-font-heading);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    margin: .3rem 0 .6rem;
}

@media (max-width: 768px) {
    .dv-showcase-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .dv-showcase-media {
        order: -1 !important;
    }

    .dv-showcase-copy .dv-features-pillar-outcome {
        display: inline-flex;
    }
}

/* ── Centered search band (crop-check teaser) ────────────────────────────────── */
.dv-search-band {
    background: var(--dv-green-pale);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.25rem;
    padding: clamp(2rem, 5vw, 3.25rem);
    text-align: center;
}

[data-bs-theme="dark"] .dv-search-band {
    background: var(--dv-surface-alt);
}

.dv-search-band .dv-about-pillar-label {
    justify-content: center;
}

.dv-search-form {
    max-width: 540px;
    margin: 1.25rem auto 0;
}

/* ── Address typeahead dropdown (shared by /app/ grow form + home teaser) ─────── */
.dv-geo-suggest-wrap {
    position: relative;
}

.dv-geo-suggest {
    margin: .35rem 0 0;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    overflow: hidden;
    background: var(--dv-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.dv-geo-suggest-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .6rem .8rem;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--dv-text);
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
}

.dv-geo-suggest li:last-child .dv-geo-suggest-item {
    border-bottom: 0;
}

.dv-geo-suggest-item:hover,
.dv-geo-suggest-item:focus-visible {
    background: var(--dv-green-pale);
    color: var(--dv-green-dark);
    outline: none;
}

.dv-geo-suggest-item i {
    color: var(--dv-green);
    font-size: 1.05rem;
    margin-top: .1rem;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .dv-geo-suggest-item:hover,
[data-bs-theme="dark"] .dv-geo-suggest-item:focus-visible {
    color: var(--dv-green-light);
}

/* ── Focused tool wrap (the /app/ crop tool inside the website chrome) ────────── */
.dv-tool-wrap {
    max-width: 640px;
    margin: 0 auto;
}

/* ── App-download modal (includes/_app_modal.html) ───────────────────────────── */
/* Bootstrap's own modal, re-skinned through its CSS variables rather than by
   overriding its rules — so focus trap, backdrop and scroll lock stay stock. */
.dv-app-modal {
    --bs-modal-bg: var(--dv-surface);
    --bs-modal-color: var(--dv-text);
    --bs-modal-border-color: var(--dv-card-border);
    --bs-modal-border-radius: 1rem;
    --bs-modal-width: 33rem;
}

.dv-app-modal .modal-title {
    font-family: var(--dv-font-heading);
    font-weight: 800;
}

.dv-app-modal-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dv-text);
}

.dv-app-modal-list li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.dv-app-modal-list i {
    color: var(--dv-green);
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1.25;
}

.dv-app-modal-note {
    font-size: 0.85rem;
    color: var(--dv-text-muted);
    margin: 1.1rem 0 1rem;
    text-align: center;
}

/* ── Landing pages ────────────────────────────────────────────────────────────
   Shared by every page rendered from website/landings.py. Three components only:
   the pain band, the honesty card, and the enterprise band that used to live in
   an inline <style> on the home page and is now used in two places. */

.dv-pain-band {
    border-top: 1px solid var(--dv-card-border);
    border-bottom: 1px solid var(--dv-card-border);
    background: var(--dv-surface-alt);
}

/* Deliberately set in the heading face at body-copy weight: this paragraph has to
   read as the page speaking rather than as a pull quote decorating it. */
.dv-pain-text {
    font-family: var(--dv-font-heading);
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
    line-height: 1.5;
    font-weight: 700;
    color: var(--dv-text);
}

.dv-honesty-card {
    border: 1.5px solid var(--dv-card-border);
    border-left: 4px solid var(--dv-green);
    border-radius: 1rem;
    background: var(--dv-surface);
    padding: 1.5rem 1.75rem;
}

.dv-honesty-label {
    font-family: var(--dv-font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dv-green-accent);
    margin-bottom: 0.6rem;
}

.dv-enterprise-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border: 1.5px solid var(--dv-card-border);
    border-radius: 1rem;
    background: var(--dv-surface);
    padding: 1.5rem 1.75rem;
}

/* Features menu. The two children (diary, ledger) are indented so the menu reads
   as the hierarchy it is, rather than as nine flat siblings where two happen to
   be about the same thing. */
.dv-nav-dropdown {
    border: 1px solid var(--dv-card-border);
    border-radius: 0.75rem;
    padding: 0.4rem;
}

.dv-nav-dropdown .dropdown-item {
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.94rem;
}

.dv-nav-dropdown .dv-nav-subitem {
    padding-left: 1.9rem;
    font-weight: 500;
    opacity: 0.85;
}

/* The child rows hang off a hairline that stops at the last one, so the group
   reads as belonging to the hub above it. */
.dv-nav-dropdown .dv-nav-subitem::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--dv-card-border);
}

.dv-nav-dropdown li:has(.dv-nav-subitem) {
    position: relative;
}

/* ── Screenshot collage ───────────────────────────────────────────────────────
   Two or three pieces of real app UI arranged as one composition rather than
   stacked in flow. The rules, in order of how much they matter:

   1. DEPTH. The front card is bigger, sharper and casts a heavier shadow; the
      back card sits behind and away. Without a depth cue two overlapping cards
      read as a mistake.
   2. DIAGONAL. Items travel down-right, which is the direction a reader's eye
      already moves, so the second card is discovered rather than competed with.
   3. DRIFT. Each item breathes on its own long cycle (14–22s, staggered). Slow
      enough that you never catch it moving — you only notice the page is alive.

   All motion is off under prefers-reduced-motion; the composition itself is
   transform-only, so nothing reflows and nothing repaints outside its layer. */

.dv-collage {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    max-width: 100%;
}

/* A soft brand-green bloom behind the stack. Sized off the container so it never
   becomes a hard-edged circle on a wide screen. */
.dv-collage-glow {
    position: absolute;
    /* Bleeds vertically only. A negative horizontal inset made the bloom wider
       than its column and put a sliver of horizontal scroll on every landing at
       992px and 1200px — and clip-path does not help, because a clipped element
       still contributes its full box to scrollWidth. The softness comes from the
       gradient and the blur, not from being oversized. */
    inset: -14% 0;
    z-index: 0;
    background: radial-gradient(
        ellipse at 55% 40%,
        var(--dv-bloom-core) 0%,
        var(--dv-bloom-mid) 38%,
        transparent 68%
    );
    filter: blur(14px);
    animation: dv-bloom 19s ease-in-out infinite;
    pointer-events: none;
}

.dv-collage-item {
    position: relative;
    z-index: 1;
    margin: 0;
    animation: dv-drift 16s ease-in-out infinite;
    will-change: transform;
}

.dv-collage-item .dv-frag {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

/* ── Two items: the classic overlap ──────────────────────────────────────── */
.dv-collage--2 {
    grid-template-columns: 1fr;
    padding: 2.5rem 1rem 3.5rem;
}

.dv-collage--2 .dv-collage-item--1 {
    grid-area: 1 / 1;
    width: 66%;
    justify-self: start;
    align-self: start;
    transform: translate(0, -4%) rotate(-2.4deg);
    z-index: 1;
    filter: saturate(0.92) brightness(0.94);
}

.dv-collage--2 .dv-collage-item--2 {
    grid-area: 1 / 1;
    width: 62%;
    justify-self: end;
    align-self: end;
    transform: translate(0, 10%) rotate(2.2deg);
    z-index: 2;
    animation-delay: -7s;
}

/* ── Three items: a fan, back to front ───────────────────────────────────── */
.dv-collage--3 {
    grid-template-columns: 1fr;
    padding: 4.5rem 1rem 5.5rem;
}

.dv-collage--3 .dv-collage-item {
    grid-area: 1 / 1;
}

.dv-collage--3 .dv-collage-item--1 {
    width: 54%;
    justify-self: start;
    align-self: start;
    transform: translate(0, -30%) rotate(-3deg);
    z-index: 1;
    filter: saturate(0.86) brightness(0.9);
}

.dv-collage--3 .dv-collage-item--2 {
    width: 62%;
    justify-self: end;
    transform: translate(0, 0) rotate(2.4deg);
    z-index: 3;
    animation-delay: -6s;
}

.dv-collage--3 .dv-collage-item--3 {
    width: 50%;
    justify-self: start;
    align-self: end;
    transform: translate(4%, 32%) rotate(-1.6deg);
    z-index: 2;
    animation-delay: -11s;
    filter: saturate(0.94);
}

/* One item needs no arrangement — just presence. */
.dv-collage--1 .dv-collage-item {
    width: 78%;
    transform: rotate(-1.5deg);
}

/* The hero gets more room and a touch more attitude than a body row. */
.dv-collage--hero {
    min-height: 420px;
}

.dv-collage--hero .dv-collage-item--1 { filter: saturate(0.95) brightness(0.96); }

/* Shadows live on the image so they follow the rounded corners, and are heavier
   for the front card — that is most of the depth cue. */
.dv-collage-item--1 .dv-frag { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.dv-collage-item--2 .dv-frag { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55); }
.dv-collage-item--3 .dv-frag { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5); }

@keyframes dv-drift {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

@keyframes dv-bloom {
    0%, 100% { opacity: 0.75; scale: 1; }
    50%      { opacity: 1;    scale: 1.06; }
}

/* Below lg the collage stops overlapping: on a phone there is no room for depth,
   and two cards at 70% width on top of each other is unreadable. */
@media (max-width: 991.98px) {
    .dv-collage {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding: 0;
    }

    .dv-collage .dv-collage-item {
        width: min(100%, 420px) !important;
        transform: none !important;
        filter: none !important;
        justify-self: center !important;
    }

    .dv-collage-glow { inset: 0; }
}

/* ── "Works with" cards ───────────────────────────────────────────────────── */
.dv-works-section { background: var(--dv-surface-alt); }

.dv-works-card {
    display: block;
    height: 100%;
    position: relative;
    padding: 1.5rem 1.6rem;
    border: 1.5px solid var(--dv-card-border);
    border-radius: 1rem;
    background: var(--dv-surface);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dv-works-card:hover,
.dv-works-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--dv-green);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.dv-works-arrow {
    position: absolute;
    top: 1.4rem;
    right: 1.5rem;
    color: var(--dv-green-accent);
    font-weight: 800;
    transition: transform 0.18s ease;
}

.dv-works-card:hover .dv-works-arrow { transform: translateX(4px); }

.dv-works-title {
    font-family: var(--dv-font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dv-text);
    margin: 0 0 0.5rem;
    padding-right: 1.5rem;
}

.dv-works-why {
    color: var(--dv-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dv-collage-item,
    .dv-collage-glow { animation: none; }

    .dv-works-card,
    .dv-works-arrow { transition: none; }
}

/* ── Footer store buttons ─────────────────────────────────────────────────────
   Stacked under the social row in the brand column. Capped at the width of that
   column's tagline so the two pills stay button-shaped: `flex: 1 1 0` inside a
   full-width band stretched them to 1200px, which stops reading as a button. */
.dv-footer-stores {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 250px;
}

.dv-footer-stores .store-btn-footer {
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
    padding-inline: 1.1rem;
    font-size: 0.86rem;
}

/* On a phone the brand column is the full width, so cap it a little wider and
   let the two sit side by side when there is room for them. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .dv-footer-stores {
        flex-direction: row;
        max-width: 100%;
    }

    .dv-footer-stores .store-btn-footer {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ── Hero CTA pair ────────────────────────────────────────────────────────────
   The two buttons sit in a half-width column, so at btn-lg with generous padding
   their labels wrapped to two lines inside the pill at every width below xl —
   which reads as a broken button rather than a big one. Keep each label on one
   line and let the PAIR wrap instead, shrinking the type a little where the
   column is tightest. */
.dv-hero-cta .btn {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .dv-hero-cta .btn {
        font-size: 1rem;
        padding-inline: 1.35rem !important;
    }
}

/* Below sm the column is stacked and full width, so the buttons go full width
   too — a centred pill with air either side looks accidental on a phone. */
@media (max-width: 575.98px) {
    .dv-hero-cta .btn {
        width: 100%;
    }
}

/* ── Signature: field contours ────────────────────────────────────────────────
   The one graphic the site owns (see _contours.html for why). Whisper-quiet by
   design: the lines sit behind the hero at ~10% brand green and draw themselves
   once on load. If a visitor consciously notices them, they are too loud. */

.dv-contours {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Content above the lines. .dv-hero already has position:relative + overflow:hidden. */
.dv-hero > .container {
    position: relative;
    z-index: 1;
}

.dv-contour {
    fill: none;
    stroke: var(--dv-contour-stroke);
    stroke-width: 1.5;
    stroke-linecap: round;
    /* Longer than any path; the draw animation pulls it to zero. */
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: dv-contour-draw 2.6s cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.dv-contour--2 { animation-delay: 0.15s; stroke-opacity: 0.9; }
.dv-contour--3 { animation-delay: 0.3s;  stroke-opacity: 0.8; }
.dv-contour--4 { animation-delay: 0.45s; stroke-opacity: 0.65; }
.dv-contour--5 { animation-delay: 0.6s;  stroke-opacity: 0.5; }

.dv-contour-pin {
    fill: var(--dv-green-accent);
    opacity: 0;
    animation: dv-pin-settle 3s ease-out 2.2s forwards;
}

.dv-contour-pin--2 { animation-delay: 2.7s; }

@keyframes dv-contour-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes dv-pin-settle {
    0%   { opacity: 0; }
    30%  { opacity: 0.85; }
    100% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .dv-contour { animation: none; stroke-dashoffset: 0; }
    .dv-contour-pin { animation: none; opacity: 0.45; }
}

/* ── Verdict marks as page punctuation ────────────────────────────────────────
   The app speaks in three marks — ✓ grows well, ~ with care, ✕ not here — and
   the site borrows them as its own quiet system: the pain band is the ✕ (what
   farming without information costs), the honesty card is the ~ (true, with
   care), and the green dots on every promise pill are the ✓. */

.dv-pain-band {
    position: relative;
    overflow: hidden;
}

.dv-pain-band::before {
    content: "✕";
    position: absolute;
    left: 2%;
    top: 50%;
    translate: 0 -50%;
    font-family: var(--dv-font-heading);
    font-size: clamp(6rem, 14vw, 11rem);
    font-weight: 900;
    line-height: 1;
    color: var(--dv-text);
    opacity: 0.045;
    pointer-events: none;
}

.dv-honesty-label::before {
    content: "~";
    display: inline-block;
    margin-right: 0.45rem;
    font-size: 1.15em;
    font-weight: 900;
    transform: translateY(0.05em);
}

/* ── The Apple-grade small stuff ──────────────────────────────────────────────
   The details nobody praises and everybody feels: what text looks like when you
   select it, what a link looks like when you tab to it, the scrollbar on the
   site's own dark ground. */

::selection {
    background: rgba(12, 234, 123, 0.85);
    color: #0b110d;
}

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

@supports (scrollbar-color: auto) {
    html {
        scrollbar-color: rgba(12, 234, 123, 0.35) transparent;
        scrollbar-width: thin;
    }
}

/* ── Footer alignment with the page language ─────────────────────────────── */
.dv-footer {
    border-top: 1px solid rgba(12, 234, 123, 0.18);
}

.dv-footer-h {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dv-green-light);
    opacity: 0.75;
    margin-bottom: 0.6rem;
}

.dv-footer ul a {
    display: inline-block;
    transition: color 0.15s ease, translate 0.15s ease;
}

.dv-footer ul a:hover {
    translate: 2px 0;
}

/* ── Features menu, in the site's own surface language ───────────────────── */
.dv-nav-dropdown {
    background: #0d130f;
    min-width: 15rem;
    padding: 0.5rem;
    margin-top: 0.4rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.dv-nav-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.78);
    padding-block: 0.45rem;
}

.dv-nav-dropdown .dropdown-item:hover,
.dv-nav-dropdown .dropdown-item:focus-visible {
    color: #fff;
    background: rgba(0, 168, 90, 0.16);
}

.dv-nav-dropdown .dropdown-item.active {
    color: var(--dv-green-light);
    background: transparent;
    font-weight: 700;
}