/* Learned optimism lesson. All rules scoped under .lo-* */
.lo-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lo-hero img { width: 290px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.lo-note { font-size: 13px; color: var(--dim); text-align: center; line-height: 1.35; }

/* ---------- calls ---------- */
.lo-maya img { width: 190px; display: block; }
.lo-log { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.lo-call { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--raised); font-size: 14px; }
.lo-call span { font-weight: 700; color: var(--dim); }
.lo-call b { font-weight: 700; }
.lo-call.ring { box-shadow: inset 0 0 0 2px var(--gold); animation: loRing .3s ease-in-out 2; }
.lo-call.no b { color: var(--red); }
@keyframes loRing { 50% { transform: translateX(3px); } }

/* ---------- the sentence ---------- */
.lo-sent { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.lo-part { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 56px; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: rgba(216,85,85,.12); border: 2px solid rgba(216,85,85,.6); box-shadow: 0 4px 0 #3a1c22; color: var(--text); transition: background .25s, border-color .25s; }
.lo-part:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a1c22; }
.lo-ptxt { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; }
.lo-pname { display: none; font-style: normal; font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.lo-pname i { font-style: normal; color: var(--dim); text-transform: none; letter-spacing: 0; font-weight: 600; }
.lo-sent.named .lo-pname { display: block; }
.lo-part.flip { background: rgba(63,214,154,.1); border-color: var(--mint); box-shadow: 0 4px 0 #0f3326; pointer-events: none; }
.lo-fore { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 14px; color: var(--dim); }
.lo-ftrack { height: 14px; border-radius: 7px; background: var(--raised); overflow: hidden; }
.lo-ftrack i { display: block; height: 100%; background: var(--red); border-radius: 7px; transition: width .5s cubic-bezier(.3,.7,.3,1), background .3s; }
.lo-fore b { color: var(--red); font-size: 15px; min-width: 104px; text-align: right; }
.lo-fore.f2 .lo-ftrack i, .lo-fore.f1 .lo-ftrack i { background: var(--gold); } .lo-fore.f2 b, .lo-fore.f1 b { color: var(--gold); }
.lo-fore.f3 .lo-ftrack i { background: var(--mint); } .lo-fore.f3 b { color: var(--mint); }

/* ---------- MetLife ---------- */
.lo-agents { width: 100%; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.lo-grp { display: flex; flex-direction: column; gap: 6px; }
.lo-grp b { font-size: 14px; }
.lo-crowd { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.lo-crowd i { height: 34px; border-radius: 12px 12px 4px 4px; background: var(--violet-bright); transition: opacity .5s, transform .5s; }
.lo-cro i { background: var(--gold); }
.lo-crowd i.gone { opacity: .15; transform: translateY(6px); }
.lo-left { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--mint); }

/* ---------- dispute ---------- */
.lo-belief { width: 100%; padding: 12px 14px; border-radius: 14px; background: rgba(216,85,85,.12); border: 2px solid rgba(216,85,85,.6); transition: opacity .4s; }
.lo-belief em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.lo-belief p { margin: 4px 0 0; font-family: var(--serif); font-size: 18px; line-height: 1.3; }
.lo-belief.beaten p { text-decoration: line-through; text-decoration-color: var(--mint); }
.lo-chips { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.lo-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 9px 14px; border-radius: 12px; text-align: left; font: 600 15px var(--sans); color: var(--text);
  background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 #2b2e38; transition: opacity .3s, border-color .2s; }
.lo-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b2e38; }
.lo-chip em { font-style: normal; font-size: 12px; font-weight: 700; }
.lo-chip em:empty { display: none; }
.lo-chip.right { border-color: var(--mint); background: rgba(63,214,154,.12); pointer-events: none; }
.lo-chip.right em { color: var(--mint); }
.lo-chip.wrong { border-color: var(--red); }
.lo-chip.wrong em { color: var(--red); }
.lo-chip.off { opacity: .55; pointer-events: none; }

/* ---------- curves ---------- */
.lo-curves { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.lo-curves svg { width: 100%; display: block; }
.lo-cv { fill: none; stroke-width: 3.5; }
.lo-cv0 { stroke: var(--violet-bright); fill: rgba(169,155,255,.12); }
.lo-cv1 { stroke: var(--gold); fill: rgba(252,192,80,.12); }
.lo-axis { stroke: var(--line-strong); stroke-width: 2; }
.lo-curves text { font: 600 13px var(--sans); fill: var(--dim); }
.lo-key { display: flex; justify-content: center; gap: 16px; font-size: 13px; font-weight: 700; }
.lo-k0 { color: var(--violet-bright); } .lo-k1 { color: var(--gold); }

@media (max-height: 700px) {
  .lo-hero img { max-height: 28vh; }
  .lo-maya img { width: 130px; }
  .lo-call { padding: 5px 12px; }
  .lo-ptxt { font-size: 17px; }
  .lo-part { padding: 9px 12px; min-height: 48px; }
  .lo-crowd i { height: 28px; }
  .lo-chip { padding: 6px 12px; font-size: 14px; }
  .lo-chips { gap: 5px; }
  .lo-belief { padding: 9px 12px; }
  .lo-belief p { font-size: 17px; }
}