/* ============================================================================
   kmp-landing.css — the public page and sign-in surface
   ----------------------------------------------------------------------------
   Built on the same tokens as the console (kmp-ui.css), so the front door and
   the rooms behind it are recognisably one product.

   DESIGN READ
   -----------
   This is a credit cooperative's front door in Koronadal. The audience is
   staff signing in, and members who might look. Trust-first, therefore: quiet
   type, real figures, no stock photography of coins and seedlings, and nothing
   that moves for its own sake.

   WHAT WAS THERE BEFORE
   ---------------------
   · A hero photo fetched from Unsplash over the network — an external
     dependency on the page that also hosts the login form.
   · Six identical feature cards in a row, each with a stock photograph.
   · "Ready to Transform Your Lending Business?" and "cutting-edge", to
     "hundreds of financial institutions" the cooperative does not have.
   · A footer link reading "For Option Lang Na Di" — placeholder text, shipped.

   What replaced it says what the system actually does, and shows a real
   amortisation schedule computed by the real engine instead of a photograph.
   ========================================================================== */

.lp {
    --lp-measure: 62ch;
    max-width: var(--k-max);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.lp-head {
    display: flex;
    align-items: center;
    gap: var(--k-6);
    padding-block: var(--k-4);
    border-bottom: 1px solid var(--k-hairline);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--k-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    flex-wrap: wrap;
}

.lp-brand {
    display: inline-flex; align-items: center; gap: var(--k-2);
    font-weight: 600; font-size: var(--k-t-md);
    color: var(--k-ink-strong); text-decoration: none;
    letter-spacing: -.01em;
    margin-right: auto;
}
.lp-brand img { border-radius: var(--k-r-sm); }

.lp-nav { display: flex; gap: var(--k-5); }
.lp-nav a {
    font-size: var(--k-t-sm); font-weight: 500;
    color: var(--k-ink-muted); text-decoration: none;
    padding-block: var(--k-1);
    border-bottom: 1px solid transparent;
    transition: color var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease);
}
.lp-nav a:hover { color: var(--k-ink-strong); border-bottom-color: var(--k-accent); }

.lp-auth { display: flex; gap: var(--k-2); }

@media (max-width: 720px) {
    .lp-nav { order: 3; width: 100%; justify-content: flex-start; gap: var(--k-4); }
    .lp-head { gap: var(--k-3); }
}

/* ==========================================================================
   HERO
   --------------------------------------------------------------------------
   Asymmetric: the words take more room than the figure, because the words are
   what someone arriving actually needs.
   ========================================================================== */

.lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(48px, 9vw, 108px);
}
@media (max-width: 940px) {
    .lp-hero { grid-template-columns: 1fr; gap: var(--k-8); }
}

.lp-eyebrow {
    font-size: var(--k-t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--k-accent-ink);
    margin: 0 0 var(--k-3);
}

.lp-hero h1 {
    /* Large, tight, and heavy — a headline should have presence. */
    font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 600;
    margin: 0 0 var(--k-5);
    color: var(--k-ink-strong);
    text-wrap: balance;
}

.lp-lede {
    font-size: clamp(1rem, .94rem + .28vw, 1.15rem);
    line-height: 1.62;
    color: var(--k-ink-muted);
    max-width: var(--lp-measure);
    margin: 0 0 var(--k-6);
}

.lp-cta { display: flex; gap: var(--k-3); flex-wrap: wrap; }

/* ==========================================================================
   THE SAMPLE SCHEDULE
   --------------------------------------------------------------------------
   Real figures from the real engine. It is the most honest thing this page can
   show, and it is more convincing than any photograph of money.
   ========================================================================== */

.lp-schedule {
    background: var(--k-surface);
    border: 1px solid var(--k-hairline);
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-shadow-3);
    overflow: hidden;
    /* Sits a degree off the grid, so the hero does not read as two boxes. */
    transform: rotate(-.5deg);
}
@media (max-width: 940px) { .lp-schedule { transform: none; } }

.lp-schedule-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--k-3); flex-wrap: wrap;
    padding: var(--k-3) var(--k-4);
    border-bottom: 1px solid var(--k-hairline);
    background: var(--k-surface-2);
    font-size: var(--k-t-sm); font-weight: 600;
    color: var(--k-ink-strong);
}
.lp-schedule-terms {
    font-weight: 450; color: var(--k-ink-muted);
    font-variant-numeric: tabular-nums;
}

