/* NoExcel public front-end kit.

   Loaded by every public page: the marketing shell (landing, features, pricing, FBR, legal) via
   front_end/marketing_base.html.twig and the auth shell (login, register, reset password) via
   front_end/security/_split_layout.html.twig. Both shells skip the admin bundles on purpose (issue #97),
   so everything the public pages need beyond Keen's style.bundle.css and override.css lives here:
   the self-hosted fonts, the SVG icon helper, the toast, the section/card/hero/FAQ kit.

   Colour policy (owner, 2026-10-18): the brand blue is --bs-primary (override.css); semantic colours
   stay Keen's. Buttons are plain Keen `btn btn-primary` etc. — only add a rule here when no
   Bootstrap/Keen utility can express it, and say why. */

/* --- Fonts ------------------------------------------------------------------
   Self-hosted latin subsets (Google Fonts, OFL) replace the four 100 KB Inter weights from inter.css
   plus a Google Fonts request. One variable file per family; preloaded in marketing_base so text
   paints in its final face. A @font-face cannot be a utility class. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/preCompiledAssets/fonts/marketing/inter-latin.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("/preCompiledAssets/fonts/marketing/plus-jakarta-sans-latin.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Root size ------------------------------------------------------------------
   Keen sets html{font-size:13px!important} (12px below lg) for its dense admin screens. On a public page
   that makes body text 12px on a phone and 12px inputs, which iOS zooms into on focus. So the marketing pages
   run at a 16px root (a rem is a rem; no utility can change the root), and the auth pages do the same below lg,
   where the 12px root would bite; on desktop the auth shell keeps Keen's 13px, the size it was approved at.
   :has() keeps the change off every page that does not carry the marker; older browsers keep Keen's size. */
html:has(.landing-page) {
    font-size: 16px !important;
}

@media (max-width: 991.98px) {
    html:has(.nx-auth-aside) {
        font-size: 16px !important;
    }
}

/* Keen also pins `body, html` to 13px / 12px with !important, so inherited text (nav links, check labels,
   form text) stayed at 12px on a phone even with the root above. rem follows the root rules above, so this is
   16px on the marketing pages and on any auth page below lg, and still Keen's 13px on the desktop auth shell. */
body {
    font-size: 1rem !important;
}

/* --- Tokens + page defaults -------------------------------------------------- */
.landing-page {
    --lp-ink: #0f172a;
    --lp-text: #475569;
    --lp-muted: #64748b;
    --lp-line: #e2e8f0;
    --lp-tint: #f6f8fc;
    --lp-radius: 1rem;
    --lp-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 24px -12px rgba(15, 23, 42, 0.12);
    --lp-shadow-lg: 0 24px 48px -24px rgba(15, 23, 42, 0.28);
    --lp-font-display: "Plus Jakarta Sans", "Inter", sans-serif;
    color: var(--lp-text);
}

/* Keen's success green (#50cd89) is 2:1 on white and its warning yellow (#ffc700) 1.5:1: too weak for a check
   mark that carries meaning (the plan table), a toast icon, or text. These are darker steps of the same hues,
   used only on the public pages (this file is not loaded in the app). On :root, not .landing-page, because the
   toast is appended to <body> and the auth pages have no .landing-page wrapper. */
:root {
    --lp-success: #16a34a;
    --lp-success-text: #0b6b3f;
    --lp-warning-icon: #b07d00;
}

/* Contrast fixes for Keen defaults that fail on a white / light-blue surface. These are component-level
   tweaks scoped to the public pages (landing.css is only loaded there); the Keen colour tokens are untouched.
   - btn-light-primary: brand blue on its own tint is 4.1:1; the brand's darker step (--bs-primary-active)
     is 5.2:1. Hover/active keep Keen's white-on-primary.
   - .form-text / helper copy: use text-gray-700 in the template instead of Keen's gray-500 (2.6:1). */
.btn.btn-light-primary {
    color: var(--bs-primary-active);
}

