/* LSP disclosure page (lsp.html). Extracted from the inline <style> block on
   2026-07-16 when the page moved to database rendering, so that changing the
   DATA no longer means touching this file.

   .konsala/.baumen were renamed to .img-left/.img-right — they described a
   layout but were named after two partners. That rename was originally recorded
   here as "visuals are unchanged", which was wrong and is worth keeping as a
   warning: the two class names had encoded the markup order as well as the
   column widths (.konsala cards were written image-first, .baumen cards
   info-card-first). One template emits one order for all six cards, so the
   column lists alone no longer said what they used to, and the .img-right cards
   rendered a 662px-wide, 1177px-tall image with the info-card crushed beside it
   — with the image still on the left. Fixed 2026-07-17 with `order` (see
   .hero-grid.img-right). Lesson: a class rename is only cosmetic if the markup
   it selects is identical too. */
        :root {
            --bg: #f5f7fb;
            --card-bg: #ffffff;
            --text: #1a1a1a;
            --muted: #5b6372;
            --primary: #2b6cb0;
            --radius: 14px;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.12);
            --space-outer: 28px;
            --space-inner: 20px;
            --space-between: 16px;
        }

        /* These four rules used to target *, html and body. They are resets from
           back when this page was a standalone HTML file, and dropping them into
           a site that already has a layout made them leak past this page's own
           content: `body { font-family: -apple-system... }` overrode the site's
           `body { font-family: "Muli" }`, and since the header menu links set no
           font of their own, the nav inherited the system font and rendered
           noticeably heavier than on every other page.

           Scoped to .page — this page's own container — so the shared header and
           footer keep the site's typography. Everything below styles descendants
           of .page and was already safe. */
        .page,
        .page * {
            box-sizing: border-box;
        }

        .page {
            max-width: 1080px;
            margin: 0 auto;
            padding: 40px 20px 60px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
            color: var(--text);
            background: var(--bg);
        }

        header.page-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .title {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        .subtitle {
            margin: 8px 0 0;
            color: var(--muted);
            font-size: 14px;
        }

        .cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px;
        }

        .card {
            background: var(--card-bg);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: var(--space-outer);
            transition: box-shadow 200ms ease, transform 200ms ease;
            max-width: 860px;
            margin: 0 auto;
        }

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

        /* Scoped to .page: `.logo` also matches the shared footer's
           <div class="logo widget-title">, so unscoped it forced the site's
           footer logo into a 120x120 rounded box on this page only. Neither
           class is referenced by this page's markup (0 uses before or after the
           2026-07-16 rewrite) — kept, but confined, rather than silently
           deforming the layout. */
        .page .logo-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page .logo {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 18px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        }

        .app-name {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            margin: var(--space-between) 0 var(--space-between);
            position: relative;
        }

        .app-name::after {
            content: "";
            display: block;
            border-bottom: 1px dashed #d1d6e0;
            margin-top: var(--space-between);
        }

        .info {
            display: grid;
            gap: 12px;
        }

        .myrow {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 10px;
            align-items: start;
        }

        .label {
            color: var(--muted);
            font-weight: 600;
            white-space: nowrap;
        }

        .value {
            line-height: 1.5;
        }

        .value a {
            color: var(--primary);
            text-decoration: none;
            word-break: break-all;
        }

        .value a:hover {
            text-decoration: underline;
        }

        .contact-block {
            display: grid;
            gap: 8px;
            margin-top: 6px;
        }

        .mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        /* Top hero section */
        .hero {
            background: transparent;
            margin-bottom: 28px;
        }

        .section-card {
            background: var(--card-bg);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: var(--space-outer);
            transition: transform 200ms ease, box-shadow 200ms ease;
        }

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

        .brand-line {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .brand-logo {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(145deg, #e9eef7, #f7f9fc);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #758096;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .brand-text {
            font-weight: 700;
            color: var(--text);
            transition: color 160ms ease;
        }

        .brand-line:hover .brand-logo {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .brand-line:hover .brand-text {
            color: var(--primary);
        }

        .hero-intro {
            max-width: 920px;
            margin: 0 auto 22px;
            color: var(--muted);
            line-height: 1.7;
            font-size: 14px;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 22px;
            align-items: stretch;
        }

        .hero-grid.img-left {
            grid-template-columns: 300px 1fr;
        }

        /* The image column is 300px on BOTH variants; only its side changes.
           order is what moves it, because the template emits one fixed markup
           order (image, then info-card) for every card — it has no per-card
           branch to reorder the DOM with.

           The static page did have one: its .konsala cards were written
           image-first and its .baumen cards info-card-first, and these column
           lists were written to match each. Rendering every card from one
           template dropped that distinction, so `1fr 300px` started feeding the
           1fr to the image instead of the info-card: VittaLoanX and LoanArambh
           came out 662px wide and 1177px tall against everyone else's 300/533,
           and the image still wasn't on the right. The column list below is
           correct as written — 1fr for the info-card, 300px for the image — it
           just needed the order to match, so the layout is a property of the
           class rather than of the markup order. */
        .hero-grid.img-right {
            grid-template-columns: 1fr 300px;
        }

        .hero-grid.img-right .app-image,
        .hero-grid.img-right .img-placeholder {
            order: 2;
        }

        .hero-grid.img-right .info-card {
            order: 1;
        }

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

            /* Single column: there is no left or right to honour, so drop the
               reordering and let every card read image-first like the others. */
            .hero-grid.img-right .app-image,
            .hero-grid.img-right .img-placeholder,
            .hero-grid.img-right .info-card {
                order: 0;
            }
        }

        /* Same ratio as .app-image, for the same reason: this stands in for a
           screenshot when an app has none, so at a hard-coded 240px it would sit
           half the height of its neighbours and tilt the row — the very bug the
           ratio below fixes, just triggered by a missing file instead of an
           odd-sized one. All six apps have screenshots today; this is here so
           the seventh without one doesn't break the layout. */
        .img-placeholder {
            background: #edf2f7;
            border: 2px dashed #d1d6e0;
            border-radius: var(--radius);
            aspect-ratio: 1080 / 1920;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7c869a;
            font-weight: 600;
        }

        /* aspect-ratio is what keeps the cards level. The column is a fixed 300px
           and nothing else constrains height, so before this every card was as
           tall as its own screenshot happened to be: the five 1080x1920 shots
           came out 533px, VittaLoan's 894x798 one came out 268px, and the row
           heights disagreed by half.

           The ratio is LoanVanta's 1080x1920 — a stock 9:16 phone screenshot,
           which is what five of the six already are and what an app screenshot
           is meant to be. Sizing the FRAME rather than reacting to each file is
           the point: whatever an LSP uploads next, the layout holds.

           An off-ratio image is letterboxed, not cropped (.no-crop below), so it
           looks visibly wrong instead of quietly losing half its UI — the same
           reason empty fields render as "-". VittaLoan's landscape shot is the
           one that shows this; it wants replacing with a real 9:16 screenshot. */
        .app-image {
            width: 100%;
            min-height: 240px;
            aspect-ratio: 1080 / 1920;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: 2px solid #eef1f6;
            background: #fff;
            object-fit: cover;
            object-position: center;
        }

        .app-image {
            transition: transform 160ms ease, box-shadow 160ms ease;
        }

        .app-image:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .app-image.no-crop {
            object-fit: contain;
        }

        .info-card {
            background: var(--card-bg);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: var(--space-outer);
            position: relative;
            padding-bottom: calc(var(--space-outer) + 52px);
        }

        .info-card {
            transition: transform 160ms ease, box-shadow 160ms ease;
        }

        .info-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .more-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-top: 0;
            padding: 10px 16px;
            border: none;
            border-radius: 10px;
            background: #FFC107;
            color: #ffffff;
            text-decoration: none;
            font-weight: 400;
            transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
            position: absolute;
            right: var(--space-outer);
            bottom: var(--space-outer);
        }

        .more-button:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-hover);
            background: #FFB300;
        }

        .more-button:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
        }

        /* Modal */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(8, 15, 30, 0.45);
            opacity: 0;
            visibility: hidden;
            transition: opacity 180ms ease, visibility 0s linear 180ms;
            z-index: 1000;
        }

        .modal-backdrop.active {
            opacity: 1;
            visibility: visible;
            transition: opacity 180ms ease;
        }

        .modal {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.98);
            background: var(--card-bg);
            border-radius: var(--radius);
            box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
            width: min(780px, calc(100% - 40px));
            max-height: calc(100vh - 120px);
            overflow: auto;
            opacity: 0;
            visibility: hidden;
            transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
            z-index: 1001;
        }

        .modal.active {
            opacity: 1;
            display:block;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        .modal-headers {
            padding: 18px 22px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px dashed #d1d6e0;
        }

        .modal-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
        }

        .modal-close {
            border: 1px solid #d1d6e0;
            background: #ffffff;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            color: #1f2a44;
            padding: 6px 10px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
        }

        .modal-close:hover {
            background: #f5f7fb;
            color: var(--primary);
            box-shadow: var(--shadow-hover);
        }

        .modal-close:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(46, 98, 255, 0.35);
        }

        /* Primary style for bottom close button */
        .modal-close-primary {
            border: none;
            background: #FFC107;
            color: #ffffff;
            padding: 10px 18px;
            border-radius: 10px;
            font-weight: 400;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
            transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
        }

        .modal-close-primary:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-hover);
            background: #FFB300;
        }

        .modal-close-primary:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35);
        }

        .modal-body {
            padding: 18px 22px 24px;
        }

        .modal-footer {
            padding: 12px 22px;
            border-top: 1px dashed #d1d6e0;
            display: none;
        }

        /* External close icon placed outside modal, responsive to viewport */
        /* external close button removed; using header close button */
        .modal-logo {
            width: 96px;
            height: 96px;
            border-radius: 18px;
            object-fit: cover;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
            display: block;
            margin: 0 auto 10px;
        }

        .modal-app-name {
            text-align: center;
            font-weight: 700;
            margin: 10px 0 14px;
        }

        .divider {
            border-bottom: 1px solid #eef1f6;
            margin: 14px 0 18px;
        }

        .offer-list {
            margin: 8px 0 0;
            padding-left: 0;
            list-style: none;
        }

        .offer-list li {
            margin: 6px 0;
        }

        /* Roman numerals for ordered service list */
        .offer-list.offer-roman {
            list-style: upper-roman;
            list-style-position: inside;
            padding-left: 0;
            margin: 0;
        }