/**
 * Home page — "classy" consistency layer (2026-10-02).
 * Presentation only: no text, links, forms or images change. Loaded last on the home page,
 * so removing the single <link> in includes/hp-head-assets.php fully rolls it back.
 *
 *  1. One heading typeface (the hero's) instead of a Fraunces / Segoe UI mix.
 *  2. One eyebrow (small label above headings) style across all sections.
 *  3. Calm benefit cards: white surface + one accent instead of four loud gradients.
 *  4. Module "Learn more" links in sentence case, not shouting capitals.
 *  5. Even vertical rhythm — sections no longer butt into each other; the Modules grid's dark
 *     bottom fade (which hung below the panel as a grey bar over "Customer stories") is removed.
 *  6. White panels (Modules, Partners, Demo) on the same 1290px rail as every other section.
 *  7. Footer call-to-action title readable on the navy band (was dark grey on navy).
 *  8. Section order tells one story (CSS `order` only — the HTML is untouched):
 *     Hero → Numbers → How it works → Before/after → Why Nipun → Modules → Apps → Use case →
 *     Onboarding steps → Customer stories → Certificates → Free demo (banner + form) → FAQ →
 *     Partner programme (agencies) last, since it is not for schools.
 */

/* ---- 1. Headings: one family, one weight ---- */
/* listed by section id: some sections set Fraunces through #id rules, which plain selectors cannot outrank */
html body.hp-home-page.hp-dynamics-ui main :is(#how-it-works, #solutions, #benefits, #modules, #testimonials, #resources, #partner-register, #streamline, #demo-register, #erp-connect) h2:not(.visually-hidden) {
    font-family: "Segoe UI", Figtree, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-style: normal !important;
}

/* ---- 2. Eyebrows: small, spaced capitals in one accent ---- */
html body.hp-home-page.hp-dynamics-ui main :is(.hp-dyn-eyebrow, .hp-modules-kicker, .hp-intl-eyebrow, .hp-dyn-usecase-eyebrow, .nl-kicker) {
    display: inline-block !important;
    margin-bottom: 0.85rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Figtree, system-ui, -apple-system, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    color: #4338ca !important;
}
/* on the dark (navy / teal) bands the accent must stay light */
html body.hp-home-page.hp-dynamics-ui main :is(#solutions, #streamline) :is(.hp-dyn-eyebrow, .hp-intl-eyebrow, .hp-dyn-usecase-eyebrow) {
    color: #a5d8ff !important;
}

/* ---- 3. Benefit cards: white, one accent each ---- */
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card {
    --s3-accent: #1e3a8a;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e5e9f0 !important;
    border-left: 4px solid var(--s3-accent) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px -12px rgba(15, 23, 42, 0.18) !important;
}
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card:nth-child(2) { --s3-accent: #2563eb; }
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card:nth-child(3) { --s3-accent: #16a34a; }
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card:nth-child(4) { --s3-accent: #ea580c; }
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card :is(h3, h4, strong, b) {
    color: #0b1a33 !important;
}
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card :is(p, span:not([class*="icon"])) {
    color: #475569 !important;
}
html body.hp-home-page.hp-dynamics-ui #benefits .hp-dyn-benefit-card :is(i, svg, [class*="icon"]) {
    color: var(--s3-accent) !important;
}

/* ---- 4. Module links: sentence case, quieter ---- */
html body.hp-home-page.hp-dynamics-ui #modules .hp-module-link {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.875rem !important;
}

/* ---- 5. Vertical rhythm between stacked sections ---- */
html body.hp-home-page.hp-dynamics-ui main > :is(#testimonials, #resources, #partner-register, #streamline, #demo-register) {
    margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}
html body.hp-home-page.hp-dynamics-ui main > #modules {
    padding-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}
/* the dark fade under the Modules grid hung 32px below the panel and showed as a grey bar */
html body.hp-home-page.hp-dynamics-ui #modules .hp-modules-wrap::after {
    display: none !important;
}
html body.hp-home-page.hp-dynamics-ui main > #demo-register {
    margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ---- 6. White panels share the 1290px content rail ---- */
