/* ============================================================================
   EazyApply Finance - borrower portal
   ----------------------------------------------------------------------------
   Mobile first. The palette is taken from the logo itself: the navy of the
   tile (#003555) and the gold of its border (#d4a33c). Navy carries everything
   structural and gold is an accent only, never a surface, because the two at
   equal weight read as a sports club rather than a lender.

   One file, grouped top to bottom: tokens, base, header, buttons, forms,
   cards, landing page, dashboard, calendar, footer.
   ========================================================================== */

/* The webfont is linked from the <head> in _Layout rather than imported here:
   an @import is not fetched until this file has been parsed, which puts the
   font a whole round trip behind. The stack below falls back to the system
   font, so a machine with no internet gets a plain page and not a broken one. */

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* brand */
    --brand: #003555;           /* the logo navy: buttons, links, anything  */
                                /* white sits on                            */
    --brand-dark: #00263d;      /* hover                                    */
    --brand-mid: #0a4f78;       /* the lighter end of a navy gradient       */
    --brand-light: #2b7aa8;
    --brand-soft: #e8eef4;      /* tinted surface                           */
    --brand-softer: #f3f7fa;
    --brand-line: #c4d5e2;

    /* gold, from the border of the logo tile. An accent, never a surface.
       --gold is for fills, --gold-deep for gold coloured text, which the
       bright gold is far too pale to be. */
    --gold: #d4a33c;
    --gold-dark: #b98a26;
    --gold-deep: #8a6513;
    --gold-soft: #fbf3e2;
    --gold-line: #ecd9a8;

    /* ink and neutrals, tinted towards the navy rather than neutral grey */
    --ink: #0c1b26;
    --ink-2: #33444f;
    --muted: #5f7280;
    --muted-2: #8795a1;
    --line: #e2e8ed;
    --line-strong: #cfd8e0;
    --bg: #f5f7fa;
    --bg-2: #ecf0f5;
    --card: #ffffff;

    /* status. Five meanings that must never be mistaken for one another:
       paid (green), partial (amber), missed (red), upcoming (teal) and the
       brand navy a loan carries while it is running. Upcoming is teal rather
       than blue because a blue would be read as the navy, and it cannot be a
       plain grey either: on the calendar a grey day looks like an empty one. */
    --green: #0b7a40;
    --green-soft: #e4f4ea;
    --amber: #955408;
    --amber-soft: #fdf1df;
    --red: #c0372a;
    --red-soft: #fcecea;
    --info: #136375;
    --info-soft: #e4f2f5;
    --info-line: #b6dbe3;

    /* shape */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* elevation. Tinted with the brand hue so shadows sit under the navy
       rather than looking like a separate grey. */
    --shadow-xs: 0 1px 2px rgba(12, 27, 38, .05);
    --shadow-sm: 0 1px 2px rgba(12, 27, 38, .05), 0 2px 6px rgba(12, 27, 38, .04);
    --shadow: 0 1px 3px rgba(12, 27, 38, .06), 0 10px 26px rgba(12, 27, 38, .06);
    --shadow-lg: 0 6px 16px rgba(12, 27, 38, .08), 0 24px 56px rgba(12, 27, 38, .10);
    --shadow-brand: 0 8px 22px rgba(0, 53, 85, .28);

    --ring: 0 0 0 4px rgba(10, 79, 120, .18);
    --header-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 15.5px/1.65 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

img { max-width: 100%; }

h1, h2, h3, h4 { letter-spacing: -.025em; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 72px; }
.wrap-wide { max-width: 1140px; }

/* a page that lays out its own full-bleed bands opts out of the box */
.wrap-flush { max-width: none; padding: 0 0 72px; }

.inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.inner-narrow { max-width: 820px; }

/* the header is sticky, so anything jumped to from the nav has to keep clear
   of it or it lands underneath */
