/*
 * Repha premium landing-page refinement.
 * Load AFTER /css/site.css. This is an additive visual layer: it preserves
 * existing Blade markup, route behavior, localization, and design tokens.
 */

/* ---------- Global rhythm ---------- */
html {
    scroll-padding-top: calc(var(--mh-nav-h) + var(--mh-space-lg));
}

body {
    background: var(--mh-surface-container-low);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    width: min(100% - 2 * var(--mh-space-xl), var(--mh-container));
}

.section {
    /* Compacted landing: 56-72px shoulders instead of 64-128 so the page reads
       in fewer scrolls (visitors skim, they do not read all of it). */
    padding-block: clamp(2.85rem, 5.5vw, var(--mh-space-colossal));
}

.section__head {
    margin-bottom: clamp(1.75rem, 4vw, var(--mh-space-xxxl));
}

.section__head h2 {
    max-width: 18ch;
    text-wrap: balance;
}

/* ---------- Navigation: restrained, high-contrast, responsive ---------- */
.site-header {
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
}

.site-header:not(.is-solid):not(.is-open) {
    background: color-mix(in srgb, var(--mh-emerald-deep) 18%, transparent);
}

.site-header.is-solid,
.page--plain .site-header,
.site-header.is-open {
    background: color-mix(in srgb, var(--mh-surface) 94%, transparent);
    box-shadow: 0 1px 0 var(--mh-outline-variant);
}

.nav {
    gap: clamp(1rem, 2vw, var(--mh-space-xxl));
}

.brand {
    letter-spacing: -.035em;
    font-size: clamp(1.25rem, 1.4vw, 1.5rem);
}

.brand__mark {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-white) 32%, transparent), 0 5px 16px color-mix(in srgb, var(--mh-ink) 16%, transparent);
}

.nav-links {
    gap: clamp(1rem, 2vw, var(--mh-space-xxl));
}

.nav-links a:not(.mh-btn) {
    font-size: .94rem;
    transition: opacity var(--mh-m-quick) var(--mh-ease-quick);
}

.nav-links .mh-btn {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mh-ink) 14%, transparent);
}

.nav-toggle {
    border-radius: var(--mh-r-md);
}

.nav-toggle:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ---------- Hero: deeper emerald, more cinematic depth, clearer hierarchy ---------- */
.hero {
    isolation: isolate;
    background:
        radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--mh-emerald-bright) 23%, transparent), transparent 36%),
        radial-gradient(ellipse at 18% 92%, color-mix(in srgb, var(--mh-marigold) 9%, transparent), transparent 33%),
        var(--mh-gradient-brand);
    padding-top: calc(var(--mh-nav-h) + clamp(3.5rem, 7vw, 6rem));
    overflow: clip;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .17;
    background-image: radial-gradient(color-mix(in srgb, var(--mh-white) 55%, transparent) .7px, transparent .7px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 70%);
    mask-image: linear-gradient(100deg, transparent 5%, #000 70%);
}

.hero__grid {
    gap: clamp(2rem, 4vw, var(--mh-gutter));
    padding-bottom: clamp(5rem, 8vw, 7.5rem);
}

.hero__copy {
    gap: clamp(1.15rem, 2.1vw, var(--mh-space-xl));
    position: relative;
    z-index: 1;
}

.hero h1 {
    max-width: 11.5ch;
    font-size: clamp(2.65rem, 1.25rem + 3.7vw, 4.65rem);
    line-height: 1.12;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.hero .lead {
    max-width: 31rem;
    font-size: clamp(1.05rem, .9rem + .55vw, 1.3rem);
    line-height: 1.72;
}

.hero__note {
    display: flex;
    align-items: center;
    gap: var(--mh-space-sm);
    font-size: var(--mh-fs-body);
    font-weight: 600;
}

.hero__note::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--mh-mint);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mh-mint) 15%, transparent);
}

.hero .store-badges {
    margin-top: var(--mh-space-xs);
    gap: var(--mh-space-md);
}