.lp-schedule table { width: 100%; border-collapse: collapse; font-size: var(--k-t-sm); }
.lp-schedule th {
    text-align: left;
    font-size: var(--k-t-2xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--k-ink-muted);
    padding: var(--k-2) var(--k-4);
    border-bottom: 1px solid var(--k-hairline);
}
.lp-schedule th:not(:first-child), .lp-schedule td.n { text-align: right; }
.lp-schedule td {
    padding: 7px var(--k-4);
    border-bottom: 1px solid var(--k-hairline);
    color: var(--k-ink);
}
.lp-schedule td.n { font-variant-numeric: tabular-nums; }
.lp-schedule tbody tr:last-child td { border-bottom: 0; font-weight: 600; }
.lp-schedule-foot {
    margin: 0;
    padding: var(--k-3) var(--k-4);
    border-top: 1px solid var(--k-hairline);
    background: var(--k-surface-2);
    font-size: var(--k-t-xs);
    color: var(--k-ink-muted);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.lp-section { padding-block: clamp(44px, 7vw, 88px); }
.lp-section > h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
    letter-spacing: -.028em;
    font-weight: 600;
    margin: 0 0 var(--k-8);
    color: var(--k-ink-strong);
}

/* --- What it handles. A broken grid: two cells span, four do not, so the
       row structure is not four identical boxes. ------------------------- */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
    gap: var(--k-4);
}
@media (min-width: 900px) {
    .lp-grid { grid-template-columns: repeat(6, 1fr); }
    .lp-cell { grid-column: span 2; }
    .lp-cell-wide { grid-column: span 3; }
}

.lp-cell {
    /* No border, no shadow: these are passages of text, and boxing each one
       would be elevation communicating nothing. A rule and space, instead. */
    border-top: 2px solid var(--k-accent);
    padding-top: var(--k-4);
}
.lp-cell h3 {
    font-size: var(--k-t-lg);
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 var(--k-2);
    color: var(--k-ink-strong);
}
.lp-cell p {
    margin: 0;
    font-size: var(--k-t-md);
    line-height: 1.62;
    color: var(--k-ink-muted);
    max-width: 54ch;
}

/* --- How it is kept honest ---------------------------------------------- */
.lp-band {
    background: var(--k-surface);
    border: 1px solid var(--k-hairline);
    border-radius: var(--k-r-lg);
    padding-inline: clamp(20px, 4vw, 56px);
}
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
    gap: clamp(24px, 4vw, 56px);
}
.lp-step h3 {
    font-size: var(--k-t-md);
    font-weight: 600;
    margin: var(--k-2) 0 var(--k-2);
    color: var(--k-ink-strong);
}
.lp-step p { margin: 0; font-size: var(--k-t-sm); line-height: 1.62; color: var(--k-ink-muted); }
.lp-step-n {
    display: block;
    font-family: var(--k-mono);
    font-size: var(--k-t-xs);
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--k-accent-ink);
}

/* --- Closing ------------------------------------------------------------ */
.lp-final { text-align: left; max-width: 66ch; }
.lp-final .lp-lede { margin-bottom: var(--k-6); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.lp-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-4);
    justify-content: space-between;
    padding-block: var(--k-6) var(--k-10);
    border-top: 1px solid var(--k-hairline);
    font-size: var(--k-t-sm);
    color: var(--k-ink-muted);
}
.lp-foot strong { display: block; color: var(--k-ink-strong); font-weight: 600; }
.lp-foot nav { display: flex; gap: var(--k-4); }
.lp-foot nav a { color: var(--k-ink-muted); text-decoration: none; }
.lp-foot nav a:hover { color: var(--k-accent-ink); }
.lp-foot p { margin: 0; }

/* ==========================================================================
   BUTTONS
   --------------------------------------------------------------------------
   The landing page's own button classes, mapped onto the shared control
   styles so the front door and the console agree.
   ========================================================================== */

.lp .btn, .modal .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--k-r-sm);
    font-family: inherit;
    font-size: var(--k-t-sm);
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--k-fast) var(--k-ease),
                border-color var(--k-fast) var(--k-ease),
                color var(--k-fast) var(--k-ease),
                transform var(--k-fast) var(--k-ease);
}
.lp .btn:active, .modal .btn:active { transform: translateY(1px); }
@media (pointer: coarse) { .lp .btn, .modal .btn { min-height: 44px; } }

.lp .btn-lg { min-height: 46px; padding: 12px 22px; font-size: var(--k-t-md); }

.lp .btn-filled, .modal .btn-filled, .lp .btn-primary {
    background: var(--k-accent-ink); border-color: var(--k-accent-ink); color: #fff;
}
.lp .btn-filled:hover, .modal .btn-filled:hover { background: var(--k-a-800); border-color: var(--k-a-800); }

.lp .btn-outline, .modal .btn-outline {
    background: var(--k-surface); border-color: var(--k-line); color: var(--k-ink);
}
.lp .btn-outline:hover, .modal .btn-outline:hover { background: var(--k-surface-2); border-color: var(--k-g-400); }

.lp .btn-quiet { background: transparent; border-color: transparent; color: var(--k-accent-ink); }
.lp .btn-quiet:hover { background: var(--k-accent-wash); }

.lp .btn-light { background: var(--k-surface); border-color: var(--k-line); color: var(--k-ink-strong); }