section[id], .quote-card[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* =============================================================== header === */
.topbar {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    position: sticky; top: 0; z-index: 60;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
/* set by site.js once the page has moved, so the bar only separates itself
   from the content when there is content behind it */
.topbar.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 1px 16px rgba(13, 27, 20, .06);
}

.topbar-in {
    max-width: 1140px; margin: 0 auto; padding: 0 20px;
    min-height: var(--header-h);
    display: flex; align-items: center; gap: 16px;
}

.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
/* The wordmark stacks on three lines inside the logo, so it needs more height
   than a single line mark would to stay readable. */
.logo img { height: 48px; width: auto; display: block; }
@media (max-width: 480px) { .logo img { height: 40px; } }

/* the wordmark that sits beside the logo when there is room for it */
.logo .wordmark {
    display: none; font-weight: 800; font-size: 16px;
    color: var(--ink); letter-spacing: -.03em; line-height: 1.1;
}
.logo .wordmark em {
    display: block; font-style: normal; font-size: 10.5px;
    font-weight: 700; color: var(--muted); letter-spacing: .14em;
    text-transform: uppercase;
}

.topnav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.topnav a {
    padding: 9px 14px; border-radius: var(--radius-sm);
    color: var(--ink-2); font-size: 14.5px; font-weight: 600;
    white-space: nowrap; transition: background .14s, color .14s;
}
.topnav a:hover { background: var(--bg-2); text-decoration: none; color: var(--ink); }
.topnav a.on { background: var(--brand-soft); color: var(--brand); }

/* the one coloured action in the bar */
.topnav a.nav-cta {
    background: var(--brand); color: #fff; padding: 10px 20px;
    border-radius: var(--radius-pill); box-shadow: var(--shadow-brand);
    margin-left: 6px;
}
.topnav a.nav-cta:hover { background: var(--brand-dark); color: #fff; }

.langs {
    display: flex; background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: 3px; margin-left: 8px; gap: 2px;
}
.langs a {
    padding: 5px 11px; font-size: 12px; font-weight: 700; color: var(--muted);
    border-radius: var(--radius-pill); line-height: 1.5;
}
.langs a:hover { text-decoration: none; background: #fff; color: var(--ink); }
.langs a.on { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
.langs a.on:hover { background: var(--brand); color: #fff; }

/* the burger, and the panel it opens. Hidden on a wide screen entirely. */
.nav-toggle {
    display: none; margin-left: auto;
    width: 42px; height: 42px; border: 1px solid var(--line);
    background: #fff; border-radius: 12px; cursor: pointer;
    padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span {
    display: block; position: relative; width: 17px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: background .15s;
}
.nav-toggle span::before, .nav-toggle span::after {
    content: ''; position: absolute; left: 0; width: 17px; height: 2px;
    background: var(--ink); border-radius: 2px; transition: transform .18s, top .18s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    .topnav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: #fff; border-bottom: 1px solid var(--line);
        padding: 12px 20px 18px; margin: 0;
        box-shadow: 0 18px 30px rgba(13, 27, 20, .10);
        display: none;
    }
    .topnav.open { display: flex; }
    .topnav a { padding: 13px 14px; font-size: 15.5px; }
    .topnav a.nav-cta { margin: 6px 0 0; text-align: center; }
    .langs { margin: 10px 0 0; align-self: flex-start; }
}

/* ============================================================== buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--brand); color: #fff; border: 0;
    border-radius: var(--radius-pill); padding: 14px 28px;
    font-size: 15px; font-weight: 700; font-family: inherit;
    letter-spacing: -.01em; cursor: pointer; text-align: center;
    box-shadow: var(--shadow-brand);
    transition: background .15s, transform .08s, box-shadow .15s;
}
.btn:hover {
    background: var(--brand-dark); color: #fff; text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 53, 85, .34); transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 17px 32px; font-size: 16.5px; }
.btn-sm { padding: 9px 18px; font-size: 13.5px; }

.btn-ghost {
    background: #fff; color: var(--ink); box-shadow: none;
    border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); box-shadow: var(--shadow-xs); }

.btn-gold { background: var(--gold); color: #2b1f00; box-shadow: 0 8px 22px rgba(212, 163, 60, .42); }
.btn-gold:hover { background: var(--gold-dark); color: #2b1f00; box-shadow: 0 10px 26px rgba(212, 163, 60, .52); }

.btn-white { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.btn-white:hover { background: #fff; color: var(--brand-dark); }

/* shown rather than hidden, so the borrower can see the option exists and read
   why it is closed */
.btn[disabled], .btn.is-disabled {
    background: #e6eaef; color: #98a4ae; cursor: not-allowed;
    box-shadow: none; pointer-events: none; transform: none;
}

/* ================================================================ forms === */
label {
    display: block; font-size: 13.5px; font-weight: 700;
    margin-bottom: 8px; color: var(--ink-2); letter-spacing: -.005em;
}
.hint { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.req { color: var(--red); font-weight: 700; margin-left: 3px; }

input[type=text], input[type=tel], input[type=number], input[type=date],
input[type=email], input[type=password], select, textarea {
    width: 100%; padding: 14px 15px;
    border: 1.5px solid var(--line); border-radius: 12px;
    font-size: 15.5px; background: #fff; color: var(--ink);
    font-family: inherit; font-weight: 500;
    transition: border-color .14s, box-shadow .14s, background .14s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); font-weight: 400; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-mid); box-shadow: var(--ring);
}
/* set when the server rejects a submission with fields missing */
input.err, select.err, textarea.err { border-color: #e2a79f; background: #fffafa; }

/* ---------- the phone box ----------
   The leading 0 is printed, not typed. A Malaysian number is always written
   with it, and before it was shown here people left it off, or typed +60, or
   typed 60, and the same person arrived in the database three different ways.
   Showing it fixed in front answers the question "how do you want this?"
   without a line of instructions.

   The 0 is NOT part of the posted value. PhoneNumber.Local on the server puts
   the number into its one shape whatever arrives, so a pasted +60 12 345 6789
   is still accepted and still ends up as 0123456789. The box is guidance; the
   server is the rule. */
.phone-box {
    display: flex; align-items: stretch;
    border: 1.5px solid var(--line); border-radius: 12px;
    background: #fff; overflow: hidden;
    transition: border-color .14s, box-shadow .14s;
}
.phone-box:hover { border-color: var(--line-strong); }
.phone-box:focus-within { border-color: var(--brand-mid); box-shadow: var(--ring); }
.phone-box.err { border-color: #e2a79f; background: #fffafa; }

.phone-box .phone-cc {
    display: flex; align-items: center;
    padding: 14px 4px 14px 15px;
    font-size: 15.5px; font-weight: 600; color: var(--muted);
    user-select: none; flex: 0 0 auto;
}

/* the border, radius and ring all belong to the wrapper now, so the input
   inside has to give every one of them up or they are drawn twice */
.phone-box input[type=tel] {
    border: 0; border-radius: 0; background: transparent;
    padding-left: 2px; flex: 1 1 auto; min-width: 0;
}
.phone-box input[type=tel]:hover { border-color: transparent; }
.phone-box input[type=tel]:focus { box-shadow: none; border-color: transparent; }

select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 14px center;
    background-size: 17px; padding-right: 42px;
}

/* a file box sizes itself to its own text by default, which left a small
   dashed rectangle floating in a wide card; full width reads as a drop target */
input[type=file] {
    display: block; width: 100%;
    font-size: 14px; padding: 18px 16px; background: var(--brand-softer);
    border: 1.5px dashed var(--brand-line); border-radius: 12px; cursor: pointer;
    color: var(--ink-2);
}
input[type=file]:hover { background: var(--brand-soft); border-color: var(--brand-mid); }
input[type=file]::file-selector-button {
    font-family: inherit; font-weight: 700; font-size: 13px;
    border: 0; background: var(--brand); color: #fff;
    padding: 9px 16px; border-radius: var(--radius-pill);
    margin-right: 14px; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--brand-dark); }

textarea { min-height: 92px; resize: vertical; }

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.fields { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }

/* one emergency contact: a name and a number, told apart from the next by a
   card of its own rather than a rule, which five in a row made hard to count */
.ec {
    padding: 18px; margin-bottom: 14px; border: 1px solid var(--line);
    border-radius: 14px; background: var(--bg);
}
.ec:last-child { margin-bottom: 0; }
.ec-title {
    font-size: 12px; font-weight: 800; color: var(--brand); margin: 0 0 14px;
    text-transform: uppercase; letter-spacing: .07em;
    display: flex; align-items: center; gap: 8px;
}
.ec-title::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-mid); flex: 0 0 auto;
}

/* a quiet confirmation inside a card, where a full alert would shout */
.note-ok {
    background: var(--green-soft); border: 1px solid #c2e6d1; color: var(--green);
    border-radius: 12px; padding: 12px 15px; font-size: 13.5px;
    font-weight: 600; margin-bottom: 18px;
}

/* ================================================================ cards === */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 28px; margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .card { padding: 22px 18px; } }
.card-flush { padding: 0; overflow: hidden; }
.card-raised { box-shadow: var(--shadow-lg); border-color: transparent; }
.card h2 { font-size: 17px; margin: 0 0 18px; }

.card-title {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--muted); font-weight: 800; margin: 0 0 18px;
}