.hero .store-badge {
    min-height: 54px;
    padding-inline: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--mh-white) 22%, transparent);
    background: color-mix(in srgb, var(--mh-white) 9%, transparent);
    border-radius: var(--mh-r-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform var(--mh-m-quick) var(--mh-ease-quick), background-color var(--mh-m-quick) var(--mh-ease-quick), border-color var(--mh-m-quick) var(--mh-ease-quick);
}

.hero .store-badge:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--mh-white) 15%, transparent);
    border-color: color-mix(in srgb, var(--mh-white) 38%, transparent);
}

.hero .store-badge:active {
    transform: translateY(0) scale(.985);
}

.hero__demo {
    z-index: 1;
    min-width: 0;
}

.hero__demo::before {
    inset: -9%;
    opacity: .85;
    filter: blur(12px);
}

.demo {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mh-white) 22%, transparent);
    border-radius: clamp(1.25rem, 2.2vw, 2rem);
    background: linear-gradient(145deg, color-mix(in srgb, var(--mh-white) 12%, transparent), color-mix(in srgb, var(--mh-white) 4%, transparent));
    box-shadow: 0 30px 80px color-mix(in srgb, var(--mh-night-haat) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--mh-white) 22%, transparent);
    transform: translateZ(0);
}

.demo svg {
    position: relative;
    z-index: 1;
}

.hero .mh-awning {
    filter: drop-shadow(0 -1px 0 color-mix(in srgb, var(--mh-white) 10%, transparent));
}

/* ---------- Section heading and content surfaces ---------- */
.page--hero .section__head h2 {
    letter-spacing: -.035em;
}

.ba {
    border: 1px solid var(--mh-outline-variant);
    border-radius: var(--mh-r-xl);
    box-shadow: 0 16px 45px color-mix(in srgb, var(--mh-ink) 6%, transparent);
}

.ba__side {
    padding: clamp(1.35rem, 3vw, 2.5rem);
    gap: var(--mh-space-xl);
}

.ba__side--before {
    background: var(--mh-surface-container);
}

.ba__side--after {
    background: linear-gradient(145deg, var(--mh-primary-container), var(--mh-surface));
}

.ba__tag {
    padding: 5px 13px;
    letter-spacing: .01em;
}

.ba li {
    line-height: 1.55;
    gap: .7rem;
}

.ba__side--before li svg,
.ba__side--after li svg {
    margin-top: .15em;
    width: 21px;
    height: 21px;
}

/* ---------- How it works: tactile segmented control and premium step cards ---------- */
.lane-toggle {
    display: flex;
    width: fit-content;
    max-width: 100%;
    background: var(--mh-surface-container);
    border: 1px solid var(--mh-outline-variant);
    border-radius: var(--mh-r-lg);
    box-shadow: none;
    padding: 5px;
    gap: 5px;
}

.lane-toggle button {
    min-width: clamp(8rem, 18vw, 12rem);
    min-height: 48px;
    border-radius: calc(var(--mh-r-lg) - 5px);
    transition: color var(--mh-m-quick) var(--mh-ease-quick), background-color var(--mh-m-quick) var(--mh-ease-quick), box-shadow var(--mh-m-quick) var(--mh-ease-quick), transform var(--mh-m-instant) var(--mh-ease-instant);
}

.lane-toggle button[aria-selected="true"] {
    background: var(--mh-surface);
    color: var(--mh-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mh-ink) 10%, transparent), inset 0 0 0 1px var(--mh-outline-variant);
}

.lane-toggle button:active {
    transform: scale(.985);
}

.steps {
    gap: clamp(1rem, 2vw, var(--mh-gutter));
    align-items: stretch;
}

.step {
    min-width: 0;
    padding: clamp(.8rem, 1.5vw, 1.25rem);
    border: 1px solid var(--mh-outline-variant);
    border-radius: var(--mh-r-lg);
    background: var(--mh-surface);
    box-shadow: 0 5px 18px color-mix(in srgb, var(--mh-ink) 4%, transparent);
    transition: transform var(--mh-m-quick) var(--mh-ease-quick), box-shadow var(--mh-m-quick) var(--mh-ease-quick), border-color var(--mh-m-quick) var(--mh-ease-quick);
}

.step:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mh-primary) 38%, var(--mh-outline-variant));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--mh-ink) 8%, transparent);
}

