/* Singbud refine layer: loaded last. The grown-up pass on the everyday screens.
   Tokens live in base.css (--line, --sh-card, --teal-wash, --teal-text, --r-btn). Here: the shell,
   Home, Path, Songs, You and the Games tab, each tuned by hand. Rules of thumb:
   - one coral button per screen where we can (the main action); the rest are white or links
   - teal for progress and what's selected; yellow only for highlights and wins
   - cards are white on the warm page with a hairline; nothing sits on a solid coloured ledge
   - Bud shows up for a reason (the session card, onboarding, wins), small everywhere else */

/* ---------- Page heads ---------- */

.page-head { margin: 4px 0 22px; }
.page-head .eyebrow { margin-bottom: 8px; }
.page-title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.page-lede { margin-top: 8px; font-size: 1rem; color: var(--ink-soft); }
.card-title, .card h2.card-title, .hcard h2 { font-weight: 650; letter-spacing: -0.01em; }
.card-meta { font-weight: 600; font-size: 0.85rem; }
.card-note { font-size: 0.93rem; }
.hcard, .card { border-radius: 18px; }

/* ---------- Shell: tab bar (phones) and side rail (desktop) ---------- */

.tab { font-weight: 600; }
.tab .ic .ic-fill { fill: var(--dash); }
.tab.is-on { color: var(--ink); }
.tab.is-on .ic { background: var(--teal-wash); color: var(--teal-text); }
.tab.is-on .ic .ic-fill { fill: var(--teal-dark); }

@media (min-width: 960px) {
  .tabs { background: var(--panel); box-shadow: inset -1px 0 0 var(--line); gap: 22px; }
  .rail-brand { font-size: 1.4rem; }
  .tab-list { gap: 2px; }
  .tab { min-height: 44px; padding: 8px 12px; gap: 12px; border-radius: 12px; font-size: 0.98rem; color: var(--ink-soft); }
  .tab .ic { width: 22px; height: 22px; padding: 0; background: none; }
  .tab:hover { background: rgba(46, 61, 68, 0.045); color: var(--ink); }
  .tab.is-on, .tab.is-on:hover { background: var(--teal-wash); color: var(--ink); box-shadow: none; }
  .tab.is-on .ic { background: none; animation: none; }
  .rail-user { background: var(--white); box-shadow: var(--sh-card); border-radius: 14px; }
  .rail-user .avatar { width: 36px; height: 36px; font-size: 0.95rem; }
}
.avatar { box-shadow: inset 0 0 0 2px rgba(46, 61, 68, 0.85); font-weight: 650; }

/* ---------- Home: today's session ---------- */