/* a card headed by a numbered chip, used down the application form */
.card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.card-head .num {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.card-head .card-title { margin: 0; }
.card-head h2 { margin: 0; font-size: 16.5px; }

/* ================================================================= hero === */
.hero { padding: 48px 0 26px; text-align: center; }
.hero-left { text-align: left; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--brand); border: 1px solid var(--brand-line);
    padding: 7px 16px 7px 12px; border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 700; letter-spacing: -.005em;
    margin-bottom: 20px; box-shadow: var(--shadow-xs);
}
.eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand-mid);
    box-shadow: 0 0 0 3px rgba(10, 79, 120, .2);
    animation: live 2.4s ease-in-out infinite;
}
@keyframes live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 79, 120, .38); }
    50%      { box-shadow: 0 0 0 6px rgba(10, 79, 120, 0); }
}

h1 {
    font-size: 40px; line-height: 1.1; margin: 0 0 14px;
    letter-spacing: -.035em; font-weight: 800;
}
@media (max-width: 860px) { h1 { font-size: 34px; } }
@media (max-width: 560px) { h1 { font-size: 29px; } }

/* the part of a headline that carries the brand */
.accent { color: var(--brand); }
.accent-gold {
    background: linear-gradient(100deg, var(--gold-deep), #c79f10);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lead { color: var(--muted); margin: 0 auto 28px; font-size: 16.5px; max-width: 520px; }
.hero-left .lead { margin-left: 0; }

/* ======================================================= landing bands === */
/* The landing page is the only full-bleed page. Every band sets its own
   background and the content inside is held to the same 1140px column. */
.band { padding: 72px 0; position: relative; }
@media (max-width: 640px) { .band { padding: 52px 0; } }
.band-tint { background: var(--bg-2); }
.band-white { background: #fff; }

.band-head { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.band-head.left { text-align: left; margin-left: 0; }
.band-head h2 { font-size: 30px; margin: 0 0 12px; letter-spacing: -.03em; font-weight: 800; }
@media (max-width: 560px) { .band-head h2 { font-size: 25px; } }
.band-head p { color: var(--muted); margin: 0; font-size: 16px; }

.kicker {
    display: inline-block; font-size: 12px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand); margin-bottom: 12px;
}

/* ---- the hero band itself, with the quote card beside the copy ---- */
.hero-band {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 440px at 12% -8%, rgba(10, 79, 120, .13), transparent 60%),
        radial-gradient(760px 420px at 92% 6%, rgba(212, 163, 60, .24), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
    padding: 56px 0 72px;
}
@media (max-width: 860px) { .hero-band { padding: 36px 0 52px; } }

.hero-grid {
    display: grid; grid-template-columns: 1fr minmax(380px, 440px);
    gap: 52px; align-items: center;
}
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 34px; }
}

.hero-copy h1 { margin-bottom: 18px; }
.hero-copy .lead { margin-left: 0; font-size: 17px; max-width: 520px; }

/* the three promises under the headline */
.hero-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.hero-points li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 15.5px; font-weight: 600; color: var(--ink-2);
}
.hero-points .tick {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
    margin-top: 1px;
}

/* figures that sit under the hero copy. A grid rather than a flex row: the
   Malay labels are half as long again as the English ones and wrapped two
   then one, which read as a mistake rather than a layout. */
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.hero-stats .s .n {
    font-size: 25px; font-weight: 800; letter-spacing: -.035em; color: var(--ink);
    line-height: 1.1;
}
.hero-stats .s .l { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

@media (max-width: 560px) {
    .hero-stats { gap: 14px; }
    .hero-stats .s .n { font-size: 19px; }
    .hero-stats .s .l { font-size: 11.5px; line-height: 1.35; }
}

/* the quote card: the slider, the phone box and the button */
.quote-card {
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .8);
    padding: 0; overflow: hidden; position: relative;
}
/* Navy panel under a gold rule, which is the logo's own construction: the
   gold sits as an edge around the navy, never as a field of its own. A disc
   bleeding in from the corner was tried first and, in a bar this shallow, only
   its bottom sliver showed, which read as a seam rather than an accent. */