.step__frame {
    position: relative;
    width: 100%;
    max-width: 190px;
    margin-inline: auto;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--mh-white) 22%, transparent);
    border-radius: 1.65rem;
    background: var(--mh-ink);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--mh-ink) 15%, transparent);
}

.step__frame::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 24%;
    height: 5px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--mh-on-surface) 48%, transparent);
}

.step__screen {
    position: relative;
    border-radius: 1.25rem;
    background: radial-gradient(ellipse at 50% 38%, var(--mh-primary-container), var(--mh-surface-container-low) 72%);
}

.step__screen img {
    border-radius: inherit;
}

.step__icon {
    width: 36%;
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--mh-primary) 15%, transparent));
}

.step h3 {
    font-size: clamp(1.05rem, 1vw + .65rem, 1.25rem);
    line-height: 1.4;
    text-wrap: balance;
}

.step h3::before {
    font-variant-numeric: tabular-nums;
}

.step p {
    font-size: var(--mh-fs-small);
    line-height: 1.7;
}

/* ---------- Company stall wall ---------- */
.stall-wall {
    padding-block: var(--mh-space-xs);
}

.stall-wall__track {
    gap: var(--mh-space-xl);
}

/* The wall is a plain catalogue of marks: no cards, no shadows — the logo
   floats on the emerald wall, with the name as its label beneath it. */
.stall-wall .mh-stall {
    min-width: clamp(148px, 17vw, 190px);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    justify-items: center;
    align-content: center;
    transition: transform var(--mh-m-quick) var(--mh-ease-quick);
}

.stall-wall .mh-stall:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

.stall-wall .mh-stall__name {
    margin-top: var(--mh-space-xs);
    font-size: var(--mh-fs-small);
    font-weight: 600;
    color: color-mix(in srgb, var(--mh-white) 80%, transparent);
}

.stall-wall .mh-stall__avatar {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-white) 24%, transparent);
}

.stall-wall__caption {
    max-width: var(--mh-measure);
    font-size: clamp(1.1rem, 1vw + .8rem, 1.45rem);
    line-height: 1.55;
}

/* ---------- Trust section ---------- */
.trust {
    position: relative;
    overflow: hidden;
    background: linear-gradient(130deg, var(--mh-secondary-container), color-mix(in srgb, var(--mh-secondary-container) 62%, var(--mh-surface)));
}

.trust::before {
    content: "";
    position: absolute;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    inset-inline-end: -10rem;
    top: -13rem;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--mh-secondary) 14%, transparent);
    box-shadow: 0 0 0 2.5rem color-mix(in srgb, var(--mh-secondary) 4%, transparent), 0 0 0 5rem color-mix(in srgb, var(--mh-secondary) 3%, transparent);
}

.trust__grid {
    position: relative;
    z-index: 1;
    gap: clamp(2rem, 5vw, 5rem);
}

.trust .stack {
    gap: var(--mh-space-xl);
}

.trust .badges {
    gap: var(--mh-space-lg);
}

.trust .badges li {
    line-height: 1.6;
}

.rep-card {
    border: 1px solid color-mix(in srgb, var(--mh-secondary) 13%, var(--mh-outline-variant));
    box-shadow: 0 24px 60px color-mix(in srgb, var(--mh-ink) 10%, transparent);
    padding: clamp(1.4rem, 3vw, 2.25rem);
}

.rep-card__avatar {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mh-white) 24%, transparent);
}

.rep-card__badges span {
    padding: 6px 9px;
    border-radius: var(--mh-r-sm);
    background: var(--mh-secondary-container);
}

/* ---------- Companies: dark, focused partner CTA ---------- */
.night {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at 88% 15%, color-mix(in srgb, var(--mh-primary) 20%, transparent), transparent 35%), var(--mh-night-haat);
}