/* ==========================================================================
   MODALS — the sign-in and sign-up dialogs
   --------------------------------------------------------------------------
   Markup and JavaScript untouched; only the surface is restyled so the login
   box matches everything else.
   ========================================================================== */

.modal {
    position: fixed; inset: 0;
    background: rgba(11, 17, 25, .55);
    backdrop-filter: blur(3px);
    z-index: var(--z-modal);
    align-items: center; justify-content: center;
    padding: var(--k-4);
}
.modal-content {
    width: min(440px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
    box-shadow: var(--k-shadow-4);
    animation: k-rise var(--k-slow) var(--k-ease) both;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--k-3);
    padding: var(--k-5) var(--k-5) var(--k-3);
    border-bottom: 1px solid var(--k-hairline);
}
.modal-header h2, .modal-header h3 {
    margin: 0; font-size: var(--k-t-lg); font-weight: 600; color: var(--k-ink-strong);
}
.modal-body   { padding: var(--k-5); display: grid; gap: var(--k-4); }
.modal-footer { padding: var(--k-3) var(--k-5) var(--k-5); border-top: 1px solid var(--k-hairline);
                font-size: var(--k-t-sm); color: var(--k-ink-muted); }
.modal-footer a { color: var(--k-accent-ink); font-weight: 550; }

.form-group { display: grid; gap: var(--k-1); }
.form-group label { font-size: var(--k-t-sm); font-weight: 550; color: var(--k-ink); }

/* The error line sits under its own field, which is where someone looks. */
.error-message, .k-field-error {
    font-size: var(--k-t-xs);
    color: var(--k-bad);
    min-height: 0;
}
.error-message:empty { display: none; }

.close-modal {
    background: none; border: 0; cursor: pointer;
    width: 32px; height: 32px; border-radius: var(--k-r-sm);
    display: grid; place-items: center;
    color: var(--k-ink-muted); font-size: 18px; line-height: 1;
    transition: background-color var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease);
}
.close-modal:hover { background: var(--k-surface-3); color: var(--k-ink); }

/* Password reveal toggles sit inside the field. */
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 40px; }
.password-wrapper .toggle-password {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer;
    width: 30px; height: 30px; border-radius: var(--k-r-xs);
    color: var(--k-ink-muted);
}
.password-wrapper .toggle-password:hover { color: var(--k-ink); background: var(--k-surface-3); }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .lp-schedule { transform: none; }
    .modal-content { animation: none; }
}

/* ==========================================================================
   THE OLD PAGE BACKGROUND
   --------------------------------------------------------------------------
   index.css set `background-image: url(images/loan.jpg)` on <body> — a
   photograph of coins, washed out behind everything, which is why the page
   read as grey-brown rather than as a surface. It also fixed the page's whole
   colour to one theme.

   The surface is a token now. The photograph is still on disk and still used
   where a photograph belongs; it is simply not the wallpaper.
   ========================================================================== */

body {
    background-image: none !important;
    background-color: var(--k-bg) !important;
}

/* A single, very quiet wash behind the hero so the page is not a flat field.
   Radial and off-centre, because an even 45-degree linear gradient is the
   thing every generated page does. */
.lp::before {
    content: "";
    position: fixed;
    inset: -20% -10% auto -10%;
    height: 70vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 78% 8%, color-mix(in srgb, var(--k-accent) 13%, transparent), transparent 70%),
        radial-gradient(45% 45% at 8% 0%, color-mix(in srgb, var(--k-a-300) 10%, transparent), transparent 68%);
}
:root[data-theme="dark"] .lp::before {
    background:
        radial-gradient(60% 55% at 78% 8%, color-mix(in srgb, var(--k-accent) 16%, transparent), transparent 70%),
        radial-gradient(45% 45% at 8% 0%, color-mix(in srgb, var(--k-a-700) 26%, transparent), transparent 68%);
}

/* The dialog header kept a blue gradient from index.css — the last one in the
   product. Flat, matching the console's chrome. */
.modal-header {
    background: var(--k-n-800) !important;
    background-image: none !important;
    color: #fff !important;
    border-bottom-color: var(--k-chrome-edge) !important;
}
.modal-header h2, .modal-header h3, .modal-header .close-modal { color: #fff !important; }
.modal-header .close-modal:hover { background: rgba(255,255,255,.14) !important; }

/* The role picker: two real choices, so the selected one has to be obvious. */
.role-option, .role-card {
    border: 1px solid var(--k-line);
    border-radius: var(--k-r);
    background: var(--k-surface);
    transition: border-color var(--k-fast) var(--k-ease),
                background-color var(--k-fast) var(--k-ease),
                box-shadow var(--k-fast) var(--k-ease);
}
.role-option:hover, .role-card:hover { border-color: var(--k-accent); background: var(--k-accent-wash); }
.role-option.selected, .role-option.active, .role-card.selected, .role-card.active {
    border-color: var(--k-accent);
    background: var(--k-accent-wash);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--k-accent) 30%, transparent);
}