/* Hover of the outlined / "active-light" buttons (login's Register and Google buttons): Keen fills them with
   --bs-primary-light and keeps the text on --bs-primary, which is 4.1:1; the darker brand step is 5.2:1. */
.btn.btn-outline.btn-outline-primary:hover:not(.btn-active),
.btn.btn-outline.btn-outline-primary:focus-visible:not(.btn-active),
.btn.btn-active-light-primary:hover:not(.btn-active) {
    color: var(--bs-primary-active);
}

.lp-text-ok,
.lp-chip-sub.lp-text-ok {
    color: var(--lp-success-text);
}

/* Informative success glyph (3:1 on white) in place of Keen's text-success (2:1). */
.lp-icon-ok {
    color: var(--lp-success);
}

.landing-page section[id] {
    scroll-margin-top: 88px;
}

.landing-page :is(h1, h2, h3, h4) {
    font-family: var(--lp-font-display);
    color: var(--lp-ink);
}

/* Nastaliq is a connected script: the display face and tight tracking would break the joins. */
html[dir="rtl"] .landing-page :is(h1, h2, h3, h4) {
    font-family: "Noto Nastaliq Urdu", "Inter", sans-serif;
}

/* --- Icons ------------------------------------------------------------------
   <svg><use href="icons.svg#i-name"> from the Twig macro in marketing/_icons.html.twig. Sized by the
   surrounding font-size so they behave like the icon font they replaced. */
.lp-i {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    vertical-align: -0.125em;
}

/* Direction-aware arrows: "arrow-right" must point the reading direction in Urdu too. */
html[dir="rtl"] .lp-i--flip {
    transform: scaleX(-1);
}

/* --- Navigation -------------------------------------------------------------- */
.lp-nav {
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid transparent;
    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.lp-nav.is-scrolled {
    border-bottom-color: var(--lp-line);
    box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.2);
}

/* 44px minimum tap target on the collapsed menu; Bootstrap's default link padding is ~32px. */
.lp-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.75rem;
    color: var(--lp-ink);
    font-weight: 600;
}

.lp-nav .nav-link:hover,
.lp-nav .nav-link.is-current {
    color: var(--bs-primary);
}

.lp-nav .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--lp-line);
    border-radius: 0.75rem;
    color: var(--lp-ink);
    font-size: 1.25rem;
    align-items: center;
    justify-content: center;
}

/* Below lg only: Bootstrap hides the toggler from lg up, and a bare display rule here would override that. */
@media (max-width: 991.98px) {
    .lp-nav .navbar-toggler {
        display: inline-flex;
    }
}

/* The toggler shows "bars" closed and "xmark" open, driven by aria-expanded (set in landing.js). */
.lp-nav .navbar-toggler .lp-i-close,
.lp-nav .navbar-toggler[aria-expanded="true"] .lp-i-open {
    display: none;
}

.lp-nav .navbar-toggler[aria-expanded="true"] .lp-i-close {
    display: inline;
}

/* Bootstrap swaps the collapse with its own height transition; this one is a plain show/hide with a fade. */
.lp-nav .navbar-collapse.show {
    animation: lp-fade-in 0.2s ease;
}

@media (max-width: 991.98px) {
    .lp-nav .navbar-collapse {
        padding-block: 0.75rem 1rem;
    }
}

@keyframes lp-fade-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* --- Scroll reveal ------------------------------------------------------------
   Replaces AOS (~40 KB + a stylesheet). Only hidden when scripting is on, so a no-JS visitor still
   sees everything; landing.js adds .is-visible. Never put it on the first viewport (LCP). */
@media (scripting: enabled) {
    .lp-reveal {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 0.6s ease,
            transform 0.6s ease;
    }

    .lp-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    .lp-reveal-group > .lp-reveal:nth-child(2) {
        transition-delay: 70ms;
    }
    .lp-reveal-group > .lp-reveal:nth-child(3) {
        transition-delay: 140ms;
    }
    .lp-reveal-group > .lp-reveal:nth-child(4) {
        transition-delay: 210ms;
    }
}

