/* =========================================================
   MAA INVEST — Landing page v7 (light)
   A design grounded in what this product actually is: a
   Kenyan chama platform, not a generic neobank template.

   Signature element: "The Circle" — a ring diagram standing in
   for a merry-go-round savings circle, with three marked points
   for Treasurer / Chair / Secretary. Reused smaller further down
   the page so the motif carries through, not a one-off hero prop.

   Type: Fraunces (serif, characterful) for display headlines —
   paired with Inter for body and Space Grotesk for numbers.
   ========================================================= */

.lp2 { --lp-ink: #0F172A; --lp-purple: #6D28D9; --lp-purple-soft: #F1E9FC;
       --lp-green: #16A34A; --lp-green-soft: #E4F7EA; --lp-paper: #FFFFFF; --lp-paper-soft: #F7F8FB;
       --lp-muted: #64748B; --lp-line: #E7EAF3; --lp-gold: #F0A233; --lp-gold-soft: #FCEFDA; }

.lp2 { font-family: 'Inter', system-ui, sans-serif; color: var(--lp-ink); background:#fff; }
.lp2 .disp { font-family: 'Fraunces', Georgia, serif; font-weight: 560; letter-spacing: -0.01em; }
.lp2 .num { font-family: 'Space Grotesk', monospace; }
.lp2 a { color: inherit; }
.lp2 .wrap { max-width: 1180px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.lp2 .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }

/* ---------- nav ---------- */
.lp2-nav { position: sticky; top:0; z-index: 60; background: #fff; border-bottom: 1px solid var(--lp-line); }
.lp2-nav .row { display:flex; align-items:center; justify-content:space-between; padding: 14px 48px; max-width:1180px; margin:0 auto; }
.lp2-nav .links { display:flex; gap:30px; }
.lp2-nav .links a { color: #334155; text-decoration:none; font-size:14px; font-weight:600; }
.lp2-nav .links a:hover { color: var(--lp-purple); }
.lp2-nav .word { color: var(--lp-ink); font-weight:700; font-size:17px; }
.lp2-nav .strap { color: var(--lp-muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.lp2-cta { background: linear-gradient(120deg, var(--lp-purple), #8b3ce0); color:#fff; border:none; border-radius:10px; padding:10px 18px; font-weight:700; font-size:13.5px; text-decoration:none; display:inline-block; }
.lp2-ghost { color: var(--lp-ink); border:1px solid var(--lp-line); border-radius:10px; padding:9px 16px; font-weight:600; font-size:13.5px; text-decoration:none; }
.lp2-burger { display:none; background:none; border:1px solid var(--lp-line); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; color: var(--lp-ink); }
.lp2-mobile { display:none; flex-direction:column; background: #fff; border-top:1px solid var(--lp-line); padding: 6px 48px 18px; }
.lp2-mobile.open { display:flex; }
.lp2-mobile a { color: #334155; text-decoration:none; padding:12px 0; border-bottom:1px solid var(--lp-line); font-weight:600; font-size:14.5px; }

/* ---------- hero (light) ---------- */
.lp2-hero { position:relative; background: radial-gradient(1000px 460px at 88% -12%, var(--lp-purple-soft), transparent 62%),
                        radial-gradient(700px 460px at 6% 105%, var(--lp-green-soft), transparent 62%),
                        #fff; color: var(--lp-ink); padding: 76px 0 60px; overflow:hidden; }
.lp2-hero .grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:50px; align-items:center; }
.lp2-hero .eyebrow { color: var(--lp-green); margin-bottom: 20px; }
.lp2-hero h1 { font-size: 56px; line-height: 1.06; margin: 0 0 22px; color: var(--lp-ink); }
.lp2-hero h1 em { font-style:normal; background: linear-gradient(100deg, var(--lp-purple), var(--lp-green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp2-hero p.lead { font-size: 17px; line-height:1.65; color: var(--lp-muted); max-width: 460px; margin-bottom: 30px; }
.lp2-hero .ctas { display:flex; gap:18px; align-items:center; margin-bottom:36px; flex-wrap:wrap; }
.lp2-hero .lp2-textlink { color: var(--lp-ink); font-weight:700; font-size:14.5px; text-decoration:none; border-bottom:2px solid var(--lp-purple); padding-bottom:3px; }
.lp2-facts { display:flex; gap:28px; flex-wrap:wrap; border-top:1px solid var(--lp-line); padding-top: 22px; }
.lp2-facts .f b { display:block; font-size:20px; font-weight:700; color: var(--lp-ink); }
.lp2-facts .f span { font-size:11.5px; color: var(--lp-muted); }

/* ---------- partner logo marquee ---------- */
.lp2-marquee-wrap { background: var(--lp-paper-soft); border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); padding: 28px 0; }
.lp2-marquee-label { text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--lp-muted); margin-bottom: 18px; }
.lp2-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
               mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp2-marquee-track { display:flex; align-items:center; gap:56px; width: max-content; animation: lp2marquee 28s linear infinite; }
.lp2-partner-logo { flex-shrink:0; font-family:'Space Grotesk',monospace; font-weight:700; font-size:17px; color: var(--lp-muted); opacity:.6; white-space:nowrap; transition: opacity .2s ease, color .2s ease; }
.lp2-partner-logo:hover { opacity:1; color: var(--lp-ink); }
.lp2-partner-logo img { height:28px; width:auto; display:block; filter: grayscale(100%); opacity:.7; transition: filter .2s ease, opacity .2s ease; }
.lp2-partner-logo:hover img { filter:none; opacity:1; }
@keyframes lp2marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lp2-marquee-track { animation: none; overflow-x: auto; } }
.lp2-marquee-track:hover { animation-play-state: paused; }

/* ---------- the circle (signature) ---------- */
.lp2-circle-wrap { display:flex; align-items:center; justify-content:center; position:relative; }
.lp2-circle { animation: lp2spin 60s linear infinite; transform-origin: center; }
@keyframes lp2spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lp2-circle .dot-label { animation: lp2spin-rev 60s linear infinite; transform-origin: center; }
@keyframes lp2spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.lp2-circle-center { position:absolute; text-align:center; }
.lp2-circle-center .amt { font-size: 26px; font-weight:700; color: var(--lp-ink); }
.lp2-circle-center .cap { font-size: 10.5px; color: var(--lp-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
@media (prefers-reduced-motion: reduce) { .lp2-circle, .lp2-circle .dot-label { animation: none; } }

/* ---------- section basics ---------- */
.lp2-section { padding: 90px 0; }
.lp2-section.soft { background: var(--lp-paper-soft); }
.lp2-kicker { display:flex; align-items:center; gap:14px; margin-bottom: 16px; }
.lp2-kicker .eyebrow { color: var(--lp-purple); }
.lp2-kicker .rule { flex:1; height:1px; background: var(--lp-line); }
.lp2-h2 { font-size: 34px; line-height:1.18; margin: 0 0 14px; max-width: 640px; color: var(--lp-ink); }
.lp2-sub { color: var(--lp-muted); font-size:15.5px; line-height:1.65; max-width:560px; }

/* ---------- goal categories (tangible, concrete) ---------- */
.lp2-goals { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:36px; }
.lp2-goal { border:1px solid var(--lp-line); border-radius:16px; padding:20px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; background:#fff; }
.lp2-goal:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(15,23,42,.18); border-color: transparent; }
.lp2-goal .ic { width:42px; height:42px; border-radius:11px; background: var(--lp-purple-soft); display:flex; align-items:center; justify-content:center; }
.lp2-goal span { font-weight:700; font-size:13.5px; color: var(--lp-ink); }
@media (max-width: 900px) { .lp2-goals { grid-template-columns: repeat(2,1fr); } }

/* ---------- two-panel compare (both light, one tinted) ---------- */
.lp2-compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.lp2-panel { border:1px solid var(--lp-line); border-radius:20px; padding:34px; background:#fff; }
.lp2-panel.accent { background:#fff; border:1.5px solid var(--lp-purple); }
.lp2-panel.accent .tag { background: var(--lp-purple-soft); color: var(--lp-purple); }
.lp2-panel .tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:20px; margin-bottom:18px; }
.lp2-panel h3 { font-size: 24px; margin: 0 0 12px; color: var(--lp-ink); }
.lp2-panel ul { list-style:none; padding:0; margin: 22px 0 0; display:flex; flex-direction:column; gap:13px; }
.lp2-panel li { display:flex; gap:10px; font-size:14px; align-items:flex-start; color: var(--lp-ink); }
.lp2-panel li svg { flex-shrink:0; margin-top:2px; }

/* ---------- approval flow (real sequence, ok to number) ---------- */
.lp2-flow { display:flex; align-items:stretch; gap:0; margin-top: 46px; }
.lp2-flow .node { flex:1; text-align:center; position:relative; padding: 0 14px; }
.lp2-flow .node .badge { width:52px; height:52px; border-radius:50%; background:var(--lp-paper-soft); border:2px solid var(--lp-line); display:flex; align-items:center; justify-content:center; margin: 0 auto 14px; font-family:'Space Grotesk',monospace; font-weight:700; font-size:16px; color: var(--lp-ink); position:relative; z-index:2; }
.lp2-flow .node.active .badge { background: var(--lp-purple); border-color: var(--lp-purple); color:#fff; }
.lp2-flow .node h4 { font-size:14.5px; margin:0 0 5px; color: var(--lp-ink); }
.lp2-flow .node p { font-size:12.5px; color:var(--lp-muted); line-height:1.5; margin:0; }
.lp2-flow .node:not(:last-child)::after { content:''; position:absolute; top:26px; left:56%; right:-44%; height:2px; background: repeating-linear-gradient(90deg, var(--lp-line) 0 7px, transparent 7px 14px); z-index:1; }

/* ---------- investment ledger table ---------- */
.lp2-ledger { border:1px solid var(--lp-line); border-radius:18px; overflow:hidden; margin-top:40px; }
.lp2-ledger table { width:100%; border-collapse:collapse; }
.lp2-ledger th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--lp-muted); font-weight:700; padding: 16px 22px; background: var(--lp-paper-soft); border-bottom:1px solid var(--lp-line); }
.lp2-ledger td { padding: 20px 22px; border-bottom:1px solid var(--lp-line); font-size:14.5px; vertical-align:middle; color: var(--lp-ink); }
.lp2-ledger tr:last-child td { border-bottom:none; }
.lp2-ledger tr:hover td { background: var(--lp-paper-soft); }
.lp2-risk { display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }
.lp2-ledger .rate { font-family:'Space Grotesk',monospace; font-weight:700; font-size:17px; }
.lp2-ledger a.act { color: var(--lp-purple); font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap; }

/* ---------- mini circle recap ---------- */
.lp2-rosca { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center; margin-top:20px; }
.lp2-rosca ol { list-style:none; padding:0; margin:0; counter-reset: rs; }
.lp2-rosca li { counter-increment: rs; padding-left:40px; position:relative; margin-bottom:22px; font-size:14.5px; color:var(--lp-muted); line-height:1.6; }
.lp2-rosca li::before { content: counter(rs); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background: var(--lp-purple); color:#fff; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.lp2-rosca li b { color: var(--lp-ink); display:block; font-size:15px; margin-bottom:3px; }

/* ---------- final cta (light, tinted) ---------- */
.lp2-final { background: linear-gradient(120deg, var(--lp-purple-soft), var(--lp-green-soft)); color: var(--lp-ink); padding: 90px 0; text-align:center; position:relative; overflow:hidden; }
.lp2-final .inner { position:relative; z-index:1; }
.lp2-final h2 { font-size:40px; margin:0 0 16px; color: var(--lp-ink); }
.lp2-final p { color: var(--lp-muted); font-size:16px; margin-bottom:34px; }

/* ---------- footer (light) ---------- */
.lp2-footer { background: #fff; border-top:1px solid var(--lp-line); color: var(--lp-muted); padding: 34px 0 26px; }
.lp2-footer .row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.lp2-footer a { color: var(--lp-muted); text-decoration:none; font-size:13px; margin-left:22px; }
.lp2-footer a:hover { color: var(--lp-ink); }

@media (max-width: 900px) {
    .lp2-nav .links { display:none; }
    .lp2-burger { display:flex; }
    .lp2-hero .grid { grid-template-columns: 1fr; }
    .lp2-hero h1 { font-size:38px; }
    .lp2-circle-wrap { margin-top: 30px; }
    .lp2-compare { grid-template-columns: 1fr; }
    .lp2-flow { flex-direction:column; gap:22px; }
    .lp2-flow .node::after { display:none; }
    .lp2-rosca { grid-template-columns: 1fr; }
    .lp2-ledger { overflow-x:auto; }
    .lp2-ledger table { min-width:560px; }
    .lp2-final h2 { font-size:28px; }
}

/* qr-section ratio on desktop; falls back to the 1fr stack above on mobile */
@media (min-width: 901px) { .lp2-compare.qr-section { grid-template-columns: 1.3fr 1fr; } }

/* ---------- small phones: the 900px breakpoint above handles tablets,
   but real phones (360–430px wide) still need tighter spacing and type ---------- */
@media (max-width: 560px) {
    .lp2 .wrap { padding-left: 18px; padding-right: 18px; }
    .lp2-nav .row { padding: 12px 18px; }
    .lp2-mobile { padding: 6px 18px 18px; }

    .lp2-hero { padding: 48px 0 36px; }
    .lp2-hero h1 { font-size: 30px; line-height: 1.15; }
    .lp2-hero p.lead { font-size: 15px; }
    .lp2-hero .ctas { gap: 12px; }
    .lp2-facts { gap: 18px; }

    .lp2-section { padding: 56px 0; }
    .lp2-h2 { font-size: 24px; }
    .lp2-sub { font-size: 14px; }

    .lp2-goals { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lp2-goal { padding: 16px 12px; }

    .lp2-panel { padding: 22px 18px; }
    .lp2-panel h3 { font-size: 19px; }

    .lp2-final { padding: 56px 0; }
    .lp2-final h2 { font-size: 22px; }
    .lp2-final p { font-size: 14px; }

    .lp2-footer .row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .lp2-footer a { margin-left: 0; margin-right: 18px; }
}