/* Lifestyle creep lesson. Everything scoped under .lc-*. */
.lc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lc-hero img { display: block; width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.lc-note { text-align: center; font-size: 12px; color: var(--faint); }

/* the month: a stack of what pay is spent on, savings on top */
.lc-mo { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.lc-colm { position: relative; height: min(340px, 44vh); border-bottom: 2px solid var(--line-strong); }
.lc-stk { position: absolute; left: 0; bottom: 0; top: 0; width: 56%; }
.lc-bk { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 0 8px; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); transition: bottom .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), background .4s; }
.lc-bk span { font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.lc-bk em { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
.lc-bk.base { background: var(--violet); }
.lc-bk.it { background: #5a47b8; }
.lc-bk.it.new { background: repeating-linear-gradient(135deg, var(--gold) 0 6px, var(--gold-deep) 6px 12px); }
.lc-bk.it.new span, .lc-bk.it.new em { color: #1a1206; }
.lc-bk.sv { background: var(--mint); }
.lc-bk.sv span, .lc-bk.sv em { color: #06241a; }
.lc-ln { position: absolute; left: 0; right: 0; height: 0; transition: bottom .45s cubic-bezier(.2,.8,.2,1); z-index: 2; }
.lc-ln span { position: absolute; right: 0; font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.lc-ln b { font-family: var(--mono); font-size: 13px; color: var(--text); }
.lc-ln.pay { border-top: 2px dashed var(--mint); }
.lc-ln.pay span { bottom: 3px; }
.lc-ln.nm { border-top: 2px solid var(--text); box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.lc-ln.nm span { top: 4px; }
.lc-ur { position: absolute; right: 0; transform: translateY(50%); font-size: 13px; font-weight: 700; color: var(--red); white-space: nowrap; animation: lcIn .25s ease-out both; }
.lc-ur i { font-style: normal; margin-right: 6px; }
@keyframes lcIn { from { opacity: 0; } }

/* Lee and Kai */
.lc-pps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 320px; }
.lc-pp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; }
.lc-pp b { font: 700 22px var(--sans); color: var(--text); }
.lc-pp span { font-size: 14px; line-height: 1.35; color: var(--dim); }
.lc-pp.monthly span { color: var(--gold); }

/* the two offers */
.lc-plans { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 330px; }
.lc-pl { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); transition: opacity .3s, border-color .3s; }
.lc-pl small { font: 700 12px var(--sans); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.lc-pl b { font: 700 16px var(--sans); color: var(--text); }
.lc-pl .dn { font-size: 14px; color: var(--red); }
.lc-pl .up { font-size: 14px; color: var(--mint); }
.lc-pl.b { opacity: 0; }
.lc-plans.two .lc-pl.b { opacity: 1; }
.lc-pl.b.won { border-color: var(--mint); }
.lc-pl.b.won small { color: var(--mint); }

/* four raises, two lines */
.lc-racebox { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.lc-race { width: 100%; height: auto; overflow: visible; }
.lc-race .gd { stroke: var(--line); stroke-width: 1; }
.lc-race .ax { fill: var(--dim); font: 700 13px var(--sans); }
.lc-race .ln { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lc-race .ln.yes { stroke: var(--gold); }
.lc-race .ln.plan { stroke: var(--mint); }
.lc-race .lb { font: 700 14px var(--mono); }
.lc-race .lb.yes { fill: var(--gold); }
.lc-race .lb.plan { fill: var(--mint); }
.lc-race .dt.yes { fill: var(--gold); }
.lc-race .dt.plan { fill: var(--mint); }
.lc-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 700; color: var(--dim); }
.lc-key .k::before { content: ""; display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.lc-key .yes::before { background: var(--gold); }
.lc-key .plan::before { background: var(--mint); }

/* Mia's timeline */
.lc-tl { display: flex; align-items: center; gap: 8px; }
.lc-tl > i { font-style: normal; color: var(--faint); }
.lc-tn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; padding: 14px 10px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); text-align: center; }
.lc-tn small { font: 700 12px var(--sans); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.lc-tn b { font: 700 16px var(--sans); color: var(--text); }
.lc-tn.r b { color: var(--gold); }

@media (max-height: 700px) {
  .lc-colm { height: min(300px, 40vh); }
  .lc-hero img { max-height: 26vh; }
}