/* --- Section kit ------------------------------------------------------------- */
.lp-section {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.lp-section--tint {
    background: var(--lp-tint);
}

.lp-head {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.lp-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--bs-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html[dir="rtl"] .lp-eyebrow {
    letter-spacing: normal;
}

.lp-h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.lp-h3 {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
    font-weight: 700;
}

.lp-lead {
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--lp-text);
}

/* --- Hero (landing) ---------------------------------------------------------- */
.lp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            52rem 28rem at 88% -8%,
            rgba(var(--bs-primary-rgb), 0.14),
            transparent 65%
        ),
        radial-gradient(
            40rem 24rem at 0% 100%,
            rgba(var(--bs-primary-rgb), 0.07),
            transparent 65%
        ),
        var(--lp-tint);
}

/* Dot grid, masked so it fades out toward the edges. A mask gradient cannot be a utility. */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
        rgba(15, 23, 42, 0.1) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(
        ellipse at 70% 40%,
        #000 0%,
        transparent 70%
    );
    mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
}

.lp-hero-title {
    font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

html[dir="rtl"] .lp-hero-title {
    letter-spacing: normal;
    line-height: 1.5;
}

.lp-hero-desc {
    max-width: 38rem;
    font-size: 1.15rem;
    line-height: 1.65;
}

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.09);
    color: var(--bs-primary-active);
    font-size: 0.85rem;
    font-weight: 600;
}

.lp-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-success);
    flex: none;
}

.lp-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--bs-success);
    opacity: 0.5;
    animation: lp-pulse 1.8s ease-out infinite;
}

@keyframes lp-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-trust li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lp-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.lp-trust .lp-i {
    color: var(--lp-success);
    font-size: 1.05rem;
}

/* The illustration sits on a soft tile; the floating chips overlap its corners like product UI. */
.lp-art {
    position: relative;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

.lp-art-tile {
    padding: clamp(1rem, 0.5rem + 2vw, 1.75rem);
    border-radius: 1.75rem;
    background: #fff;
    box-shadow:
        var(--lp-shadow-lg),
        0 0 0 1px rgba(15, 23, 42, 0.05);
}

/* Smaller illustration frames for the supporting sections and sub-page heroes. */
.lp-art--sm {
    max-width: 24rem;
}

.lp-art--xs {
    max-width: 17rem;
}

.lp-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: 14rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.9rem;
    background: #fff;
    box-shadow:
        0 16px 36px -14px rgba(15, 23, 42, 0.3),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    animation: lp-float 5s ease-in-out infinite;
}

.lp-chip .lp-i {
    font-size: 1.35rem;
}

.lp-chip-title {
    color: var(--lp-ink);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.lp-chip-sub {
    font-size: 0.75rem;
    color: var(--lp-muted);
}

.lp-chip--top {
    inset-inline-end: -0.75rem;
    top: 1.5rem;
}

.lp-chip--bottom {
    inset-inline-start: -0.75rem;
    bottom: 2rem;
    animation-delay: 1.2s;
}

@keyframes lp-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* On a phone the chips would hang off the viewport edge: tuck them inside the tile. */
@media (max-width: 575.98px) {
    .lp-chip--top {
        inset-inline-end: 0.5rem;
        top: 0.5rem;
    }
    .lp-chip--bottom {
        inset-inline-start: 0.5rem;
        bottom: 0.5rem;
    }
}

/* --- Sub-page hero ---------------------------------------------------------- */
.lp-page-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    background:
        radial-gradient(
            44rem 22rem at 90% -10%,
            rgba(var(--bs-primary-rgb), 0.13),
            transparent 65%
        ),
        var(--lp-tint);
}