.night::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background-image: linear-gradient(color-mix(in srgb, var(--mh-white) 20%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--mh-white) 20%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(120deg, transparent, #000);
    mask-image: linear-gradient(120deg, transparent, #000);
}

.night__grid {
    position: relative;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.night h2 {
    max-width: 15ch;
    text-wrap: balance;
}

.night .lead {
    /* The band is dark in both themes: --mh-on-inverse-surface turned dark in
       dark mode and the paragraph vanished. */
    color: color-mix(in srgb, var(--mh-white) 85%, transparent);
}

.night .form {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--mh-white) 13%, transparent);
    border-radius: var(--mh-r-xl);
    background: color-mix(in srgb, var(--mh-white) 5%, transparent);
    box-shadow: 0 22px 55px color-mix(in srgb, var(--mh-night-haat) 22%, transparent);
}

.night .form label {
    color: var(--mh-on-surface);
}

.night .form input,
.night .form textarea {
    background: color-mix(in srgb, var(--mh-night-haat) 60%, var(--mh-surface-container));
    border-color: color-mix(in srgb, var(--mh-white) 18%, transparent);
    border-radius: var(--mh-r-md);
}

.night .form input:focus,
.night .form textarea:focus {
    border-color: var(--mh-mint);
}

.night .form .mh-btn {
    width: 100%;
    margin-top: var(--mh-space-xs);
}

/* ---------- FAQ: quiet, tactile disclosure cards ---------- */
.faq {
    gap: var(--mh-space-md);
}

.faq details {
    border: 1px solid var(--mh-outline-variant);
    box-shadow: none;
    border-radius: var(--mh-r-lg);
    padding: 0;
    overflow: clip;
    transition: border-color var(--mh-m-quick) var(--mh-ease-quick), background-color var(--mh-m-quick) var(--mh-ease-quick);
}

.faq details:hover {
    border-color: color-mix(in srgb, var(--mh-primary) 38%, var(--mh-outline-variant));
}

.faq summary {
    position: relative;
    align-items: center;
    min-height: 66px;
    padding: var(--mh-space-lg) var(--mh-space-xl);
    line-height: 1.55;
}

.faq summary::after {
    content: "+";
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mh-primary-container);
    color: var(--mh-on-primary-container);
    font-size: 1.2rem;
    line-height: 1;
    transition: transform var(--mh-m-quick) var(--mh-ease-quick);
}

.faq details[open] summary::after {
    content: "−";
    transform: rotate(180deg);
}

.faq details p {
    padding: 0 var(--mh-space-xl) var(--mh-space-xl);
    max-width: 70ch;
    line-height: 1.8;
}

/* ---------- Final CTA: strong finish without another gradient ---------- */
.final {
    background: var(--mh-surface);
    border-top: 1px solid var(--mh-outline-variant);
}

.final__inner {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.final h2 {
    max-width: 18ch;
    text-wrap: balance;
}

.final .store-badges {
    justify-content: center;
}

.final .store-badge {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mh-ink) 10%, transparent);
    transition: transform var(--mh-m-quick) var(--mh-ease-quick), box-shadow var(--mh-m-quick) var(--mh-ease-quick);
}

.final .store-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--mh-ink) 15%, transparent);
}

.qr {
    border: 1px solid var(--mh-outline-variant);
}

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
}

.site-footer::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--mh-emerald-bright), var(--mh-primary), var(--mh-emerald-deep));
}

.site-footer .cols {
    gap: clamp(2rem, 5vw, 5rem);
}

.site-footer a {
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 4px;
}

.site-footer a:hover {
    text-decoration-color: currentColor;
}

/* ---------- The rep side: the value a company rep gets ---------- */
.reps__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mh-space-lg);
    margin-top: var(--mh-space-xxl);
}

.reps__cta .mh-btn {
    flex: none;
}

/* ---------- Responsive polish ---------- */
@media (min-width: 1200px) {
    .hero__grid {
        min-height: min(720px, calc(100svh - var(--mh-nav-h)));
    }

    .demo {
        max-width: 680px;
        margin-inline-start: auto;
    }
}

@media (max-width: 900px) {
    .hero {
        padding-top: calc(var(--mh-nav-h) + var(--mh-space-xxxl));
    }

    .hero__grid {
        row-gap: var(--mh-space-xxxl);
        padding-bottom: calc(var(--mh-space-huge) + var(--mh-space-xl));
    }

    .hero__copy {
        max-width: 42rem;
    }

    .hero h1 {
        max-width: 12ch;
        font-size: clamp(2.7rem, 7vw, 4rem);
    }

    .hero__demo {
        width: min(100%, 680px);
        margin-inline: auto;
    }

    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step__frame {
        max-width: 210px;
    }
}