@media (min-width: 901px) {
    html body.hp-home-page.hp-dynamics-ui main > :is(#modules, #partner-register, #demo-register) {
        box-sizing: border-box !important;
        width: 100% !important; /* main is a flex column (section 8): auto margins would otherwise shrink it */
        max-width: 1290px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ---- 7. Footer CTA title readable on navy ---- */
html body.hp-home-page .hp-footer-cta-title {
    color: #ffffff !important;
}

/* ---- 8. Section order: school-facing story first, agencies and credentials last ---- */
html body.hp-home-page.hp-dynamics-ui main {
    display: flex !important;
    flex-direction: column !important;
}
html body.hp-home-page.hp-dynamics-ui main > * { order: 50; } /* anything new keeps its place near the end */
html body.hp-home-page.hp-dynamics-ui main > #home { order: 0; }
html body.hp-home-page.hp-dynamics-ui main > .hp-dyn-bridge--hero-loop { order: 1; }
html body.hp-home-page.hp-dynamics-ui main > #proof { order: 2; }
html body.hp-home-page.hp-dynamics-ui main > #how-it-works { order: 3; }
html body.hp-home-page.hp-dynamics-ui main > #before-after { order: 4; }
html body.hp-home-page.hp-dynamics-ui main > #benefits { order: 5; }
html body.hp-home-page.hp-dynamics-ui main > #modules { order: 6; }
html body.hp-home-page.hp-dynamics-ui main > #apps { order: 7; }
html body.hp-home-page.hp-dynamics-ui main > .hp-dyn-bridge--hero-usecase { order: 8; }
html body.hp-home-page.hp-dynamics-ui main > #solutions { order: 9; }
html body.hp-home-page.hp-dynamics-ui main > .hp-dyn-bridge--usecase-getstarted { order: 10; }
html body.hp-home-page.hp-dynamics-ui main > #school-register { order: 11; }
html body.hp-home-page.hp-dynamics-ui main > #onboarding { order: 12; }
html body.hp-home-page.hp-dynamics-ui main > #testimonials { order: 13; }
html body.hp-home-page.hp-dynamics-ui main > #resources { order: 14; } /* credentials right before the ask */
html body.hp-home-page.hp-dynamics-ui main > #streamline { order: 15; }
html body.hp-home-page.hp-dynamics-ui main > #demo-register { order: 16; }
html body.hp-home-page.hp-dynamics-ui main > #home-faq { order: 17; }
html body.hp-home-page.hp-dynamics-ui main > #partner-register {
    order: 18;
    margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; /* breathing room before the partner logos */
}

/* ---- 9. "One school, one simple loop": captions beside the circle, not on top of it ----
   The two hand-written notes were absolutely positioned over the Grow/Admit arrows. Give them
   their own column right of the circle (circle keeps its size), point both arrows at it, and
   centre the copy against the graphic. Phones: one left-aligned column with full-width buttons. */
@media (min-width: 768px) {
    html body.hp-home-page.hp-dynamics-ui .nl-container {
        align-items: center !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-container > .nl-loop {
        --s3-circle: clamp(320px, 30vw, 440px);
        display: grid !important;
        grid-template-columns: var(--s3-circle) 9.5rem;
        column-gap: 0.75rem;
        width: calc(var(--s3-circle) + 9.5rem + 0.75rem) !important;
        max-width: none !important;
        height: var(--s3-circle) !important;
        aspect-ratio: auto !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-container {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-loop > .nl-svg {
        grid-column: 1;
        grid-row: 1;
        width: var(--s3-circle) !important;
        height: var(--s3-circle) !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-loop > .nl-halo {
        inset: auto !important;
        left: calc(var(--s3-circle) * 0.08) !important;
        top: calc(var(--s3-circle) * 0.08) !important;
        width: calc(var(--s3-circle) * 0.84) !important;
        height: calc(var(--s3-circle) * 0.84) !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-loop > .nl-loop-blobs {
        inset: auto !important;
        left: calc(var(--s3-circle) * -0.06) !important;
        top: calc(var(--s3-circle) * -0.06) !important;
        width: calc(var(--s3-circle) * 1.12) !important;
        height: calc(var(--s3-circle) * 1.12) !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-loop > .nl-notes {
        position: relative !important;
        inset: auto !important;
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        padding: 8% 0 10%;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-loop .nl-note {
        position: static !important;
        max-width: none !important;
        align-items: flex-start !important;
        text-align: left !important;
        font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
    }
    /* both arrows now lead back to the circle on the left */
    html body.hp-home-page.hp-dynamics-ui .nl-loop .nl-note--top .nl-note-arrow {
        transform: scaleX(-1);
    }
    html body.hp-home-page.hp-dynamics-ui .nl-loop .nl-note--bottom .nl-note-arrow {
        align-self: flex-start !important;
    }
}
@media (max-width: 1024px) {
    html body.hp-home-page.hp-dynamics-ui .nl-container > .nl-copy,
    html body.hp-home-page.hp-dynamics-ui .nl-copy :is(.nl-title, .nl-body) {
        text-align: left !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-container > .nl-copy {
        justify-self: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-actions {
        justify-content: flex-start !important;
    }
    html body.hp-home-page.hp-dynamics-ui .nl-trust {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 767px) {
    html body.hp-home-page.hp-dynamics-ui .nl-actions .nl-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}