.lp-page-hero-title {
    font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

html[dir="rtl"] .lp-page-hero-title {
    letter-spacing: normal;
    line-height: 1.5;
}

/* --- Cards ------------------------------------------------------------------- */
.lp-card {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.lp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    box-shadow: var(--lp-shadow);
}

.lp-card h3,
.lp-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.lp-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* A card that runs the full row (the odd one out of a 13-card grid): icon beside the text from sm up. */
@media (min-width: 576px) {
    .lp-card--wide {
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .lp-card--wide .lp-tile {
        flex: none;
        margin-bottom: 0;
    }
}

/* Keen has no 52px icon tile: w-50px / h-50px do the job, this rounds the corner to match the cards and tints
   the tile. The tints are Keen's own *-light backgrounds; only the glyph colour differs for success and warning,
   because Keen's #50cd89 / #ffc700 are ~1.9:1 and ~1.5:1 on those tints (primary, info and danger are fine). */
.lp-tile {
    margin-bottom: 1.1rem;
    border-radius: 0.85rem;
}

.lp-tile--primary {
    background: var(--bs-primary-light);
    color: var(--bs-primary-active);
}

.lp-tile--success {
    background: var(--bs-success-light);
    color: var(--lp-success-text);
}

.lp-tile--info {
    background: var(--bs-info-light);
    color: var(--bs-info);
}

.lp-tile--warning {
    background: var(--bs-warning-light);
    color: #7a5b00;
}

.lp-tile--danger {
    background: var(--bs-danger-light);
    color: var(--bs-danger);
}

.lp-checks {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-checks li {
    display: flex;
    gap: 0.7rem;
    line-height: 1.55;
}

.lp-checks .lp-i {
    margin-top: 0.3rem;
    color: var(--lp-success);
}

/* --- Mandate band ------------------------------------------------------------ */
.lp-mandate {
    position: relative;
    overflow: hidden;
    padding-block: 2.25rem;
    background: var(--lp-ink);
    color: #fff;
}

.lp-mandate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        38rem 14rem at 10% 50%,
        rgba(var(--bs-primary-rgb), 0.4),
        transparent 65%
    );
    pointer-events: none;
}

.lp-mandate > * {
    position: relative;
}

.lp-mandate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    align-items: center;
}

.lp-mandate-title {
    margin-bottom: 0.25rem;
    color: #fff;
    font-family: var(--lp-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
}

.lp-mandate-sub,
.lp-mandate-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.lp-mandate-date {
    padding-inline-start: 1.25rem;
    border-inline-start: 2px solid rgba(255, 255, 255, 0.18);
}

.lp-mandate-value {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.3rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .lp-mandate-grid {
        grid-template-columns: 1fr 1fr;
    }
    .lp-mandate-head {
        grid-column: 1 / -1;
    }
    .lp-mandate-date {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

@media (max-width: 575.98px) {
    .lp-mandate-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Module strip: breadth at a glance (static; replaces the infinite marquee) ---- */
.lp-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-strip li {
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--lp-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Steps ------------------------------------------------------------------- */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    counter-reset: lp-step;
}

.lp-step {
    position: relative;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
}

.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-family: var(--lp-font-display);
    font-size: 1.1rem;
    font-weight: 700;
}

.lp-step h3 {
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.lp-step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    .lp-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --- Invoice mock-up: a CSS-drawn FBR-stamped invoice (sharp at any zoom, translates with the page) ---- */
.lp-doc {
    max-width: 24rem;
    padding: 1.5rem;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
    box-shadow: var(--lp-shadow-lg);
}

.lp-doc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lp-line);
}

.lp-doc-label {
    color: var(--lp-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-doc-no {
    color: var(--lp-ink);
    font-family: var(--lp-font-display);
    font-weight: 800;
}

/* A checkerboard standing in for the QR code; four gradients cannot be a utility. */
.lp-doc-qr {
    width: 62px;
    height: 62px;
    flex: none;
    border: 3px solid #fff;
    border-radius: 8px;
    outline: 1px solid rgba(15, 23, 42, 0.12);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, var(--lp-ink) 25%, transparent 25%),
        linear-gradient(-45deg, var(--lp-ink) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--lp-ink) 75%),
        linear-gradient(-45deg, transparent 75%, var(--lp-ink) 75%);
    background-size: 9px 9px;
    background-position:
        0 0,
        0 4.5px,
        4.5px -4.5px,
        -4.5px 0;
}

.lp-doc-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-block: 1rem;
}

.lp-doc-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--lp-muted);
    font-size: 0.82rem;
}