@media (max-width: 600px) {
    .wrap {
        width: min(100% - 2 * var(--mh-space-lg), var(--mh-container));
    }

    .section {
        padding-block: 2.3rem;
    }

    .section__head {
        margin-bottom: var(--mh-space-xl);
    }

    .hero {
        padding-top: calc(var(--mh-nav-h) + 2.25rem);
    }

    .hero__grid {
        gap: var(--mh-space-xxl);
        padding-bottom: 4.5rem;
    }

    .hero__copy {
        gap: var(--mh-space-lg);
    }

    .hero h1 {
        max-width: 13ch;
        font-size: clamp(2.35rem, 9.2vw, 3.35rem);
        line-height: 1.15;
        letter-spacing: -.035em;
    }

    .hero .lead {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .hero .store-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--mh-space-sm);
    }

    .hero .store-badge {
        justify-content: center;
        padding-inline: .65rem;
        min-height: 50px;
        font-size: .91rem;
    }

    .demo {
        border-radius: var(--mh-r-lg);
    }

    .ba__side {
        padding: var(--mh-space-xl);
    }

    .lane-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .lane-toggle button {
        min-width: 0;
        padding-inline: var(--mh-space-md);
    }

    .steps {
        gap: var(--mh-space-md);
    }

    .step {
        padding: var(--mh-space-sm);
        gap: var(--mh-space-sm);
    }

    .step__frame {
        padding: 5px;
        border-radius: 1.1rem;
    }

    .step__frame::before {
        top: 8px;
        height: 4px;
    }

    .step__screen {
        border-radius: .85rem;
        padding: var(--mh-space-sm);
    }

    .step h3 {
        font-size: 1rem;
    }

    .step p {
        font-size: .875rem;
    }

    .trust__grid,
    .night__grid {
        gap: var(--mh-space-xxl);
    }

    .night .form {
        padding: var(--mh-space-lg);
    }

    .faq summary {
        padding: var(--mh-space-md) var(--mh-space-lg);
        min-height: 60px;
    }

    .faq details p {
        padding-inline: var(--mh-space-lg);
    }

    .site-footer .cols {
        gap: var(--mh-space-xl);
    }
}

@media (max-width: 380px) {
    .steps {
        grid-template-columns: 1fr;
    }

    .step {
        padding: var(--mh-space-lg);
    }

    .step__frame {
        max-width: 190px;
    }

    .hero .store-badges {
        grid-template-columns: 1fr;
    }
}

/* Respect the user's motion preference across the new hover and transition effects. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .step:hover,
    .mh-stall:hover,
    .hero .store-badge:hover,
    .final .store-badge:hover {
        transform: none;
    }
}

/* ---------- The photographic layer (docs/landing_page_plan, 2026-10) ----------
   Real-world Bangladesh pharmacy photography and locale-matched app screens on
   the landing page. Photos are illustrative scenes; no subject is presented as
   a Repha customer, rep or testimonial. Every image carries intrinsic sizing
   so nothing shifts; only the hero photo is eager, the rest are lazy. ---------- */

/* Hero: the local pharmacy photograph sits full-bleed behind the copy (visual
   reference: headline on an emerald scrim, the scene reading through on the
   right). The photo element stays in the DOM for the real LCP image. */
.hero--photo {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--mh-emerald-deep);
    padding-block: 0;
}

.hero--photo .hero__grid {
    position: relative;
    z-index: 1;
    align-content: center;
    min-height: min(660px, calc(92svh - var(--mh-nav-h)));
    padding-block: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    /* Background again, like the hero photograph before: the full-bleed video
       behind the copy. The crop window holds both faces and the two phones;
       the lowered veil from the photograph round keeps the copy readable. */
    object-fit: cover;
    object-position: 50% 30%;
}