.today {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(145, 215, 215, 0.38) 0%, rgba(145, 215, 215, 0) 55%),
    linear-gradient(180deg, #EAF6F5 0%, #F6FBFA 100%);
  box-shadow: 0 0 0 1px #CFE6E4, 0 1px 2px rgba(46, 61, 68, 0.04), 0 16px 36px -24px rgba(42, 113, 114, 0.45);
  border-radius: 20px;
  padding: 22px 20px 20px;
  grid-template-columns: 1fr 76px;
}
.today .eyebrow { color: var(--teal-text); margin-bottom: 8px; }
.today-title { font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem); font-weight: 650; letter-spacing: -0.02em; }
.today-body { color: var(--ink-soft); }
.today-bud { width: 76px; margin-top: -6px; }
.today-parts { margin-top: 10px; font-weight: 500; font-size: 0.93rem; line-height: 1.55; color: #3F5258; }
.today-parts li + li::before { color: var(--teal-deeper); font-weight: 700; }
.today-actions { margin-top: 18px; }
.today-done {
  background: radial-gradient(120% 140% at 100% 0%, rgba(239, 228, 174, 0.55) 0%, rgba(239, 228, 174, 0) 60%), linear-gradient(180deg, #FBF7E6 0%, #FFFDF6 100%);
  box-shadow: 0 0 0 1px #EDE3BE, 0 1px 2px rgba(46, 61, 68, 0.04);
}
.today-locked {
  background: radial-gradient(120% 140% at 100% 0%, rgba(253, 225, 222, 0.8) 0%, rgba(253, 225, 222, 0) 60%), linear-gradient(180deg, #FFF6F4 0%, #FFFCFB 100%);
  box-shadow: 0 0 0 1px #F3D9D5, 0 1px 2px rgba(46, 61, 68, 0.04);
}
@media (min-width: 560px) {
  .today { grid-template-columns: 1fr 96px; padding: 26px 28px 26px; }
  .today-bud { width: 96px; }
  .today-actions .btn-lg { min-width: 240px; }
}
@media (min-width: 960px) {
  .today { grid-template-columns: 1fr 92px; }
  .today-bud { width: 92px; }
  .today .today-title { font-size: 1.85rem; }
}

/* Due cards (check-up, retest, event) */
.due-card { background: var(--white); box-shadow: var(--sh-card); }
.due-icon { border-radius: 12px; background: var(--teal-wash); color: var(--teal-text); }
.due-icon .ic { width: 22px; height: 22px; }
.due-icon .ic .ic-fill { fill: var(--teal); }

/* ---------- Home: stats ---------- */

.stat-grid { gap: 12px; }
.stat-tile { padding: 14px 16px 15px; border-radius: 16px; column-gap: 8px; box-shadow: var(--sh-card); transition: box-shadow 160ms ease, transform 160ms ease; }
.stat-icon, .stat-icon .ic { width: 18px; height: 18px; }
.stat-icon { align-self: center; color: var(--teal-text); }
.stat-icon .ic { stroke-width: 2.2; }
.stat-icon .ic .ic-fill { fill: var(--teal); }
.stat-label { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em; }
.stat-value {
  margin-top: 10px; font-weight: 650; font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stat-sub { margin-top: 3px; font-size: 0.8rem; }
@media (hover: hover) and (pointer: fine) {
  a.stat-tile:hover { box-shadow: var(--sh-raise); }
}

/* ---------- Home: this week ---------- */

.week-strip { margin-top: 16px; gap: 2px; }
.week-strip li { gap: 7px; }
.wk-dot { width: 30px; height: 30px; background: var(--mint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wk-dot .ic { width: 15px; height: 15px; stroke-width: 3; }
.week-strip li.on .wk-dot { background: var(--teal-deeper); }
.week-strip li.is-today .wk-dot { box-shadow: inset 0 0 0 1.5px var(--teal-text); background: var(--white); }
.week-strip li.is-today.on .wk-dot { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--teal-deeper); background: var(--teal-deeper); }
.week-strip li.is-today:not(.on) .wk-dot::after { box-shadow: 0 0 0 1.5px var(--teal-deeper); }
.wk-day { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; }
.is-today .wk-day { color: var(--teal-text); font-weight: 700; }

/* ---------- Home: guest sign-in, in the app's own voice rather than a banner ---------- */

.hh-guest { background: var(--white); box-shadow: var(--sh-card); grid-template-columns: 40px 1fr; }
.hh-guest-ic { width: 40px; height: 40px; background: var(--sun); color: #7A6A1E; }
.hh-guest-ic .ic { width: 20px; height: 20px; }
.hh-guest-ic .ic .ic-fill { fill: var(--sun-deep); }
.hh-guest .card-title { font-size: 1.05rem; }
.hh-guest .card-note { font-size: 0.9rem; }

/* ---------- Bud's band card on Home: a short groove list, like a music app ---------- */

.jx-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  background: var(--white); box-shadow: var(--sh-card);
}
.jx-card:hover { transform: none; box-shadow: var(--sh-raise); }
.jx-card:active { transform: scale(0.99); }
.jx-card-text { gap: 4px; }
.jx-card-text small { font-weight: 600; font-size: 0.72rem; color: var(--teal-text); }
.jx-card-text b { font-weight: 650; font-size: 1.15rem; }
.jx-card-text span { font-size: 0.9rem; line-height: 1.45; }
.jx-card-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.jx-card-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.jx-card-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--mint); color: var(--ink-soft); }
.jx-card-ic .jx-emblem-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jx-card-ic .jx-fill { fill: none; }
.jx-card-name { font-weight: 600; font-size: 0.93rem; }
.jx-card-bpm { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.jx-card-more { padding-top: 9px; font-size: 0.82rem; color: var(--ink-soft); }
.jx-card .jx-card-cta { align-self: flex-start; }
@media (min-width: 960px) {
  .home-side .jx-card { justify-content: space-between; align-items: stretch; gap: 12px; }
  .home-side .jx-card .jx-card-cta { margin-top: auto; }
}
@media (min-width: 1240px) {
  .home-side .jx-card { display: flex; align-items: stretch; }
}
@media (hover: hover) and (pointer: fine) {
  .jx-card:hover .jx-card-name { color: var(--ink); }
  .jx-card:hover .jx-card-cta { --sh-card: inset 0 0 0 1px #C9C1B2, 0 1px 2px rgba(46, 61, 68, 0.06); background: #FBFAF7; }
}

/* ---------- Path ---------- */

.seg-switch { padding: 3px; border-radius: 12px; background: #EFECE6; border: 0; }
.seg-switch a { border-radius: 9px; font-weight: 600; }
.seg-switch a[aria-current="page"] { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(46, 61, 68, 0.1); }
@media (hover: hover) and (pointer: fine) {
  .seg-switch a:hover:not([aria-current="page"]) { background: rgba(255, 255, 255, 0.55); }
}
.seg-ctl { background: #EFECE6; border-radius: 14px; }
.seg-ctl span { border-radius: 10px; font-weight: 600; }

.lvl-card { border-radius: 18px; }
.lvl-now { box-shadow: 0 0 0 1.5px var(--teal-deeper), 0 14px 32px -22px rgba(42, 113, 114, 0.5); }
.lvl-later { background: var(--white); box-shadow: var(--sh-card); }
.lvl-later .lvl-head h2 { color: #3E4F56; }
.lvl-head h2 { font-weight: 650; font-size: 1.2rem; }
.lvl-status { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; background: #F1EEE8; }
.lvl-now .lvl-status { background: var(--teal-wash); color: var(--teal-text); }
.level-badge { width: 40px; height: 40px; font-size: 1.15rem; font-weight: 650; background: var(--teal-deeper); box-shadow: none; }
.lvl-later .level-badge { background: #E3DFD7; color: var(--ink-soft); box-shadow: none; }
.lvl-past .level-badge { background: var(--teal-dark); box-shadow: none; }
.lvl-after { background: var(--white); box-shadow: var(--sh-card); }
.lvl-after .level-badge { background: var(--sun); color: #7A6A1E; }
.lvl-meta { font-weight: 600; font-size: 0.85rem; }

.lessons { gap: 6px; }
.lesson { min-height: 60px; border-radius: 12px; background: var(--mint); padding: 9px 12px 9px 9px; transition: background-color 160ms ease, transform 90ms ease-out; }
.lesson-node { width: 40px; height: 40px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lesson-node .ic { width: 18px; height: 18px; }
.lesson-node .ic .ic-fill { fill: var(--teal-deeper); }
.lesson.is-open .lesson-node { box-shadow: inset 0 0 0 1.5px var(--teal-dark); }
.lesson.is-next { background: var(--teal-wash); box-shadow: inset 0 0 0 1px #CBE5E3; }
.lesson.is-next .lesson-node { background: var(--coral); box-shadow: 0 1px 2px rgba(201, 86, 75, 0.3); }
.lesson.is-next .lesson-tag { color: var(--teal-text); }
.lesson-text b, .lesson-text > span:first-child { font-weight: 600; }
.lesson-tag { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; }
.lesson.is-locked, .lesson.is-paywall { background: #F4F2EE; }
@media (hover: hover) and (pointer: fine) {
  .lesson:hover { background: #EFECE5; }
  .lesson.is-next:hover { background: #DDF0EE; }
}

/* ---------- Songs ---------- */

.way { box-shadow: var(--sh-card); border-radius: 16px; }
.way-ic { width: 36px; height: 36px; border-radius: 10px; }
.way-ic .ic { width: 19px; height: 19px; }
.way-teach .way-ic { background: #EFECE6; color: var(--ink); }
.way-hum .way-ic { background: var(--blush); color: var(--coral-text); }
.way-along .way-ic { background: var(--teal-wash); color: var(--teal-text); }
.way-jam .way-ic { background: #FBF0D8; color: #9A6A12; }
.way-ic .ic .ic-fill { fill: currentColor; }
.way b { font-weight: 650; }

.chip { border-width: 1px; border-color: var(--line-strong); font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--teal-wash); border-color: var(--teal-deeper); color: var(--ink); }

.lib-list { gap: 8px; }
.lib-card { border-radius: 14px; box-shadow: var(--sh-card); }
.lib-icon { width: 38px; height: 38px; background: var(--teal-wash); color: var(--teal-text); }
.lib-icon .ic { width: 16px; height: 16px; }
.lib-icon .ic .ic-fill { fill: var(--teal-deeper); }
.lib-main:hover .lib-icon { background: var(--teal); }
.is-locked .lib-icon { background: #F1EEE8; color: var(--ink-soft); }
.lib-text b { font-weight: 600; font-size: 1rem; }
.lib-fav, .lib-rec { color: #A9B4B8; }

.along-card, .sa-learn, .pg-next, .px-hero { background: var(--white); box-shadow: var(--sh-card); }
.pg-icon { background: var(--teal-wash); color: var(--teal-text); border-radius: 12px; }
.pg-card { border-radius: 16px; box-shadow: var(--sh-card); }
.px-card { border-radius: 16px; box-shadow: var(--sh-card); }
.px-cat-icon { box-shadow: var(--sh-card); border-radius: 12px; }
.px-go { background: var(--teal-wash); color: var(--teal-text); }
.px-go:hover { background: var(--teal); }
.px-levels, .tempo { border-width: 1px; border-color: var(--line-strong); }
.px-levels button[aria-pressed="true"], .tempo button[aria-pressed="true"] { background: var(--teal-wash); color: var(--teal-text); box-shadow: inset 0 0 0 1px var(--teal-deeper); }
.tempo-loop { border-width: 1px; border-color: var(--line-strong); }
.tempo-loop[aria-pressed="true"] { background: var(--teal-wash); border-color: var(--teal-deeper); }

/* ---------- You: progress and profile ---------- */

.goal-chips li { border-radius: 12px; font-weight: 600; }
.goal-chips li.is-main { background: var(--teal-wash); box-shadow: inset 0 0 0 1px #CBE5E3; }
.goal-chips small { font-weight: 600; color: var(--teal-text); }
.event-line { background: var(--mint); box-shadow: inset 0 0 0 1px var(--line); }
.unlock-card.is-unlocked { background: var(--teal-wash); box-shadow: 0 0 0 1px #CBE5E3; }
.user-name { font-weight: 650; }
.demo-badge { font-weight: 600; }
.log-stats li, .hist-chips li, .change-list li, .plain-list li, .recap-facts li, .sc-summary li, .week-list li, .singers-list li { border-radius: 12px; }
.plain-list li.plain-tip { background: #FBF7E4; }
.ba-now { background: #FBF7E4; }
.ba-big, .log-stats b, .stat-text b { font-weight: 650; }

/* ---------- Sheets and toasts ---------- */

@media (min-width: 760px) {
  .sheet { border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(31, 45, 51, 0.35), 0 0 0 1px rgba(46, 61, 68, 0.06); }
}
.sheet-title { font-weight: 650; }
.app-toast { border-radius: 12px; font-weight: 600; }

/* ---------- Games tab: still playful, just better made. In-game screens are left as they are. ---------- */

.gh-daily { box-shadow: 0 0 0 1px var(--sun-deep), 0 1px 2px rgba(46, 61, 68, 0.04); }
.gh-daily-ic { width: 44px; height: 44px; box-shadow: 0 0 0 1px var(--sun-deep); }
.gh-daily-text small { font-weight: 600; font-size: 0.72rem; color: #8A6A10; }
.gh-daily-text b, .gh-name { font-weight: 650; }
.gh-notes { font-weight: 650; }
.gh-card { border-radius: 18px; }

/* Game cards show the mechanic: soft scenes in the brand colours, a teal pitch line, no mascot */
.gh-flight .gh-art { background: linear-gradient(180deg, #E4F4F4 0%, #F5FBFA 100%); }
.gh-bubbles .gh-art { background: linear-gradient(180deg, #EEF1FB 0%, #F8F8FC 100%); }
.gh-copy .gh-art { background: linear-gradient(180deg, #FBF3E8 0%, #FCF9F4 100%); }
.gh-scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gh-scene .sc-cloud rect { fill: var(--white); stroke: rgba(46, 61, 68, 0.06); stroke-width: 1; }
.gh-scene .sc-staff path { stroke: rgba(46, 61, 68, 0.07); stroke-width: 1; fill: none; }
.gh-scene .sc-trail { fill: none; stroke: var(--teal-deeper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gh-scene .sc-trail.is-thin { stroke-width: 2; stroke-dasharray: 2 5; opacity: 0.7; }
.gh-scene .sc-head { fill: var(--teal-deeper); stroke: var(--white); stroke-width: 2.5; }
.gh-scene .sc-head-glow { fill: rgba(91, 176, 177, 0.18); }
.gh-scene .sc-note { fill: var(--white); stroke: var(--teal-dark); stroke-width: 2; }
.gh-scene .sc-note.is-gold { stroke: #E0B53E; fill: #FFF6D8; }
.gh-scene .sc-bub { fill: rgba(255, 255, 255, 0.85); stroke: var(--c); stroke-width: 2.5; }
.gh-scene .sc-bub.is-pop { fill: color-mix(in srgb, var(--c) 12%, white); }
.gh-scene .sc-burst path { stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; opacity: 0.7; }
.gh-scene .sc-call { fill: #D9D2C5; }
.gh-scene .sc-echo { fill: var(--teal-dark); }
.gh-scene .sc-divide { stroke: rgba(46, 61, 68, 0.1); stroke-width: 1.5; stroke-dasharray: 3 5; }
.gh-card.is-locked .gh-scene { opacity: 0.75; }

/* Bud's wardrobe on You: closed by default, one Bud, hats as plain buttons */
.wd { padding: 0; }
.wd-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; border-radius: inherit; }
.wd-sum::-webkit-details-marker { display: none; }
.wd-sum:focus-visible { outline-offset: -3px; }
.wd-sum-text { display: grid; gap: 2px; }
.wd-sum-text .card-title { font-size: 1.05rem; }
.wd-sum-text small { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 600; font-size: 0.85rem; }
.wd-sum-text small svg { width: 14px; height: 14px; }
.wd-chev { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-3px) rotate(45deg); transition: transform 200ms ease; }
.wd[open] .wd-chev { transform: translateY(2px) rotate(-135deg); }
.wd-body { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 0 18px 18px; }
.wd-bud { width: 76px; grid-row: 1; }
.wd-bud .bud { width: 100%; height: auto; }
.wd-body .card-note { margin: 0; grid-row: 1; }
.wd-hats { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.wd-hat {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 10px; border: 0; border-radius: 10px; background: var(--mint); box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: background-color 150ms ease, box-shadow 150ms ease;
}
.wd-hat b { font-weight: 600; font-size: 0.88rem; }
.wd-hat small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-weight: 600; font-size: 0.78rem; }
.wd-hat small svg { width: 12px; height: 12px; }
.wd-hat.is-on { background: var(--teal-wash); box-shadow: inset 0 0 0 1.5px var(--teal-deeper); }
.wd-hat.is-on small { color: var(--teal-text); }
.wd-hat.is-afford { box-shadow: inset 0 0 0 1px var(--sun-deep); background: #FFFBEA; }
.wd-hat.is-locked { color: var(--ink-soft); }
.wd-hat[aria-disabled="true"] { cursor: default; }
@media (hover: hover) and (pointer: fine) { .wd-hat:not([aria-disabled="true"]):hover { background: #EFECE5; } .wd-hat.is-on:hover { background: var(--teal-wash); } }
.gh-little { border-top: 1px solid var(--line); }

/* ---------- Session, lesson and welcome screens: Bud's side panel and the session intro ---------- */

@media (min-width: 900px) {
  .ob-guide { background: var(--panel); box-shadow: inset -1px 0 0 var(--line); }
  .ob-guide-bud::before { background: #FBF5DC; }
  .side-steps li:not(:last-child)::before { border-color: var(--line-strong); }
  .side-dot { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .side-private { border-top-color: var(--line); }
}
.ob-bubble { font-weight: 500; }
.ob-icon-btn { box-shadow: inset 0 0 0 1px var(--line); }
.s-start > .ob-actions { box-shadow: none; }
.s-start .s-parts .part-swatch { background: var(--teal-wash); color: var(--teal-text); box-shadow: inset 0 0 0 1px #CBE5E3; font-weight: 650; }
.s-start .s-parts b { font-weight: 600; }
.s-start .ob-title { font-weight: 650; }
.check-pill input, .inst input[type="checkbox"], input[type="checkbox"] { accent-color: var(--teal-deeper); }
.unlock { background: var(--mint); }

/* Welcome: Bud stays big here (it's his hello), the rest settles down */
.hello-title { font-weight: 650; letter-spacing: -0.03em; }
.hello-num { background: var(--teal-wash); color: var(--teal-text); box-shadow: inset 0 0 0 1px #CBE5E3; font-weight: 650; }
.hello-steps li { font-weight: 600; }

/* Exercises: progress and "you are here" in teal; coral stays for the action and for off-pitch feedback */
.task-kicker span { color: var(--teal-text); }
.side-steps li.now .side-dot { box-shadow: inset 0 0 0 2px var(--teal-deeper); }
.side-steps li.now .side-dot::after { background: var(--teal-deeper); }
.ex-progress { height: 6px; }
.ex-progress-fill { background: var(--teal-deeper); }
.story-dots li.is-now { background: var(--teal-deeper); }

/* Unlock: the refund promise gets an icon, so the hero Bud is the page's only one */
.ul-guarantee { grid-template-columns: 44px minmax(0, 1fr); }
.ul-guarantee-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--teal-text); box-shadow: inset 0 0 0 1px #CBE5E3; }
.ul-guarantee-ic .ic { width: 22px; height: 22px; stroke-width: 2.4; }

/* ---------- Light behind the page: soft glows that stay put while the cards scroll over them ----------
   Home follows the greeting (morning warm, afternoon teal, evening dusk); the other tabs get a quieter teal.
   The cards stay white, so the light only shows in the gaps and the header and never touches text. */
.app-main { position: relative; isolation: isolate; }
.app-main::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 55% at 96% 0%, rgba(145, 215, 215, 0.34) 0%, rgba(145, 215, 215, 0) 72%),
    radial-gradient(42% 50% at 0% 100%, rgba(211, 240, 235, 0.55) 0%, rgba(211, 240, 235, 0) 72%);
}
@media (min-width: 960px) { .app-main::before { left: var(--rail-w); } }
.app-main:has(.home.tod-morning)::before {
  background:
    radial-gradient(52% 60% at 98% 0%, rgba(250, 190, 150, 0.55) 0%, rgba(250, 190, 150, 0) 72%),
    radial-gradient(40% 45% at 30% 0%, rgba(246, 228, 160, 0.5) 0%, rgba(246, 228, 160, 0) 72%),
    radial-gradient(45% 55% at 0% 100%, rgba(211, 240, 235, 0.75) 0%, rgba(211, 240, 235, 0) 72%);
}
.app-main:has(.home.tod-afternoon)::before {
  background:
    radial-gradient(52% 60% at 98% 0%, rgba(145, 215, 215, 0.55) 0%, rgba(145, 215, 215, 0) 72%),
    radial-gradient(40% 45% at 30% 0%, rgba(211, 240, 235, 0.8) 0%, rgba(211, 240, 235, 0) 72%),
    radial-gradient(45% 55% at 100% 100%, rgba(253, 220, 214, 0.6) 0%, rgba(253, 220, 214, 0) 72%);
}
.app-main:has(.home.tod-evening)::before {
  background:
    radial-gradient(52% 60% at 98% 0%, rgba(170, 160, 228, 0.45) 0%, rgba(170, 160, 228, 0) 72%),
    radial-gradient(40% 45% at 30% 0%, rgba(116, 199, 200, 0.35) 0%, rgba(116, 199, 200, 0) 72%),
    radial-gradient(45% 55% at 0% 100%, rgba(250, 163, 159, 0.32) 0%, rgba(250, 163, 159, 0) 72%);
}