.lp-doc-row strong {
    color: var(--lp-ink);
    text-align: end;
}

.lp-doc-row--total {
    padding-top: 0.6rem;
    border-top: 1px solid var(--lp-line);
    font-size: 0.95rem;
}

.lp-doc-stamp {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.65rem;
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--lp-success-text);
    font-size: 0.78rem;
    font-weight: 600;
}

/* --- Note + pills ------------------------------------------------------------- */
.lp-note {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-inline-start: 3px solid var(--bs-primary);
    border-radius: 0.65rem;
    background: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--lp-text);
    font-size: 0.92rem;
    line-height: 1.6;
}

.lp-note .lp-i {
    margin-top: 0.2rem;
    color: var(--bs-primary);
}

/* Two classes: the page-wide `.landing-page h3` ink colour would otherwise win. */
.lp-note .lp-note-title {
    color: var(--bs-primary-active);
}

.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary-active);
    font-size: 0.78rem;
    font-weight: 700;
}

/* --- Module rows (features page) -------------------------------------------- */
.lp-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: center;
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.lp-module + .lp-module {
    border-top: 1px solid var(--lp-line);
}

/* Zig-zag: every second module puts its picture first. */
.lp-module:nth-child(even) .lp-module-media {
    order: -1;
}

.lp-module-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
    border-radius: 1.5rem;
    background: linear-gradient(
        145deg,
        rgba(var(--bs-primary-rgb), 0.09),
        rgba(var(--bs-primary-rgb), 0.03)
    );
}

.lp-module-visual img {
    max-width: 100%;
    max-height: 22rem;
}

/* A product screenshot, not an illustration: framed like a browser window. */
.lp-shot {
    overflow: hidden;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow:
        var(--lp-shadow-lg),
        0 0 0 1px rgba(15, 23, 42, 0.06);
}

.lp-shot img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .lp-module {
        grid-template-columns: 1fr;
    }
    .lp-module:nth-child(even) .lp-module-media {
        order: 0;
    }
}

/* --- Before / after ----------------------------------------------------------- */
.lp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.lp-compare-card {
    padding: 2rem;
    border-radius: 1.25rem;
    background: #fff;
}

.lp-compare-card--bad {
    border: 1px dashed rgba(var(--bs-danger-rgb), 0.4);
}

.lp-compare-card--good {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 24px 48px -28px rgba(var(--bs-primary-rgb), 0.45);
}

.lp-compare-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lp-line);
    color: var(--lp-ink);
    font-family: var(--lp-font-display);
    font-size: 1.1rem;
    font-weight: 800;
}

.lp-compare-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-compare-list li {
    display: flex;
    gap: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.lp-compare-list .lp-i {
    margin-top: 0.3rem;
}

.lp-compare-card--bad .lp-i {
    color: var(--bs-danger);
}

.lp-compare-card--good .lp-i {
    color: var(--lp-success);
}

@media (max-width: 767.98px) {
    .lp-compare {
        grid-template-columns: 1fr;
    }
}

/* --- Roadmap ------------------------------------------------------------------ */
.lp-roadmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    max-width: 48rem;
    margin-inline: auto;
}

.lp-roadmap-item {
    padding: 1.4rem;
    border: 1px dashed #cbd5e1;
    border-radius: var(--lp-radius);
    background: rgba(255, 255, 255, 0.7);
}