/* The photo reads through: the flat veil is gone and only a soft diagonal
   shadow remains, strongest at the left edge where the copy starts and fading
   to nothing across the shelves. The precise darkness sits behind the copy in
   .hero__copy::below, so the text stays readable without tinting the scene. */
.hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--mh-emerald-deep) 56%, transparent) 0%,
        color-mix(in srgb, var(--mh-emerald-deep) 44%, transparent) 36%,
        color-mix(in srgb, var(--mh-emerald-deep) 18%, transparent) 55%,
        color-mix(in srgb, var(--mh-emerald-deep) 4%, transparent) 72%,
        transparent 88%);
}

.hero--photo .hero__copy {
    position: relative;
}

/* The local vignette: a blurred pool of darkness exactly behind the headline,
   lead and badges. It does the AA work so the veil on the photo itself can
   stay light enough for the scene to read. */
.hero--photo .hero__copy::before {
    content: "";
    position: absolute;
    inset: -20% -24% -16%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 58% 54% at 42% 46%,
        color-mix(in srgb, var(--mh-emerald-deep) 58%, transparent),
        transparent 74%);
}

/* A whisper of text shadow keeps white letters crisp over the busy shelves
   even where the veil is at its lightest. */
.hero--photo .hero__copy :is(h1, .lead, .hero__note) {
    text-shadow:
        0 1px 2px color-mix(in srgb, var(--mh-emerald-deep) 70%, transparent),
        0 2px 18px color-mix(in srgb, var(--mh-emerald-deep) 55%, transparent);
}

/* The copy column widens: the photo is no longer a column beside it. */
.hero--photo .hero__copy {
    grid-column: 2 / 9;
    max-width: 60ch;
}

/* The demo, now the "watch it" moment in the problem section: light surfaces,
   since it has left the dark hero band. */
.demo-band {
    display: grid;
    gap: var(--mh-space-lg);
    justify-items: center;
    margin-bottom: var(--mh-space-xxxl);
}

.demo-band .demo {
    width: min(560px, 100%);
    /* Undo the ≥1200px hero rule (`margin-inline-start: auto`) that was scoped
       to the demo in the hero column. */
    margin-inline: 0;
    background: var(--mh-surface);
    border-color: var(--mh-outline-variant);
    box-shadow: 0 16px 45px color-mix(in srgb, var(--mh-ink) 6%, transparent);
}

.demo-band__note {
    color: var(--mh-on-surface-variant);
    text-align: center;
    max-width: var(--mh-measure);
}

/* The "before" side gets the counter photograph: the khata, the paper list and
   the phone, exactly what the copy describes. It fills its side of the strip:
   a small photo in one corner left half of each panel empty. */
.ba__art {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--mh-r-lg);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--mh-ink) 10%, transparent);
}

/* The two audiences: full-width photo-left feature rows with copy and a small
   app screen (visual reference pattern). */
/* The two audiences sit side by side in one row (no stacked column), each a
   self-contained card: photo left, copy right. The phone mockups were removed —
   the how-it-works section right below shows the real screens. */
.aud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mh-gutter);
}

.aud__row {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    align-items: center;
    background: var(--mh-surface);
    border: 1px solid var(--mh-outline-variant);
    border-radius: var(--mh-r-xl);
    box-shadow: 0 16px 45px color-mix(in srgb, var(--mh-ink) 6%, transparent);
    overflow: clip;
    transition: box-shadow var(--mh-m-quick) var(--mh-ease-quick), border-color var(--mh-m-quick) var(--mh-ease-quick);
}

.aud__row:hover {
    border-color: color-mix(in srgb, var(--mh-primary) 38%, var(--mh-outline-variant));
    box-shadow: 0 22px 55px color-mix(in srgb, var(--mh-ink) 9%, transparent);
}

.aud__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 216px;
    object-fit: cover;
    object-position: 50% 30%;
}

.aud__body {
    display: grid;
    gap: var(--mh-space-md);
    align-content: center;
    padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.7rem) clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.8vw, 1.9rem);
}

.aud__body .mh-btn {
    justify-self: start;
    margin-top: var(--mh-space-xs);
}

.aud__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--mh-space-md);
}

.aud__list li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    line-height: 1.55;
}