.quote-card .qc-top {
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
    border-bottom: 3px solid var(--gold);
    color: #fff; padding: 20px 26px 18px; position: relative; overflow: hidden;
}
.quote-card .qc-top .t {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .09em; color: rgba(255, 255, 255, .85); margin: 0;
    position: relative;
}
.quote-card .qc-body { padding: 26px; }
@media (max-width: 560px) {
    .quote-card .qc-top { padding: 18px 20px 16px; }
    .quote-card .qc-body { padding: 22px 18px; }
}

/* the secure line at the foot of the quote card */
.qc-secure {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 16px; font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.qc-secure svg { flex: 0 0 auto; color: var(--brand); }

/* ---- amount slider ---- */
.amount-display { text-align: center; margin: 2px 0 20px; }
.amount-display .cur {
    font-size: 18px; color: var(--muted); vertical-align: super;
    font-weight: 700; margin-right: 4px;
}
.amount-display .val {
    font-size: 54px; font-weight: 800; letter-spacing: -.05em;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
@media (max-width: 560px) { .amount-display .val { font-size: 44px; } }

input[type=range] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
    border-radius: var(--radius-pill); outline: none; background: var(--line);
    cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 30px; height: 30px;
    border-radius: 50%; background: var(--brand); cursor: grab;
    border: 5px solid #fff; box-shadow: 0 2px 10px rgba(0, 53, 85, .5);
    transition: transform .12s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.08); }
input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.04); }
input[type=range]::-moz-range-thumb {
    width: 30px; height: 30px; border-radius: 50%; background: var(--brand);
    cursor: grab; border: 5px solid #fff; box-shadow: 0 2px 10px rgba(0, 53, 85, .5);
}
input[type=range]:focus-visible { outline-offset: 6px; }

.range-ends {
    display: flex; justify-content: space-between;
    font-size: 12.5px; color: var(--muted); margin-top: 13px; font-weight: 700;
}

/* ---- how it works ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 14px; } }

.step {
    text-align: left; padding: 26px 22px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-xs); position: relative;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-line); }
.step .n {
    width: 40px; height: 40px; border-radius: 13px; margin: 0 0 16px;
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
    color: #fff; display: grid; place-items: center;
    font-weight: 800; font-size: 15px; box-shadow: var(--shadow-brand);
}
.step .t { font-weight: 800; font-size: 16.5px; margin-bottom: 6px; letter-spacing: -.02em; }
.step .d { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* the thread that runs between the three steps on a wide screen */
@media (min-width: 761px) {
    .steps-linked .step:not(:last-child)::after {
        content: ''; position: absolute; top: 46px; right: -18px; width: 18px;
        border-top: 2px dashed var(--brand-line);
    }
}

/* ---- features ---- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .features { grid-template-columns: 1fr; } }

.feature {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 22px; box-shadow: var(--shadow-xs);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-line); }
.feature .ic {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
}
.feature .ic svg { width: 23px; height: 23px; }
.feature.gold .ic { background: var(--gold-soft); color: var(--gold-deep); }
.feature h3 { font-size: 16.5px; margin: 0 0 7px; font-weight: 800; letter-spacing: -.02em; }
.feature p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.62; }

/* ---- who can apply ---- */
.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .checks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .checks { grid-template-columns: 1fr; } }
.check {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 20px; text-align: center; box-shadow: var(--shadow-xs);
}
.check .ic {
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 13px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
}
.check .ic svg { width: 21px; height: 21px; }
.check .t { font-weight: 700; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }

/* ---- worked example ---- */
.example {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 28px; box-shadow: var(--shadow-sm); max-width: 520px; margin: 0 auto;
}
@media (max-width: 560px) { .example { padding: 22px 18px; } }
.example .row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 13px 0; border-bottom: 1px dashed var(--line); font-size: 15px;
}
.example .row .k { color: var(--muted); font-weight: 600; }
.example .row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.example .row.total {
    border-top: 2px solid var(--line); border-bottom: 0; margin-top: 6px;
    padding-top: 16px;
}
.example .row.total .k { color: var(--ink); font-weight: 800; }
.example .row.total .v { color: var(--brand); font-size: 20px; font-weight: 800; }
.example .note { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; line-height: 1.6; }

/* ---- faq ---- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 0; box-shadow: var(--shadow-xs); overflow: hidden;
    transition: border-color .16s, box-shadow .16s;
}
.faq details[open] { border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
.faq summary {
    list-style: none; cursor: pointer; padding: 19px 54px 19px 22px;
    font-weight: 700; font-size: 15.5px; position: relative;
    letter-spacing: -.015em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
    content: ''; position: absolute; right: 22px; top: 50%;
    width: 10px; height: 10px; margin-top: -6px;
    border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
    transform: rotate(45deg); transition: transform .2s; border-radius: 2px;
}
.faq details[open] summary::after {
    transform: rotate(-135deg); margin-top: -2px; border-color: var(--brand);
}
.faq .answer {
    padding: 0 22px 20px; color: var(--muted); font-size: 14.8px; line-height: 1.68;
}
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---- closing call to action ---- */
/* Gold as a solid edge on the navy, never as a tint over it: at low alpha over
   this navy it mixes to olive. The glows inside are white for the same reason. */
.cta-band {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-mid) 100%);
    border-top: 4px solid var(--gold);
    color: #fff; border-radius: var(--radius-lg); padding: 48px 40px 52px;
    text-align: center; position: relative; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 560px) { .cta-band { padding: 34px 22px 38px; border-radius: var(--radius); } }
.cta-band::before, .cta-band::after { content: ''; position: absolute; border-radius: 50%; }
.cta-band::before {
    width: 320px; height: 320px; right: -90px; top: -140px;
    background: rgba(255, 255, 255, .09);
}
.cta-band::after {
    width: 240px; height: 240px; left: -80px; bottom: -130px;
    background: rgba(255, 255, 255, .06);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: 31px; margin: 0 0 12px; font-weight: 800; letter-spacing: -.03em; }