.lp-roadmap-item h3 {
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.lp-roadmap-item p {
    margin: 0;
    font-size: 0.92rem;
}

.lp-roadmap-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background: rgba(var(--bs-warning-rgb), 0.18);
    color: #7a5b00;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* --- Pricing ------------------------------------------------------------------ */
.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem;
    border: 1px solid var(--lp-line);
    border-radius: 1.25rem;
    background: #fff;
    /* Makes the card a size container so the price below can scale to the card's own width (cqi). */
    container-type: inline-size;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.lp-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow);
}

.lp-plan--popular {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 24px 48px -28px rgba(var(--bs-primary-rgb), 0.5);
}

.lp-plan-ribbon {
    position: absolute;
    top: -0.85rem;
    inset-inline-start: 50%;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

html[dir="rtl"] .lp-plan-ribbon {
    transform: translateX(50%);
}

/* Reserve two lines for the plan subtitle once the cards sit side by side, so the price (and the list under it)
   starts at the same height in all four even when only some subtitles wrap. */
@media (min-width: 768px) {
    .lp-plan-sub {
        min-height: 3em;
    }
}

/* One size for all four cards, on one line each. The price is a single translated string ("PKR 100,000/yr"),
   so it cannot be split in two; instead the size follows the card width: 11.5cqi keeps the longest price
   (measured 8.0em wide, so about 92% of the card) inside it at every column width, capped at 2rem where there
   is room (a phone, or a wide card). The 1.4rem line is the fallback for browsers without container query
   units. nowrap keeps "PKR" and the number together so every card ends up the same height. */
.lp-plan-price {
    margin-bottom: 1.25rem;
    color: var(--lp-ink);
    font-family: var(--lp-font-display);
    font-size: 1.4rem;
    font-size: min(2rem, 11.5cqi);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

/* position: relative is load-bearing: the table cells hold .visually-hidden spans (position: absolute), which
   would otherwise be positioned against the page, escape this scroller's clip and widen the whole document. */
.lp-table-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
}

.lp-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.lp-table th,
.lp-table td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #edf1f7;
    font-size: 0.92rem;
    text-align: start;
}

.lp-table thead th {
    background: var(--lp-tint);
    color: var(--lp-ink);
    font-family: var(--lp-font-display);
    font-weight: 800;
    white-space: nowrap;
}

.lp-table tbody th {
    color: var(--lp-text);
    font-weight: 600;
}

.lp-table td {
    color: var(--lp-text);
    text-align: center;
}

.lp-table tbody tr:last-child :is(th, td) {
    border-bottom: 0;
}

.lp-table .lp-yes {
    color: var(--lp-success);
}

/* "Not included" is information too, so the dash clears 3:1 on white (the old #cbd5e1 was 1.5:1). */
.lp-table .lp-no {
    color: #76849a;
}