.aud__list svg {
    flex: none;
    width: 21px;
    height: 21px;
    margin-top: .15em;
    fill: var(--mh-primary);
}

/* কেন Repha? — the compact value strip right after the hero. */
.why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--mh-gutter);
}

.why__card {
    display: grid;
    gap: var(--mh-space-md);
    align-content: start;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    background: var(--mh-surface-container);
    border: 1px solid var(--mh-outline-variant);
    border-radius: var(--mh-r-lg);
    transition: transform var(--mh-m-quick) var(--mh-ease-quick), border-color var(--mh-m-quick) var(--mh-ease-quick);
}

.why__card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mh-primary) 38%, var(--mh-outline-variant));
}

.why__card h3 {
    font-size: 1.02rem;
}

.why__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--mh-primary);
    color: var(--mh-on-primary);
}

.why__icon svg,
.why__icon .mh-icon {
    width: 23px !important;
    height: 23px !important;
    fill: currentColor;
}

/* The stat band: a quiet Dhaka dusk under a deep emerald veil, text white and
   high-contrast (landing plan §7). */
.haat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--mh-white);
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--mh-emerald-deep) 82%, transparent),
            color-mix(in srgb, var(--mh-night-haat) 88%, transparent)),
        url("../img/site/repha-dhaka-skyline.webp") center 42% / cover no-repeat;
}

.haat h2 {
    color: var(--mh-white);
}

.haat .small {
    color: color-mix(in srgb, var(--mh-white) 75%, transparent);
}

.haat .stall-wall__caption {
    color: color-mix(in srgb, var(--mh-white) 92%, transparent);
}

/* The dark companies band gains the office scene, faint under the grid overlay. */
.night::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: url("../img/site/repha-company-office.webp") center / cover no-repeat;
    opacity: .14;
    -webkit-mask-image: linear-gradient(120deg, #000, transparent);
    mask-image: linear-gradient(120deg, #000, transparent);
}

/* The final CTA: bookend to the hero, copy left and photo right. */
.final__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    gap: clamp(2rem, 5vw, var(--mh-space-xxxl));
    align-items: center;
}

.final__copy {
    display: grid;
    justify-items: start;
    gap: var(--mh-space-lg);
    padding: clamp(1.25rem, 3vw, 2.25rem) 0;
}

.final__copy .store-badges {
    justify-content: start;
}

/* The two store QR codes take the photograph's old slot: Google Play and the
   App Store (or, until the iOS link ships, the any-phone /download QR). */
.qr-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mh-space-lg);
    max-width: 420px;
}

.qr-card {
    display: grid;
    gap: var(--mh-space-sm);
    justify-items: center;
    padding: var(--mh-space-md);
    background: var(--mh-surface);
    border: 1px solid var(--mh-outline-variant);
    border-radius: var(--mh-r-lg);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--mh-ink) 7%, transparent);
}

.qr-card .qr {
    width: 128px;
    height: 128px;
}

.qr-card span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    font-weight: 600;
}

.qr-card span svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

@media (max-width: 900px) {
    /* Hero: the scrim goes vertical so the copy keeps AA contrast over the photo. */
    .hero--photo .hero__copy {
        grid-column: 1 / -1;
    }

    .hero--photo::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--mh-emerald-deep) 50%, transparent) 0%,
            color-mix(in srgb, var(--mh-emerald-deep) 28%, transparent) 38%,
            color-mix(in srgb, var(--mh-emerald-deep) 30%, transparent) 58%,
            color-mix(in srgb, var(--mh-emerald-deep) 72%, transparent) 100%);
    }

    /* Full-width copy: widen the vignette and centre it on the text block. */
    .hero--photo .hero__copy::before {
        inset: -14% -4% -10%;
        background: radial-gradient(ellipse 82% 56% at 50% 46%,
            color-mix(in srgb, var(--mh-emerald-deep) 54%, transparent),
            transparent 78%);
    }

    /* Below 900px a landscape video cannot sit uncropped beside the copy, so
       it goes back to covering the hero; the veil keeps the copy readable. */
    .hero__bg {
        inset: 0;
        width: 100%;
        object-fit: cover;
        object-position: 50% 26%;
    }

    .aud {
        grid-template-columns: 1fr;
    }

    .aud__row {
        grid-template-columns: 1fr;
    }

    .aud__photo {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .aud__body {
        padding: clamp(1.35rem, 3vw, 2.25rem);
    }

    .final__grid {
        grid-template-columns: 1fr;
    }

    .qr-duo {
        max-width: 420px;
        margin-inline: auto;
    }

    .final__copy {
        padding: 0 0 clamp(2rem, 5vw, 4rem);
        justify-items: center;
        text-align: center;
    }

    .final__copy .store-badges {
        justify-self: center;
    }
}