@media (max-width: 560px) { .cta-band h2 { font-size: 25px; } }
.cta-band p { margin: 0 auto 26px; max-width: 520px; color: rgba(255, 255, 255, .88); font-size: 16px; }
.cta-band .cta-small { margin: 22px auto 0; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.cta-band .cta-small a { color: #fff; text-decoration: underline; font-weight: 700; }

/* ---- trust row ---- */
.trust { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.trust span {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ink-2); background: #fff;
    border: 1px solid var(--line); padding: 8px 16px; border-radius: var(--radius-pill);
    font-weight: 700; box-shadow: var(--shadow-xs);
}
.trust span::before {
    content: ''; width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
    background: var(--brand-soft) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003555' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") center / 9px no-repeat;
}

/* ======================================================= centred hero === */
/* The copy sits above the calculator rather than beside it, and the calculator
   itself runs across the page instead of down one side. Every small lender in
   this market uses the same copy-left / card-right split, and a borrower who
   has three tabs open should be able to tell ours apart at a glance. */
.hero-center { text-align: center; max-width: 740px; margin: 0 auto 40px; }
.hero-center h1 { margin-bottom: 16px; }
.hero-center .lead { margin-bottom: 0; font-size: 17px; }

/* the calculator: amount on one side, the way in on the other */
.calc {
    max-width: 960px; margin: 0 auto; background: #fff;
    border-radius: var(--radius-lg); border-top: 3px solid var(--gold);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.calc-grid { display: grid; grid-template-columns: 1.15fr 1fr; }
.calc-amount { padding: 32px 36px 30px; }
.calc-go {
    padding: 32px 36px; background: var(--brand-softer);
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 860px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-go { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .calc-amount { padding: 26px 20px 24px; }
    .calc-go { padding: 26px 20px; }
}
.calc-label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--muted); font-weight: 800; margin: 0 0 16px; text-align: center;
}
.calc-go .calc-label { text-align: left; }

/* ---- the figures, as a band of their own ---- */
.stats-band {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
    color: #fff; padding: 32px 0;
}
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stats-row .s + .s { border-left: 1px solid rgba(255, 255, 255, .16); }
.stats-row .s { padding: 0 16px; }
.stats-row .s .n { font-size: 31px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; }
.stats-row .s .l { font-size: 13px; color: rgba(255, 255, 255, .76); font-weight: 600; margin-top: 5px; }
@media (max-width: 640px) {
    .stats-band { padding: 24px 0; }
    .stats-row .s { padding: 0 8px; }
    .stats-row .s .n { font-size: 20px; }
    .stats-row .s .l { font-size: 11.5px; line-height: 1.35; }
}

/* ---- how it works, as a rail rather than three cards in a row ---- */
.timeline { max-width: 740px; margin: 0 auto; position: relative; }
.timeline::before {
    content: ''; position: absolute; left: 23px; top: 14px; bottom: 14px; width: 2px;
    background: linear-gradient(var(--brand-line), var(--gold-line));
}
.tl { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding-bottom: 34px; }
.tl:last-child { padding-bottom: 0; }
.tl .n {
    width: 48px; height: 48px; border-radius: 16px; position: relative; z-index: 1;
    background: linear-gradient(140deg, var(--brand-mid), var(--brand-dark));
    color: #fff; display: grid; place-items: center;
    font-weight: 800; font-size: 17px; box-shadow: var(--shadow-brand);
}
.tl-body { padding-top: 4px; }
.tl-body .t { font-weight: 800; font-size: 18px; margin-bottom: 6px; letter-spacing: -.02em; }
.tl-body .d { color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 560px) {
    .timeline::before { left: 19px; }
    .tl { grid-template-columns: 40px 1fr; gap: 18px; padding-bottom: 28px; }
    .tl .n { width: 40px; height: 40px; border-radius: 13px; font-size: 15px; }
    .tl-body .t { font-size: 16.5px; }
}

/* ---- why us, as an uneven grid with one tile carrying the promise ---- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.bento .promise {
    grid-column: span 2;
    background: linear-gradient(155deg, var(--brand-mid), var(--brand-dark));
    border-top: 3px solid var(--gold); border-radius: var(--radius);
    color: #fff; padding: 28px 26px; box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; justify-content: center;
}
/* one reason is given the same two columns as the promise tile, so the grid
   ends flush instead of leaving a hole on the last row */
.bento .feature.wide { grid-column: span 2; }

@media (max-width: 560px) {
    .bento .promise, .bento .feature.wide { grid-column: span 1; }
}
.bento .promise h3 { font-size: 19px; margin: 0 0 16px; font-weight: 800; letter-spacing: -.025em; }
.bento .promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bento .promise li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.bento .promise .tick {
    flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; margin-top: 1px;
    background: rgba(255, 255, 255, .16); color: var(--gold);
    display: grid; place-items: center; font-size: 11px; font-weight: 800;
}

/* ---- who can apply, as one strip rather than four loose cards ---- */
.elig {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden;
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.elig-item { padding: 26px 22px; display: flex; align-items: center; gap: 14px; }
.elig-item .ic {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
}
.elig-item .ic svg { width: 20px; height: 20px; }
.elig-item .t { font-weight: 700; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.elig-item + .elig-item { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
    .elig { grid-template-columns: repeat(2, 1fr); }
    .elig-item:nth-child(odd) { border-left: 0; }
    .elig-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
    .elig { grid-template-columns: 1fr; }
    .elig-item { border-left: 0 !important; }
    .elig-item + .elig-item { border-top: 1px solid var(--line); }
}

/* ---- the faq, with its heading held beside it rather than above ---- */
.faq-layout {
    display: grid; grid-template-columns: minmax(240px, 330px) 1fr;
    gap: 50px; align-items: start;
}
@media (max-width: 920px) { .faq-layout { grid-template-columns: 1fr; gap: 26px; } }
.faq-aside { position: sticky; top: calc(var(--header-h) + 26px); }
@media (max-width: 920px) { .faq-aside { position: static; } }
.faq-aside h2 { font-size: 29px; margin: 0 0 12px; letter-spacing: -.03em; font-weight: 800; }
@media (max-width: 560px) { .faq-aside h2 { font-size: 24px; } }
.faq-aside p { color: var(--muted); margin: 0 0 22px; }
.faq-layout .faq { max-width: none; margin: 0; }

/* ============================================================= progress === */
.progress { display: flex; align-items: flex-start; gap: 0; margin: 30px 0; }
.progress .p {
    flex: 1; text-align: center; font-size: 12.5px; color: var(--muted);
    font-weight: 700; position: relative; padding-top: 30px;
}
.progress .p::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 18px; height: 18px; border-radius: 50%; z-index: 2;
    background: #fff; border: 2px solid var(--line-strong);
    transition: background .2s, border-color .2s;
}
.progress .p::after {
    content: ''; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px;
    background: var(--line-strong); z-index: 1;
}
.progress .p:last-child::after { display: none; }
.progress .p.done::before {
    background: var(--brand) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") center / 10px no-repeat;
    border-color: var(--brand);
}
.progress .p.done { color: var(--brand); }
.progress .p.done::after { background: var(--brand); }
.progress .p.now::before { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.progress .p.now { color: var(--ink); }

/* ================================================================ tiles === */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-xs);
    transition: box-shadow .16s, border-color .16s;
}
.tile:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
/* A figure like "RM 3,480.00" broke after the RM in a narrow column and read
   as two lines of nothing. It stays on one line and gives up type size
   instead, which is the trade a number wants. */
.tile .v {
    font-size: clamp(19px, 1.9vw, 26px); font-weight: 800; margin-top: 8px;
    letter-spacing: -.035em; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tile .sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 600; }

/* the same navy panel under a gold edge as the quote card and the closing band */
.tile.hero-tile {
    background: linear-gradient(140deg, var(--brand-mid) 0%, var(--brand-dark) 100%);
    border-color: transparent; border-top: 3px solid var(--gold);
    box-shadow: var(--shadow-lg);
    grid-column: span 2; position: relative; overflow: hidden;
}
.tile.hero-tile::after {
    content: ''; position: absolute; right: -60px; top: -70px;
    width: 190px; height: 190px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); pointer-events: none;
}
.tile.hero-tile > * { position: relative; }
@media (max-width: 620px) { .tile.hero-tile { grid-column: span 1; } }
.tile.hero-tile .k, .tile.hero-tile .sub { color: rgba(255, 255, 255, .82); }
.tile.hero-tile .v { color: #fff; font-size: clamp(25px, 2.5vw, 33px); }

.v.green { color: var(--green); }
.v.amber { color: var(--amber); }
.v.red { color: var(--red); }

/* ================================================================ table === */
.table-scroll { overflow-x: auto; margin: 0 -28px; padding: 0 28px; }
@media (max-width: 560px) { .table-scroll { margin: 0 -18px; padding: 0 18px; } }
table { width: 100%; border-collapse: collapse; min-width: 540px; }
th, td { padding: 13px 11px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); font-weight: 800;
    border-bottom: 1.5px solid var(--line-strong);
}
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
td { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--bg); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.is-today, tbody tr.is-today:hover { background: var(--info-soft); }

/* =============================================================== badges === */
.badge {
    display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
}
.badge.Paid, .badge.Settled { background: var(--green-soft); color: var(--green); }
.badge.Partial { background: var(--amber-soft); color: var(--amber); }
.badge.Pending { background: var(--info-soft); color: var(--info); }
.badge.Overdue, .badge.Rejected { background: var(--red-soft); color: var(--red); }
.badge.Running { background: var(--brand-soft); color: var(--brand); }
.badge.Void { background: #edf0f4; color: var(--muted); }

/* the account code chip beside the greeting */
.code-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--line);
    padding: 7px 14px; border-radius: var(--radius-pill);
    font-size: 12px; color: var(--muted); font-weight: 700;
    vertical-align: middle; box-shadow: var(--shadow-xs);
}
.code-chip strong {
    color: var(--ink); font-weight: 800; letter-spacing: .1em;
    font-family: ui-monospace, Consolas, monospace;
}