.lp-table-group th {
    background: #fbfcfe;
    color: var(--lp-ink);
    font-family: var(--lp-font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* The feature column stays put while the plan columns scroll sideways on a phone. */
@media (max-width: 767.98px) {
    .lp-table thead th:first-child,
    .lp-table tbody th {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 1px 0 0 var(--lp-line);
    }
    .lp-table thead th:first-child {
        background: var(--lp-tint);
    }
    .lp-table-group th {
        background: #fbfcfe;
    }
}

/* --- FAQ ----------------------------------------------------------------------
   Native <details>: no JS, keyboard and screen-reader friendly, content stays in the DOM for crawlers. */
.lp-faq {
    display: grid;
    gap: 0.9rem;
    align-items: start;
}

.lp-faq--2col {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 991.98px) {
    .lp-faq--2col {
        grid-template-columns: 1fr;
    }
}

.lp-faq-item {
    border: 1px solid var(--lp-line);
    border-radius: 0.9rem;
    background: #fff;
    transition: border-color 0.2s ease;
}

.lp-faq-item[open] {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

.lp-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.9rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

.lp-faq-item summary::-webkit-details-marker {
    display: none;
}

.lp-faq-q {
    margin: 0;
    color: var(--lp-ink);
    font-family: var(--lp-font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.lp-faq-chev {
    color: var(--lp-muted);
    transition: transform 0.2s ease;
}

.lp-faq-item[open] .lp-faq-chev {
    color: var(--bs-primary);
    transform: rotate(180deg);
}

.lp-faq-a {
    padding: 0 1.25rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- CTA band ------------------------------------------------------------------ */
.lp-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2.25rem, 1.5rem + 3vw, 4rem)
        clamp(1.25rem, 0.5rem + 3vw, 3rem);
    border-radius: 1.75rem;
    background:
        radial-gradient(
            24rem 14rem at 100% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            var(--bs-primary) 0%,
            var(--bs-primary-active) 100%
        );
    color: #fff;
    text-align: center;
}

.lp-cta .lp-h2 {
    color: #fff;
}

.lp-cta .lp-lead {
    max-width: 38rem;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.95);
}

/* Outline button on the blue CTA band. The border clears 3:1 against the band; the hover fill darkens (a white
   wash behind white text dropped it to ~4:1). */
.lp-btn-ghost-light {
    border: 1px solid rgba(255, 255, 255, 0.75);
    color: #fff;
}

.lp-btn-ghost-light:hover {
    background: rgba(15, 23, 42, 0.18);
    color: #fff;
}

/* --- Contact -------------------------------------------------------------------- */
.lp-contact {
    overflow: hidden;
    border-radius: 1.75rem;
    background: #fff;
    box-shadow:
        var(--lp-shadow-lg),
        0 0 0 1px rgba(15, 23, 42, 0.05);
}

.lp-contact-info {
    background:
        radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 /
            22px 22px,
        linear-gradient(
            145deg,
            var(--bs-primary) 0%,
            var(--bs-primary-active) 100%
        );
    color: #fff;
}

.lp-contact-info h2 {
    color: #fff;
}

.lp-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.lp-contact-item > .lp-i {
    box-sizing: content-box;
    padding: 0.6rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.1rem;
}

.lp-contact-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
}

/* The reCAPTCHA badge overhangs the viewport edge by design (right: -186px set inline by Google's
   script), which forces a horizontal scrollbar. Pulling it in-bounds and hiding it is allowed by
   Google's terms while the attribution notice is shown next to the form. */
.grecaptcha-badge {
    visibility: hidden;
    right: 0 !important;
}

/* --- Footer --------------------------------------------------------------------- */
.lp-footer {
    background: var(--lp-ink);
    color: rgba(255, 255, 255, 0.72);
    padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.lp-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}

.lp-footer a:hover {
    color: #fff;
}

.lp-footer-title {
    margin-bottom: 1.1rem;
    color: #fff;
    font-family: var(--lp-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

html[dir="rtl"] .lp-footer-title {
    letter-spacing: normal;
}

.lp-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.92rem;
}

/* Footer links get a 44px row on a phone so they are tappable; tighter on desktop where a mouse is precise. */
.lp-footer-links a,
.lp-footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (min-width: 992px) {
    .lp-footer-links a,
    .lp-footer-contact a {
        min-height: 32px;
    }
}

.lp-footer-contact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
}

.lp-footer-contact .lp-i {
    width: 16px;
    color: var(--bs-primary-hover);
}

.lp-footer-contact--top {
    align-items: flex-start;
    line-height: 1.55;
}

.lp-footer-contact--top .lp-i {
    margin-top: 0.25rem;
}

.lp-footer-bottom {
    margin-top: 3rem;
    padding-block: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.87rem;
}

/* --- Legal pages ---------------------------------------------------------------- */
.lp-legal {
    color: var(--lp-text);
    font-size: 0.98rem;
    line-height: 1.8;
}

.lp-legal h2 {
    margin-bottom: 0.9rem;
    scroll-margin-top: 96px;
    font-size: 1.2rem;
    font-weight: 800;
}

.lp-legal section + section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--lp-line);
}