/* ---------- Error pages (403, 404, 500, 503) ---------- */
/* The haat after hours: the Night Haat panel with the code, and the memo slip
   with the way out (DESIGN.md §9.4, §11). */

/* The page is one column: the header on top, the error in the middle of the
   screen, the footer always at the foot of the page. */
.error-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.error-page main {
    flex: 1 1 auto;
    display: flex;
    padding-block: var(--mh-space-huge);
}

/* `margin: auto` centres the block and still lets a long page scroll up
   (a centred flex item would be cut off at the top). */
.error {
    display: grid;
    gap: var(--mh-space-xxl);
    padding-block: 0;
    margin: auto;
    width: min(100% - 2 * var(--mh-space-xl), 860px);
}

.error__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: var(--mh-space-lg);
    justify-items: start;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    border-radius: var(--mh-r-xl);
    color: var(--mh-white);
    background: radial-gradient(ellipse at 88% 8%, color-mix(in srgb, var(--mh-primary) 55%, transparent), transparent 42%), var(--mh-night-haat);
    box-shadow: var(--mh-e3);
}

/* The faint market grid behind the panel. */
.error__hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .1;
    background-image: linear-gradient(color-mix(in srgb, var(--mh-white) 20%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--mh-white) 20%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(120deg, transparent, #000);
    mask-image: linear-gradient(120deg, transparent, #000);
}

.error__code {
    margin: 0;
    font-family: var(--mh-font-display);
    font-size: clamp(3.5rem, 11vw, 6.5rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.03em;
    color: var(--mh-mint);
    text-shadow: 0 0 46px color-mix(in srgb, var(--mh-mint) 30%, transparent);
}

/* In the dark theme the page is the night market as well, so the panel is
   lifted one step instead of vanishing into the background. */
@media (prefers-color-scheme: dark) {
    :root[data-mh-auto-dark] .error__hero {
        background: radial-gradient(ellipse at 88% 8%, color-mix(in srgb, var(--mh-primary) 45%, transparent), transparent 42%), var(--mh-surface-container);
    }
}

.error__hero h1 {
    margin: 0;
    font-family: var(--mh-font-display);
    font-size: var(--mh-fs-h2);
    line-height: var(--mh-lh-h2);
    font-weight: var(--mh-fw-h2);
    text-wrap: balance;
}

.error__hero .lead {
    color: color-mix(in srgb, var(--mh-white) 84%, transparent);
}

.error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mh-space-md);
    margin-top: var(--mh-space-xs);
}

.error__hero .mh-btn--ghost {
    color: var(--mh-white);
    border-color: color-mix(in srgb, var(--mh-white) 38%, transparent);
}

.error__hero .mh-btn--ghost:hover {
    background: color-mix(in srgb, var(--mh-white) 12%, transparent);
}

/* The memo slip with the links under the panel. */
.error__memo {
    display: grid;
    gap: var(--mh-space-md);
    justify-items: start;
}

.error__memo__title {
    margin: 0;
    color: var(--mh-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8125rem;
}

.error__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--mh-space-md);
}

.error__links li {
    display: flex;
    align-items: center;
    gap: var(--mh-space-md);
}

.error__links svg {
    flex: none;
    width: 22px;
    height: 22px;
    fill: var(--mh-primary);
}

.error__links a {
    color: var(--mh-on-surface);
    font-weight: 600;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 4px;
}

.error__links a:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 560px) {

    .error__actions .mh-btn {
        width: 100%;
    }
}