/* =============================================================== alerts === */
.alert {
    padding: 15px 18px; border-radius: 13px; margin-bottom: 20px;
    font-size: 14.5px; font-weight: 600; display: flex; gap: 11px;
    align-items: flex-start; line-height: 1.55;
}
.alert::before { font-size: 15px; line-height: 1.4; flex: 0 0 auto; }
.alert-error { background: var(--red-soft); border: 1px solid #f2cbc7; color: #96291e; }
.alert-error::before { content: '\26A0'; }
.alert-info { background: var(--info-soft); border: 1px solid var(--info-line); color: var(--info); }
.alert-info::before { content: '\2139'; }
.alert-ok { background: var(--green-soft); border: 1px solid #c2e6d1; color: var(--green); }
.alert-ok::before { content: '\2713'; }
.alert-warn { background: var(--amber-soft); border: 1px solid var(--gold-line); color: var(--amber); }
.alert-warn::before { content: '\26A0'; }

/* ========================================================== empty state === */
.empty { text-align: center; padding: 50px 24px; }
.empty .icon {
    width: 68px; height: 68px; border-radius: 22px; margin: 0 auto 20px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-size: 29px;
}
.empty h2 { font-size: 22px; margin: 0 0 10px; letter-spacing: -.025em; }
.empty p { color: var(--muted); margin: 0 auto 26px; max-width: 400px; }

/* a round success mark, for the page shown after an application lands */
/* Green rather than the brand navy on purpose: this is the tick that says an
   application arrived safely, and a tick is read as green everywhere. */
.seal {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 6px;
    background: linear-gradient(140deg, #15a35c, var(--green));
    color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 26px rgba(11, 122, 64, .32);
    animation: seal-in .45s cubic-bezier(.2, .9, .3, 1.4) both;
}
.seal svg { width: 36px; height: 36px; }
@keyframes seal-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===================================================== mission calendar === */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cal-head h2 { margin: 0; font-size: 19px; flex: 1; text-align: center; letter-spacing: -.025em; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal .dow { text-align: center; font-size: 11px; color: var(--muted); font-weight: 800; padding-bottom: 8px; letter-spacing: .04em; }
.cal .day {
    aspect-ratio: 1; border-radius: 13px; border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 13.5px; background: #fff; position: relative; color: var(--muted);
    font-weight: 600;
}
.cal .day.blank { border: 0; background: transparent; }
.cal .day.mark { cursor: pointer; font-weight: 800; border-width: 1.5px; transition: transform .12s, box-shadow .12s; }
.cal .day.mark:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-sm); }
.cal .day.Paid { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.cal .day.Partial { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.cal .day.Overdue { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.cal .day.Pending { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.cal .day .dot { font-size: 9px; font-weight: 700; margin-top: 1px; line-height: 1; }
.cal .day.today { box-shadow: 0 0 0 2px var(--ink); }

/* The day the panel underneath is showing. The page opens on one already, so
   this has to read as "you are looking at this one" rather than as another
   today marker: a wider ring, held off the tile by a gap, in the day's own
   status colour. Declared after .today on purpose, so a day that is both reads
   as the selected one. */
.cal .day.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px currentColor; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 7px; vertical-align: -1px; }
.legend i.Paid { background: var(--green); }
.legend i.Partial { background: var(--amber); }
.legend i.Overdue { background: var(--red); }
.legend i.Pending { background: var(--info); }

.day-detail {
    margin-top: 20px; padding: 20px; border: 1px solid var(--line);
    border-radius: 14px; background: var(--bg); display: none;
}
.day-detail.show { display: block; animation: fade-up .22s ease both; }
.day-detail .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14.5px; }
.day-detail .row span:first-child { color: var(--muted); font-weight: 600; }
.day-detail .row span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =============================================================== footer === */
.site-foot {
    background: #00263d; color: rgba(255, 255, 255, .74);
    padding: 56px 0 0; font-size: 14.5px;
}
.site-foot a { color: rgba(255, 255, 255, .72); }
.site-foot a:hover { color: #fff; text-decoration: none; }

.foot-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px;
    padding-bottom: 44px;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }

/* the logo keeps its own colours by sitting on a white chip, so whatever logo
   is dropped in later still reads against the dark */
.foot-logo {
    display: inline-flex; background: #fff; padding: 12px 16px;
    border-radius: 14px; margin-bottom: 18px;
}
.foot-logo img { height: 46px; width: auto; display: block; }

.foot-about p { margin: 0 0 16px; line-height: 1.65; max-width: 330px; color: rgba(255, 255, 255, .6); }

.foot-col h4 {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
    color: #fff; font-weight: 800; margin: 0 0 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot-col li { line-height: 1.5; }
.foot-col .muted { color: rgba(255, 255, 255, .5); }

.foot-contact a { display: inline-flex; align-items: flex-start; gap: 9px; font-weight: 600; }
.foot-contact svg { flex: 0 0 auto; opacity: .7; margin-top: 3px; }
.foot-contact .plain { display: flex; align-items: flex-start; gap: 9px; color: rgba(255, 255, 255, .6); }

/* the licence block, which has to be easy to find on a lender's site */
.foot-licence {
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 3px solid var(--gold); border-radius: 12px;
    padding: 14px 16px; background: rgba(255, 255, 255, .05);
    font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .72);
}
.foot-licence strong { color: #fff; display: block; font-size: 12.5px; margin-bottom: 3px; }

.foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0 30px; display: flex; gap: 16px; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    font-size: 13px; color: rgba(255, 255, 255, .5);
}
.foot-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* the old one-line footer, kept for any page that still uses it */
.foot { text-align: center; color: var(--muted); font-size: 12.5px; padding: 32px 20px; }

/* ==================================================== talk to a person === */
/* Bottom right, above everything, on every page. Sits clear of the iOS home
   bar so it is not half under the edge of the screen on an iPhone. */
.wa-float {
    position: fixed; right: 20px; z-index: 900;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
    transition: transform .14s, box-shadow .14s;
}
.wa-float::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .55);
    animation: wa-ring 2.6s ease-out infinite;
}
@keyframes wa-ring {
    0%   { transform: scale(1); opacity: .8; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}
.wa-float:hover {
    color: #fff; text-decoration: none; transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(37, 211, 102, .55);
}
.wa-float:active { transform: translateY(0); }
@media (max-width: 620px) { .wa-float { width: 52px; height: 52px; right: 16px; } }

/* =============================================================== pay to === */
.verify-btn { margin-left: 8px; vertical-align: middle; }

.tile.hero-tile .pay-to-btn {
    margin-top: 12px; width: 100%;
    background: rgba(255, 255, 255, .17); color: #fff;
    border: 1px solid rgba(255, 255, 255, .34); border-radius: 12px;
    padding: 11px 16px; font-size: 14.5px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background .14s, border-color .14s;
}
.tile.hero-tile .pay-to-btn:hover { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .5); }

/* the panel, and the dark area behind it */
.modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(6, 20, 31, .62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 18px; animation: fade .16s ease both;
}
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-panel {
    background: var(--card); border-radius: var(--radius-lg);
    padding: 26px; width: 100%; max-width: 450px;
    max-height: calc(100vh - 36px); overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    animation: pop .22s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { margin: 0; flex: 1; font-size: 19px; letter-spacing: -.025em; }
.modal-close {
    background: var(--bg-2); border: 0; cursor: pointer; font-family: inherit;
    font-size: 20px; line-height: 1; color: var(--muted);
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; transition: background .14s, color .14s;
}
.modal-close:hover { color: var(--ink); background: var(--line); }

/* stops the page behind scrolling while the panel is open */
body.no-scroll { overflow: hidden; }

.bank {
    border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; margin-bottom: 12px; background: var(--bg);
}
.bank:last-of-type { margin-bottom: 18px; }
.bank-name { font-weight: 800; font-size: 15.5px; margin-bottom: 10px; letter-spacing: -.02em; }
.bank-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; }
/* wide enough that ACCOUNT NUMBER stays on one line */
.bank-row .k {
    flex: 0 0 120px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); font-weight: 800;
}
.bank-row .v { flex: 1; word-break: break-word; font-size: 15px; font-weight: 600; }
.bank-row .v strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

.copy-btn {
    margin-left: 8px; background: var(--brand-soft); color: var(--brand);
    border: 0; border-radius: var(--radius-pill); padding: 5px 13px;
    font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
    transition: background .14s;
}
.copy-btn:hover { background: var(--brand-line); }
.copy-btn.copied { background: var(--green); color: #fff; }

/* On a phone a fixed label column forces "ACCOUNT NUMBER" onto two lines and
   squeezes the number beside it. Stacking reads better and gives the copy
   button somewhere sensible to sit. */
@media (max-width: 430px) {
    .bank-row { flex-direction: column; gap: 3px; padding: 7px 0; }
    .bank-row .k { flex: none; }
    .bank-row .v { width: 100%; }
}

/* ============================================================= receipts === */
.tile.hero-tile .receipt-btn { margin-top: 8px; }

.receipt-list { border-top: 1px solid var(--line); }
.receipt-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.receipt-row:last-child { border-bottom: 0; }
.receipt-row .when { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.receipt-row .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.receipt-row .file {
    font-size: 12px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}

/* ======================================================== dashboard top === */
/* The pay box holds two buttons, so it is taller than a tile showing one
   figure. In a shared grid that stretched every neighbour to match and left
   them looking half empty, so it gets its own column and the figures wrap
   beside it. */
.dash-top {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 14px; align-items: stretch; margin-bottom: 18px;
}
.dash-top .tiles-stats { margin-bottom: 0; }
.dash-top .tile.hero-tile {
    grid-column: auto; margin: 0;
    display: flex; flex-direction: column;
}
.dash-top .tile.hero-tile .sub { margin-bottom: 14px; }
.dash-top .tile.hero-tile .pay-to-btn:first-of-type { margin-top: auto; }

@media (max-width: 820px) {
    .dash-top { grid-template-columns: 1fr; }
    .tiles-stats { grid-template-columns: 1fr 1fr; }
}

/* a greeting line that keeps the name and the chips on one baseline */
.dash-greet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ========================================================== loan terms === */
.terms { display: flex; flex-direction: column; }
.term {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.term:last-child { border-bottom: 0; padding-bottom: 0; }
.term .k { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.term .k .hint { margin-left: 6px; }
.term .v {
    font-weight: 800; font-size: 15px; text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.term .v.minus { color: var(--red); }

/* what they borrowed, what reached them, what they owe back */
.term-strong {
    background: var(--brand-softer); margin: 6px -14px; padding: 14px;
    border-radius: 12px; border-bottom: 0;
}
.term-strong + .term { border-top: 0; }
.term-strong .k { color: var(--ink); font-weight: 700; }
.term-strong .v { font-size: 18px; color: var(--brand); }

@media (max-width: 480px) {
    .term { flex-direction: column; gap: 3px; padding: 11px 0; }
    .term .v { text-align: left; }
    .term-strong { margin: 6px 0; }
}

/* ============================================================ due today === */
/* Shown inside the pay box when money is owed today and has not arrived.
   It has to catch the eye on a phone glanced at in a shop, so it pulses,
   but gently: this is a nudge on the day, not a debt collector. */
.pay-alert {
    display: flex; align-items: center; gap: 9px;
    margin: 14px 0 0; padding: 10px 13px; border-radius: 11px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4;
    animation: pay-alert-pulse 2s ease-in-out infinite;
}
@keyframes pay-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.dash-top .tile.hero-tile .pay-alert { margin-top: auto; }
.dash-top .tile.hero-tile .pay-alert + .pay-to-btn { margin-top: 12px; }

/* ======================================================== one time code === */
.otp-input {
    font-size: 30px; letter-spacing: .5em; text-align: center;
    font-weight: 800; padding: 16px 10px 16px 24px;
    font-variant-numeric: tabular-nums;
}

/* an auth page is one narrow column, centred, with nothing else competing */
.auth-wrap { max-width: 460px; margin: 0 auto; padding-top: 18px; }
.auth-icon {
    width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 20px;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
}
.auth-icon svg { width: 27px; height: 27px; }

/* a line of small print under an auth card */
.auth-foot { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 20px; }

/* ============================================================ reveal in === */
/* Bands fade in as they arrive. The starting state is behind html.js, which a
   one line script in the head sets, so a browser with scripting off never
   hides anything: it simply gets the finished page with no animation. */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.in {
    opacity: 1; transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pay-alert, .eyebrow .dot, .wa-float::before, .seal { animation: none; }
    html.js .reveal, html.js .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* ============================================================== utility === */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media print {
    .topbar, .wa-float, .site-foot, .modal { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
}