/* ==========================================================================
   SunTeam v2 — Sun Loyalty (SunCoin) landing
   ========================================================================== */
.ly { overflow-x: clip; }
.ly-hero { position: relative; padding: 18px 0 30px; overflow: hidden; }
.ly-hero .hero-bg { z-index: -1; }
.ly-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 14px; }
.ly-copy { display: flex; flex-direction: column; gap: 16px; }
.ly-copy .lead { margin: 0; }
.ly-copy .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ly-balance { display: flex; align-items: center; gap: 12px; width: fit-content; padding: 10px 12px 10px 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--sun-400), var(--sh-2); }
.ly-balance small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.ly-balance b { font-size: var(--fs-lg); font-weight: 900; }
.coin-sm { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #7A5800; background: radial-gradient(circle at 35% 30%, #FFF6B8, #FFD400 50%, #C99400); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 6px 14px -6px rgba(185,137,0,.7); }

.ly-art { position: relative; max-width: 440px; justify-self: center; width: 100%; }
.ly-coin-svg { display: block; width: 100%; height: auto; }
.ly-coin-svg .rays { transform-origin: 210px 210px; animation: spin-slow 40s linear infinite; }
.ly-coin-svg .spin { transform-origin: 210px 210px; animation: ly-flip 6s ease-in-out infinite; }
.ly-coin-svg .sparks path { transform-box: fill-box; transform-origin: center; animation: ly-twinkle 2.4s ease-in-out infinite; }
.ly-coin-svg .sparks path:nth-child(2) { animation-delay: .8s; } .ly-coin-svg .sparks path:nth-child(3) { animation-delay: 1.6s; }
.ly-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 16px; font-weight: 800; font-size: var(--fs-sm); animation: u-bob 6s ease-in-out infinite; }
.ly-tag.t1 { top: 12%; inset-inline-start: -4%; }
.ly-tag.t2 { bottom: 14%; inset-inline-end: 0; animation-delay: -3s; }
.ly-tag b { color: var(--accent-ink); }
@keyframes ly-flip { 0%, 100% { transform: rotateY(0) translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ly-twinkle { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } }

/* formula */
.ly-formula { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: clamp(20px, 4vw, 40px); border-radius: 30px; background: #111318; color: #fff; }
.f-eq { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: var(--fs-lg); }
.f-lhs { padding: 10px 18px; border-radius: 16px; background: var(--sun-400); color: #111318; font-weight: 900; }
.f-op { font-size: 2rem; font-weight: 900; color: var(--sun-400); }
.f-floor { display: inline-flex; align-items: stretch; gap: 8px; }
.f-floor .br { width: 12px; border: 3px solid var(--sun-400); }
.f-floor .br.l { border-inline-end: 0; border-top: 0; }
.f-floor .br.r { border-inline-start: 0; border-top: 0; }
.f-frac { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; }
.f-frac hr { width: 100%; border: 0; border-top: 2px solid rgba(255,255,255,.7); margin: 0; }
.f-frac b { font-weight: 800; white-space: nowrap; }
.f-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f-notes li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.9; color: rgba(255,255,255,.82); font-size: var(--fs-sm); }
.f-notes .ic { flex: none; margin-top: 5px; color: var(--sun-400); }
.f-notes b { color: #fff; }
.f-notes u { text-decoration-color: var(--sun-400); text-underline-offset: 4px; }

/* calculator */
.ly-calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; margin-top: 16px; border-radius: 26px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.lc-in { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.lc-in label small { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.lc-field { display: flex; align-items: center; gap: 8px; height: 58px; padding-inline: 18px; border-radius: 18px; background: var(--surface-sunk); }
.lc-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1.4rem; font-weight: 900; }
.lc-field span { color: var(--text-3); font-weight: 700; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-chips button { height: 32px; padding-inline: 12px; border: 0; border-radius: 999px; background: var(--amber-soft); font: inherit; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; }
.lc-chips button:hover { background: var(--sun-400); }
.lc-out { padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--sun-50), color-mix(in srgb, #FFC107 16%, var(--surface))); }
.lc-coin { display: flex; align-items: center; gap: 10px; }
.lc-coin b { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.lc-coin small { font-weight: 800; color: var(--text-2); }
.lc-out p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.lc-val { font-weight: 800; color: var(--accent-ink) !important; }

/* flow */
.ly-flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.flow-line { position: absolute; top: 18px; inset-inline: 8%; width: 84%; height: 40px; z-index: 0; }
.fl-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.fl-ico { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); transition: transform .35s var(--ease), background .35s; }
.fl-ico .ic { width: 30px; height: 30px; }
.fl-step:hover .fl-ico { transform: translateY(-6px) rotate(-6deg); background: var(--sun-400); }
.fl-n { position: absolute; top: -6px; margin-inline-start: 62px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #111318; color: var(--sun-400); font-size: var(--fs-xs); font-weight: 900; }
.fl-step b { margin-top: 6px; font-weight: 800; }
.fl-step small { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.8; }

/* plans (current vs previous) */
.ly-plans { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; align-items: start; }
.lp { padding: 22px; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 12px; }
.lp header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp header small { color: var(--text-3); font-size: var(--fs-xs); }
.lp h3 { font-size: var(--fs-lg); font-weight: 900; }
.lp h3 b { color: var(--accent-ink); }
.lp p { color: var(--text-2); line-height: 2; font-size: var(--fs-sm); margin: 0; }
.lp-now { box-shadow: inset 0 0 0 1.5px var(--sun-400), var(--sh-2); }
.lp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lp-cal span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; background: var(--amber-soft); font-size: var(--fs-xs); font-weight: 800; color: var(--accent-ink); }
.lp-ex { padding: 10px 14px; border-radius: 14px; background: var(--surface-sunk); font-size: var(--fs-sm); }
.lp-ex b { color: var(--accent-ink); }
.lp-table { display: flex; flex-direction: column; gap: 4px; }
.lt-row { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 4px; }
.lt-row > span { display: grid; place-items: center; min-height: 44px; padding: 4px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 800; text-align: center; }
.lt-head > span { background: #111318; color: #fff; font-size: var(--fs-xs); }
.lt-row > span[role=rowheader] { background: var(--surface-sunk); }
.lt-cell { background: color-mix(in srgb, #FFC107 calc(15% + var(--h) * 70%), var(--surface)); color: #111318; }

/* spend */
.ly-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ls-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.ls-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--sun-400), var(--sh-2); }
.ls-card.is-ticket { padding-bottom: 34px; }
.ls-card.is-ticket::before, .ls-card.is-ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg, #F6F5F0); box-shadow: inset 0 0 0 1px var(--line); }
.ls-card.is-ticket::before { right: -9px; } .ls-card.is-ticket::after { left: -9px; }
.ls-ico { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--amber-soft); color: var(--accent-ink); }
.ls-body { flex: 1; min-width: 0; }
.ls-body b { display: block; font-weight: 800; }
.ls-body small { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.8; }
.ls-cost { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 14px; background: #111318; color: var(--sun-400); }
.ls-cost b { font-size: var(--fs-lg); font-weight: 900; line-height: 1.2; }
.ls-cost small { font-size: 10px; color: rgba(255,255,255,.7); }
.ls-rate { position: absolute; bottom: 10px; inset-inline-start: 16px; font-size: var(--fs-xs); font-weight: 800; color: var(--mint); }
.ly-soon { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface-sunk); display: flex; flex-direction: column; gap: 10px; }
.ly-soon b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.ly-soon div { display: flex; flex-wrap: wrap; gap: 8px; }
.ly-soon span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.ly-soon i { font-style: normal; color: var(--text-3); }
.ly-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.lr { padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lr-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #111318; color: var(--sun-400); }
.lr h3 { margin: 12px 0 8px; font-weight: 900; }
.lr ol { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.lr li { font-size: var(--fs-sm); line-height: 1.9; color: var(--text-2); }
.lr a { color: var(--accent-ink); text-decoration: underline; }

/* ledger */
.ly-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: clamp(20px, 4vw, 40px); border-radius: 30px; background: linear-gradient(135deg, var(--sun-50), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.ly-ledger .h-2 { margin: 10px 0; }
.ly-ledger p { color: var(--text-2); line-height: 2; }
.lg-eq { margin-top: 10px; padding: 14px 18px; border-radius: 16px; background: #111318; color: #fff; font-weight: 800; }
.lg-eq .in { color: #4ADE80; } .lg-eq .out { color: #F87171; }
.lg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); }
.lg-list li span { flex: 1; }
.lg-list .in .ic, .lg-list .in b { color: var(--mint); }
.lg-list .out .ic, .lg-list .out b { color: var(--rose, #F04438); }
.lg-list .sum { background: #111318; color: #fff; box-shadow: none; }
.lg-list .sum b { color: var(--sun-400); font-size: var(--fs-xs); }

@media (prefers-reduced-motion: reduce) { .ly-coin-svg .rays, .ly-coin-svg .spin, .ly-coin-svg .sparks path, .ly-tag { animation: none; } }
@media (max-width: 960px) {
  .ly-hero-grid, .ly-formula, .ly-calc, .ly-plans, .ly-ledger { grid-template-columns: 1fr; }
  .ly-art { order: -1; max-width: 320px; }
  .ly-rules { grid-template-columns: 1fr; }
  .ly-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .flow-line { display: none; }
}
@media (max-width: 560px) {
  .ly-flow { grid-template-columns: 1fr 1fr; }
  .f-eq { font-size: var(--fs-md); gap: 8px; }
  .lt-row { grid-template-columns: 1.2fr repeat(3, 1fr); }
  .lt-row > span { font-size: var(--fs-xs); min-height: 38px; }
}