.lp-legal p {
    margin-bottom: 1rem;
}

.lp-legal :is(p, ul):last-child {
    margin-bottom: 0;
}

.lp-legal ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.lp-legal ul li {
    display: flex;
    gap: 0.7rem;
}

.lp-legal ul li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 0.8rem;
    border-radius: 50%;
    background: var(--bs-primary);
}

.lp-toc {
    position: sticky;
    top: 96px;
    padding: 1.4rem 1.3rem;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    background: #fff;
}

.lp-toc-title {
    margin-bottom: 1rem;
    color: var(--lp-muted);
    font-family: var(--lp-font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lp-toc ol {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.lp-toc li {
    counter-increment: toc;
}

.lp-toc a {
    display: flex;
    gap: 0.6rem;
    padding-block: 0.3rem;
    color: var(--lp-text);
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.lp-toc a::before {
    content: counter(toc) ".";
    flex: none;
    color: rgba(var(--bs-primary-rgb), 0.55);
}

.lp-toc a:hover {
    color: var(--bs-primary);
}

/* The clauses a reader must not skim past (FBR transmission, "we are not your accountant"). */
.lp-callout {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.4);
    border-radius: 0.8rem;
    background: rgba(var(--bs-warning-rgb), 0.1);
    color: #5c4300;
}

.lp-callout .lp-i {
    margin-top: 0.3rem;
    color: #b07d00;
}

/* --- Auth shells (login, register, reset) --------------------------------------- */
/* Standalone links on the auth pages (forgot password, back to home, login/register) get a 44px hit area on a
   touch-sized screen; a utility cannot be limited to below lg without a custom breakpoint class like this. */
@media (max-width: 991.98px) {
    .lp-tap {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Keen's .form-control-solid on a white card needs a visible border to read as a field (gray-600 is 3.8:1 on
   white; the 1.05:1 default made the inputs look borderless). Three classes so it out-ranks Keen's
   .form-control.form-control-solid border colour; focus keeps Keen's own state colour. */
.form-control.form-control-solid.lp-field:not(:focus) {
    border: 1px solid var(--bs-gray-600);
}

/* An unchecked box is a UI boundary too: Keen's gray-300 outline is 1.3:1. */
.form-check-input:not(:checked) {
    border-color: var(--bs-gray-600);
}

/* --- Toast (toastr replacement) -------------------------------------------------
   flash_messages.html.twig calls toastr.success()/error()/...; landing.js defines a tiny drop-in so the
   public pages need neither jQuery nor toastr's stylesheet. */
.lp-toasts {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.lp-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-inline-start: 4px solid var(--lp-toast, var(--bs-primary));
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.35);
    color: var(--lp-ink);
    font-size: 0.92rem;
    line-height: 1.5;
    pointer-events: auto;
    animation: lp-fade-in 0.25s ease;
}

.lp-toast > .lp-i {
    margin-top: 0.15rem;
    color: var(--lp-toast, var(--bs-primary));
    font-size: 1.1rem;
}

.lp-toast-body {
    flex: 1;
}

.lp-toast-close {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -0.25rem -0.4rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lp-muted);
    font-size: 1rem;
}

.lp-toast--success {
    --lp-toast: var(--lp-success);
}
.lp-toast--error {
    --lp-toast: var(--bs-danger);
}
.lp-toast--warning {
    --lp-toast: var(--lp-warning-icon);
}

/* --- Reduced motion ----------------------------------------------------------------
   Decorative motion (float, pulse, reveal, hover lift) stops; state changes stay instant. */
@media (prefers-reduced-motion: reduce) {
    .landing-page *,
    .landing-page *::before,
    .landing-page *::after,
    .lp-toast {
        animation: none !important;
        transition: none !important;
    }

    .lp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media print {
    .lp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .lp-nav,
    .lp-footer {
        display: none;
    }
}