/* Kanisani Digital Platform - public marketing page. Rounded-md everywhere, blue/violet brand, gold accent. */
:root {
    --r: .375rem;
    --blue: #2563eb; --violet: #7c3aed; --indigo: #6366f1; --gold: #e9c46a; --navy: #1e2a47;
    --ink: #0f172a; --muted: #475569; --line: rgba(15, 23, 42, .08);
    --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: #fff; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.mk-wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Buttons ---------- */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: .5rem 1rem; border: 0; border-radius: var(--r); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: transform .12s ease, filter .15s ease; }
.mk-btn:hover { filter: brightness(1.06); }
.mk-btn:active { transform: translateY(1px); }
.mk-btn--lg { min-height: 3rem; padding: .7rem 1.4rem; font-size: 1rem; }
.mk-btn--gold { color: #3b2a00; background: linear-gradient(135deg, #f4d58d, var(--gold)); box-shadow: 0 10px 20px -12px rgba(233, 196, 106, .9); }
.mk-btn--primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 12px 22px -12px rgba(79, 70, 229, .9); }
.mk-btn--ghost { color: #fff; background: rgba(255, 255, 255, .14); }
.mk-btn--outline { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }

/* ---------- Nav ---------- */
/* Semi-transparent: the negative margin pulls the hero up behind the bar so it shows through from the top of the page */
.mk-nav { --nav-h: 3.5rem; position: sticky; top: 0; z-index: 20; margin-bottom: calc(var(--nav-h) * -1); background: linear-gradient(90deg, rgba(37, 99, 235, .75), rgba(109, 90, 230, .75) 55%, rgba(124, 58, 237, .75)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; text-shadow: 0 1px 3px rgba(15, 23, 42, .55); box-shadow: 0 10px 22px -16px rgba(79, 70, 229, .9); }
.mk-nav-in { display: flex; align-items: center; gap: 1rem; min-height: var(--nav-h); }
.mk-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .14em; font-size: .95rem; }
.mk-logo { width: 2rem; height: 2rem; flex: none; border-radius: var(--r); box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .6); }
.mk-brand--dark { color: var(--navy); }
.mk-links { display: none; gap: 1.25rem; margin-left: 1.5rem; font-size: .875rem; font-weight: 500; }
.mk-links a { opacity: .9; }
.mk-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.mk-nav-cta { display: flex; gap: .5rem; margin-left: auto; }
.mk-nav-cta .mk-btn { min-height: 2.25rem; padding: .35rem .8rem; font-size: .8rem; }
.mk-nav-cta .mk-btn--gold { text-shadow: 0 1px 1px rgba(255, 255, 255, .45); }
@media (min-width: 48rem) { .mk-links { display: flex; } }
@media (max-width: 30rem) { .mk-nav-cta .mk-btn--ghost { display: none; } }

/* 2px red line under the bar: strongest in the middle, fading out to both sides */
.mk-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, rgba(239, 68, 68, 0) 0%, #fb7185 25%, #ef4444 50%, #fb7185 75%, rgba(239, 68, 68, 0) 100%); }

/* ---------- Hero ---------- */
.mk-hero { position: relative; overflow: hidden; padding-top: 3.5rem; color: #fff; background: radial-gradient(40rem 22rem at 85% 10%, rgba(233, 196, 106, .28), transparent 60%), radial-gradient(34rem 20rem at 0% 100%, rgba(236, 72, 153, .25), transparent 60%), linear-gradient(135deg, #1d4ed8 0%, #5b4bdb 55%, #7c3aed 100%); }
.mk-hero-in { display: grid; gap: 2.5rem; padding-top: 3rem; padding-bottom: 3.5rem; }
.mk-eyebrow { display: inline-block; padding: .3rem .7rem; border-radius: var(--r); background: rgba(255, 255, 255, .16); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mk-hero h1 { margin-top: 1rem; font-family: var(--serif); font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; }
.mk-hero h1 span { color: var(--gold); }
.mk-hero p { margin-top: 1rem; max-width: 34rem; font-size: 1.05rem; color: rgba(255, 255, 255, .9); }
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.mk-ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; }
.mk-ticks li { display: flex; align-items: center; gap: .5rem; }
.mk-ico-sm { width: 1.15rem; height: 1.15rem; flex: none; color: var(--gold); }
@media (min-width: 56rem) { .mk-hero-in { grid-template-columns: 1.15fr .85fr; align-items: center; padding-top: 4.5rem; padding-bottom: 5rem; } }

/* Sample phone screen */
.mk-phone { width: 100%; max-width: 19rem; margin: 0 auto; background: #fff; color: var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 70px -30px rgba(15, 23, 42, .7), 0 0 0 6px rgba(255, 255, 255, .18); transform: rotate(1.5deg); }
.mk-phone-bar { background: var(--navy); color: #fff; padding: .75rem 1rem; display: flex; flex-direction: column; }
.mk-phone-bar span { font-weight: 700; font-size: .85rem; }
.mk-phone-bar small { color: var(--gold); font-size: .7rem; }
.mk-phone-body { padding: .9rem; display: grid; gap: .55rem; }
.mk-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.mk-member { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: var(--r); background: #f1f5f9; font-size: .8rem; }
.mk-member b { color: var(--navy); }
.mk-member span { flex: 1; color: var(--muted); }
.mk-member i { font-style: normal; font-size: .65rem; font-weight: 700; color: #166534; background: #dcfce7; padding: .1rem .4rem; border-radius: var(--r); }
.mk-amount { display: flex; align-items: center; justify-content: space-between; padding: .6rem .7rem; border-radius: var(--r); font-size: .78rem; font-weight: 600; }
.mk-amount strong { font-family: var(--serif); font-size: 1.1rem; }
.mk-amount--blue { background: #e8eef8; color: #1e3a6e; }
.mk-amount--green { background: #e5f2eb; color: #1f5a3d; }
.mk-amount--amber { background: #fbf0dc; color: #7a4b0c; }
.mk-total { display: flex; align-items: center; justify-content: space-between; padding: .65rem .7rem; border-radius: var(--r); background: var(--navy); color: #fff; font-size: .8rem; }
.mk-total strong { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); }
.mk-save { text-align: center; padding: .7rem; border-radius: var(--r); background: #2e7d4f; color: #fff; font-weight: 700; font-size: .85rem; }
.mk-phone-note { text-align: center; font-size: .65rem; color: #94a3b8; padding: 0 0 .6rem; }

/* ---------- Sections ---------- */
.mk-section { padding: 4rem 0; }
.mk-section--tint { background: linear-gradient(180deg, #f5f6ff, #fbf7ff); }
.mk-head { max-width: 40rem; margin: 0 auto 2.2rem; text-align: center; }
.mk-kicker { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.mk-kicker--light { color: var(--gold); }
.mk-head h2, .mk-cta h2 { margin-top: .4rem; font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em; }
.mk-head p { margin-top: .7rem; color: var(--muted); }

/* Colour tokens shared by steps, cards and roles */
.mk-step, .mk-card, .mk-role { --c: var(--indigo); --tint: rgba(99, 102, 241, .1); }
.mk-step--emerald, .mk-card--emerald, .mk-role--emerald { --c: #10b981; --tint: rgba(16, 185, 129, .1); }
.mk-step--amber, .mk-card--amber, .mk-role--amber { --c: #f59e0b; --tint: rgba(245, 158, 11, .12); }
.mk-step--rose, .mk-card--rose { --c: #f43f5e; --tint: rgba(244, 63, 94, .1); }
.mk-card--sky, .mk-role--sky { --c: #0ea5e9; --tint: rgba(14, 165, 233, .1); }
.mk-card--violet { --c: #8b5cf6; --tint: rgba(139, 92, 246, .1); }

.mk-steps, .mk-grid, .mk-roles { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .mk-steps, .mk-roles { grid-template-columns: repeat(2, 1fr); } .mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .mk-steps { grid-template-columns: repeat(4, 1fr); } .mk-grid { grid-template-columns: repeat(3, 1fr); } .mk-roles { grid-template-columns: repeat(4, 1fr); } }

.mk-step, .mk-card, .mk-role { position: relative; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 1.2rem; background-image: linear-gradient(180deg, var(--tint), transparent 5rem); box-shadow: 0 18px 30px -24px var(--c); transition: transform .15s ease; }
.mk-step:hover, .mk-card:hover, .mk-role:hover { transform: translateY(-3px); }
.mk-step h3, .mk-card h3, .mk-role h3 { margin-top: .8rem; font-size: 1.02rem; }
.mk-step p, .mk-card p, .mk-role p { margin-top: .4rem; font-size: .9rem; color: var(--muted); }
.mk-num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: var(--r); color: #fff; font-weight: 800; background: var(--c); }
.mk-ico-box { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r); color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #7c3aed)); }
.mk-ico { width: 1.4rem; height: 1.4rem; }
.mk-role h3 { margin-top: 0; color: var(--c); }

/* ---------- Request onboarding ---------- */
.mk-cta { color: #fff; padding: 4rem 0; background: radial-gradient(36rem 20rem at 100% 0%, rgba(233, 196, 106, .25), transparent 60%), linear-gradient(135deg, #1d4ed8, #6d28d9); }
.mk-cta-in { display: grid; gap: 2rem; align-items: center; }
.mk-cta p { margin-top: .8rem; color: rgba(255, 255, 255, .9); max-width: 32rem; }
@media (min-width: 56rem) { .mk-cta-in { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.mk-formcard { background: #fff; color: var(--ink); border-radius: var(--r); padding: 1.4rem; border-top: 3px solid var(--gold); box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .6); }
.mk-form { display: grid; gap: .8rem; }
.mk-form h3 { font-family: var(--serif); font-size: 1.35rem; }
.mk-form label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; color: #334155; }
.mk-form input, .mk-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: .65rem .75rem; min-height: 2.75rem; border: 1px solid #cbd5e1; border-radius: var(--r); background: #fff; color: var(--ink); }
.mk-form textarea { resize: vertical; }
.mk-form input:focus, .mk-form textarea:focus { outline: 0; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.mk-form .mk-btn { width: 100%; }
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-errors { background: rgba(244, 63, 94, .1); color: #be123c; border-radius: var(--r); padding: .6rem .8rem; font-size: .8rem; }
.mk-thanks { text-align: center; padding: 1.5rem .5rem; }
.mk-thanks .mk-ico { width: 3rem; height: 3rem; margin: 0 auto; color: #10b981; }
.mk-thanks h3 { margin-top: .6rem; font-family: var(--serif); font-size: 1.5rem; }
.mk-thanks p { margin-top: .4rem; color: var(--muted); }

/* ---------- Footer ---------- */
.mk-footer { background: #f8fafc; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.mk-footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.mk-footer a:hover { color: var(--violet); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mk-step, .mk-card, .mk-role, .mk-btn { transition: none; } }