/* Singbud polish layer: loaded last. Press feedback, the tab bar, sheets, motion that rewards,
   progress that fills in, the switches on Profile and the upgrade page.
   Same hand as the rest: flat colour, solid bottom edges, Bud. Motion is short and ease-out, springs
   only on things that pop (a tab icon, a dot filling in), and all of it goes with reduced motion. */

:root {
  color-scheme: light only;   /* the palette is light; stops phone browsers auto-darkening it badly */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press: 0.97;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --glass: rgba(255, 255, 255, 0.86);
}

/* ---------- Native feel: no grey tap flash, no double-tap zoom delay, no text selection on controls ---------- */

a, button, summary, label, [role="button"], input[type="checkbox"], input[type="radio"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn, .tab, .chip, .ob-icon-btn, .seg-switch a, .seg-ctl span, .tempo button, .px-levels button, summary { -webkit-user-select: none; user-select: none; }
h1, h2, h3, .page-title, .today-title, .unlock-title { font-optical-sizing: auto; }
.stat-value, .log-stats b, .ba-big, .cmp-cost, .price b, .breath-count, .sa-time, .ul-proof-stats b { font-variant-numeric: tabular-nums; }
body { text-rendering: optimizeLegibility; }

/* Landscape phones: keep content clear of the notch */
@media (max-width: 959px) {
  .view { padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r)); }
}

/* A text-link button that also has .btn (used in a few places) must not get the button's coloured edge */
.btn.btn-link, .btn.btn-link:hover, .btn.btn-link:active { background: none; box-shadow: none; transform: none; min-height: 44px; padding: 8px 6px; }
.btn.btn-link:active { opacity: 0.6; transition: opacity 60ms; }

/* ---------- Press feedback: everything you can tap answers the finger ---------- */

.lib-main, .pg-card, .px-hero, .along-main, .home-program, a.stat-tile, .lesson, .take, .sc-choice, .my-main,
.pg-day, .rail-user, .rail-brand, .goal-chips li, .tc-note {
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 160ms ease;
}
.lib-main:active, .pg-card:active, .px-hero:active, .along-main:active, .home-program:active, .take:active,
.sc-choice:active:not(:disabled), .my-main:active, .pg-day:active, .rail-user:active, .tc-note:active {
  transform: scale(var(--press)); transition-duration: 70ms;
}
a.stat-tile:active { transform: translateY(1px) scale(0.985); }
.lesson:active { transform: scale(0.98); }

.chip, .px-go, .lib-fav, .lib-rec, .range-step, .tempo button, .tempo-loop, .px-levels button, .seg-switch a, .seg-ctl span, .my-act, .s-voice {
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:active, .px-go:active, .lib-fav:active, .lib-rec:active, .range-step:active:not(:disabled), .tempo button:active,
.tempo-loop:active, .px-levels button:active, .seg-switch a:active, .seg-ctl label:active span, .my-act:active {
  transform: scale(0.93); transition-duration: 60ms;
}
.lib-fav[aria-pressed="true"] .ic { animation: heart-pop 420ms var(--ease-spring); }
@keyframes heart-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Hover only where there is a real pointer, so phones don't keep a stuck hover */
@media (hover: hover) and (pointer: fine) {
  .lib-card, .px-card, .pg-card { transition: box-shadow 180ms ease, transform 180ms var(--ease-out); }
  .lib-card:hover, .px-card:hover { box-shadow: var(--sh-card); transform: translateY(-1px); }
  .pg-card:hover { transform: translateY(-1px); }
  .chip:hover:not([aria-pressed="true"]) { border-color: var(--teal-dark); color: var(--ink); }
  .seg-switch a:hover:not([aria-current="page"]) { color: var(--ink); background: var(--mint); }
}

/* ---------- Tab bar: frosted, a pill behind the active icon that springs in ---------- */

.tabs {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 -1px 0 rgba(46, 61, 68, 0.08);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}
.tab { position: relative; transition: color 160ms ease; }
.tab .ic { transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.tab.is-on .ic { animation: tab-pop 460ms var(--ease-spring); }
.tab:active .ic { transform: scale(0.88); transition-duration: 60ms; }
@keyframes tab-pop { 0% { transform: scale(0.82); background-color: transparent; } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (min-width: 960px) {
  .tabs {
    background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset -2px 0 0 var(--cream-deep);
    padding: 28px 20px 20px calc(20px + var(--safe-l));
  }
  .tab { transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
}

/* ---------- Headings and cards: a touch more air and a clearer order ---------- */

.page-head { margin: 6px 0 18px; }
.page-title { letter-spacing: -0.03em; }
.page-lede { line-height: 1.5; }
.card-title, .card h2.card-title, .hcard h2 { letter-spacing: -0.015em; }
.card-note { line-height: 1.5; }
.eyebrow { letter-spacing: 0.1em; }

/* The path / programs / practice switch never wraps a label onto two lines */
.seg-switch { display: flex; width: 100%; max-width: 480px; }
.seg-switch a { flex: 1 1 auto; text-align: center; white-space: nowrap; padding: 9px 12px; }
@media (max-width: 380px) { .seg-switch a { padding: 9px 8px; font-size: 0.86rem; } }

/* Sing along card: on narrow phones the button goes under the text instead of squeezing it */
@media (max-width: 480px) {
  .along-main { flex-wrap: wrap; }
  .along-text { flex: 1 1 calc(100% - 60px); }
  .along-main > .btn { flex: 1 1 100%; }
}

/* Bud breathes on the home card and the session's start, never more than that */
.today-bud .bud { animation: bob 5s ease-in-out infinite; }

/* Empty states read as a moment, not an error */
.songs-empty { padding: 32px 16px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-card); color: var(--ink-soft); font-weight: 600; }

/* ---------- Progress that fills in ---------- */

@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes dot-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.pg-bar span, .cmp-bar span { transform-origin: left center; animation: grow-x 900ms var(--ease-out) 180ms both; }
.cmp li .cmp-bar span { animation-delay: calc(240ms + var(--i, 0) * 110ms); }
.progress .skill-fill { animation: grow-x 900ms var(--ease-out) both; animation-delay: calc(160ms + var(--i, 0) * 80ms); }
.week-strip li.on .wk-dot { animation: dot-pop 520ms var(--ease-spring) both; }
.week-strip li:nth-child(1) .wk-dot { animation-delay: 120ms; }
.week-strip li:nth-child(2) .wk-dot { animation-delay: 160ms; }
.week-strip li:nth-child(3) .wk-dot { animation-delay: 200ms; }
.week-strip li:nth-child(4) .wk-dot { animation-delay: 240ms; }
.week-strip li:nth-child(5) .wk-dot { animation-delay: 280ms; }
.week-strip li:nth-child(6) .wk-dot { animation-delay: 320ms; }
.week-strip li:nth-child(7) .wk-dot { animation-delay: 360ms; }
.week-strip li.is-today .wk-dot { position: relative; }
.week-strip li.is-today:not(.on) .wk-dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--coral); opacity: 0; animation: today-ring 2.6s ease-out 600ms infinite;
}
@keyframes today-ring { 0% { transform: scale(0.85); opacity: 0.7; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.ex-progress-fill { transition: transform 200ms var(--ease-out); }

/* Progress ring (ui.js ring()): draws in from the top */
.ring { position: relative; display: inline-grid; place-items: center; width: 112px; aspect-ratio: 1; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring-track { stroke: var(--track); }
.ring-fill { stroke: var(--coral); stroke-dashoffset: calc(var(--c) * (1 - var(--p))); animation: ring-in 1100ms var(--ease-out) 250ms both; }
@keyframes ring-in { from { stroke-dashoffset: var(--c); } }
.ring-label { position: relative; text-align: center; line-height: 1.1; }
.ring-label b { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }

/* ---------- Switches (Profile: sound and touch) ---------- */

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--mint); cursor: pointer; }
.switch-text { display: grid; gap: 2px; min-width: 0; }
.switch-text b { font-weight: 700; line-height: 1.3; }
.switch-text small { color: var(--ink-soft); font-size: 0.86rem; line-height: 1.35; }
.switch { position: relative; flex: none; width: 52px; height: 32px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-knob { position: absolute; inset: 0; border-radius: 999px; background: var(--dash); transition: background-color 200ms ease; }
.switch-knob::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); box-shadow: var(--sh-card);
  transition: transform 260ms var(--ease-spring), width 160ms var(--ease-out);
}
.switch input:checked + .switch-knob { background: var(--teal-deeper); }
.switch input:checked + .switch-knob::after { transform: translateX(20px); }
.switch input:active + .switch-knob::after { width: 30px; }
.switch input:checked:active + .switch-knob::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-knob { outline: 3px solid rgba(46, 61, 68, 0.3); outline-offset: 2px; }

/* ---------- Sheets: a grabber on phones, a softer scrim ---------- */

.sheet-scrim { background: rgba(46, 61, 68, 0.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet { touch-action: pan-y; overscroll-behavior: contain; }
@media (max-width: 759px) {
  .sheet { padding-top: 14px; padding-left: calc(var(--gutter) + var(--safe-l)); padding-right: calc(var(--gutter) + var(--safe-r)); box-shadow: 0 -2px 0 var(--edge); }
  .sheet::before { content: ''; display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--track); }
}

/* ---------- Toast: springs up from the tab bar ---------- */

.app-toast { transform: translate(-50%, 16px) scale(0.92); box-shadow: var(--sh-solid); transition: opacity 180ms ease, transform 380ms var(--ease-spring); }
.app-toast.is-on { transform: translate(-50%, 0) scale(1); }

/* ---------- Celebration: the finish line lands ---------- */

.s-finish .stat { transition: transform 180ms var(--ease-out); }
.s-finish.is-in .stat-row .stat:nth-child(1) { animation: dot-pop 520ms var(--ease-spring) 120ms both; }
.s-finish.is-in .stat-row .stat:nth-child(2) { animation: dot-pop 520ms var(--ease-spring) 200ms both; }
.s-finish.is-in .stat-row .stat:nth-child(3) { animation: dot-pop 520ms var(--ease-spring) 280ms both; }
.side-steps li.done .side-dot { animation: dot-pop 420ms var(--ease-spring) both; }

/* =====================================================================================
   Upgrade page (#/unlock): hero, proof, what you unlock, once vs yearly, vs table, FAQ, sticky buy
   ===================================================================================== */

.ul { position: relative; overflow-x: clip; }
.ul .unlock-main { padding-bottom: calc(120px + var(--safe-b)); }
.ul-story { min-width: 0; }
.ul-block { margin-top: 18px; }
.ul-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.025em; }
.ul-h3 { margin-top: 20px; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* Hero: Bud on a sun with notes drifting up, then the reason, the promise and the price */
.ul-hero { text-align: left; }
.ul-hero-art, .unlock-art { position: relative; display: grid; place-items: center; padding: 8px 0 4px; }
.ul-sun { position: absolute; width: 196px; aspect-ratio: 1; border-radius: 50%; background: var(--sun); top: 50%; left: 50%; translate: -50% -50%; animation: sun-in 700ms var(--ease-out) both; }
@keyframes sun-in { from { scale: 0.6; opacity: 0; } }
.ul .unlock-bud { position: relative; width: 168px; }
.ul-note { position: absolute; width: 18px; height: 22px; color: var(--coral); opacity: 0; animation: drift 4.8s ease-in-out infinite; }
.ul-note-1 { left: calc(50% - 112px); top: 38%; color: var(--teal-deeper); animation-delay: 0.4s; }
.ul-note-2 { left: calc(50% + 92px); top: 22%; animation-delay: 1.8s; }
.ul-note-3 { left: calc(50% + 70px); top: 66%; width: 14px; height: 17px; color: var(--teal-deeper); animation-delay: 3s; }
.ul .eyebrow { margin-top: 10px; }
.ul .unlock-title { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1.04; }
.ul .unlock-title .squiggle-line path { animation: draw-on 0.9s cubic-bezier(.6, 0, .3, 1) 0.5s both; }
.ul .unlock-lede { margin-top: 12px; max-width: 46ch; }
.ul-hero-buy { display: grid; gap: 12px; margin-top: 20px; }
.ul-chip { justify-self: start; padding: 6px 14px; border-radius: 999px; background: var(--white); box-shadow: var(--sh-card); font-weight: 700; font-size: 0.95rem; }
.ul-hero-btn { width: 100%; }
.ul-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-soft); font-weight: 700; font-size: 0.88rem; }
.ul-trust li { display: inline-flex; align-items: center; gap: 6px; }
.ul-trust .ic { width: 16px; height: 16px; stroke: var(--teal-deeper); stroke-width: 3; }

/* Cards on cream sit on a cream edge */
.ul .card { box-shadow: var(--sh-card); }

/* Proof: a ring for the free days, three counts beside it, then plain facts */
.ul-proof-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 14px; }
.ul-proof-ring { display: grid; justify-items: center; gap: 6px; }
.ul-proof-ring small { font-weight: 700; font-size: 0.8rem; color: var(--ink-soft); }
.ul-proof-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ul-proof-stats li { display: grid; grid-template-columns: 32px auto 1fr; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--mint); }
.ul-proof-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.ul-proof-icon .ic { width: 18px; height: 18px; }
.ul-proof-stats b { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; line-height: 1; min-width: 2ch; }
.ul-proof-stats small { color: var(--ink-soft); font-weight: 700; font-size: 0.85rem; line-height: 1.2; }
.ul-proof-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.ul-proof-facts li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ul-proof-facts .ic { width: 20px; height: 20px; flex: none; }
.ul-proof .recap-takes { margin-top: 12px; }
.ul-proof-grid > .ul-proof-facts { margin: 0; gap: 10px; }
@media (max-width: 400px) {
  .ul-proof-grid:has(.ul-proof-stats) { grid-template-columns: 1fr; justify-items: center; }
  .ul-proof-stats { width: 100%; }
  .ul-proof-grid .ring { width: 96px; }
}

/* What you unlock: coloured tiles, the first three bigger */
.ul-get .get-grid { margin-top: 14px; }
.ul-get .get-grid li { transition: transform 180ms var(--ease-out); }
.ul-get .get-sun { background: var(--sun); }
.ul-get .get-belly { background: var(--belly); }
.ul-get .get-blush { background: var(--blush); }
.ul-get .is-big { padding: 16px; }
.ul-get .is-big .get-icon { width: 48px; height: 48px; border-radius: 16px; }
.ul-get .is-big .get-icon .ic { width: 26px; height: 26px; }
.ul-get .is-big .get-text b { font-family: var(--font-head); font-size: 1.12rem; }
@media (min-width: 720px) { .ul-get .is-big:first-child { grid-column: 1 / -1; } }
.ul-get .is-why { box-shadow: inset 0 0 0 2.5px var(--coral); }

.ul-get .unlock-free { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; }
.ul-get .unlock-free .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; stroke: var(--teal-deeper); stroke-width: 3; }

/* Once, not every year */
.ul-once-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ul-once-price {
  display: grid; place-items: center; width: 84px; aspect-ratio: 1; border-radius: 18px; background: var(--coral); color: var(--white);
  box-shadow: var(--sh-solid); font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.03em; rotate: -4deg;
}
.ul-once .card-note { margin-top: 4px; }
.ul .cmp { margin-top: 10px; }
@media (max-width: 520px) {
  .ul .cmp li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cost" "bar bar"; row-gap: 6px; }
  .ul .cmp-name { grid-area: name; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
  .ul .cmp-bar { grid-area: bar; height: 12px; }
  .ul .cmp-cost { grid-area: cost; }
}

/* Singbud next to a subscription */
.vs { width: 100%; margin-top: 12px; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.vs th, .vs td { padding: 11px 10px; text-align: left; vertical-align: top; line-height: 1.35; border-top: 2px solid var(--cream); }
.vs thead th, .vs thead td { border-top: 0; padding-top: 4px; padding-bottom: 8px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.vs tbody th { font-weight: 700; width: 38%; }
.vs td { color: var(--ink-soft); }
.vs .vs-us { background: var(--belly); color: var(--ink); font-weight: 700; }
.vs thead .vs-us { border-radius: 14px 14px 0 0; color: var(--ink); }
.vs tbody tr:last-child .vs-us { border-radius: 0 0 14px 14px; }
.vs-yes { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--teal-deeper); vertical-align: -3px; }
.vs-yes .ic { width: 12px; height: 12px; stroke: var(--white); stroke-width: 3.4; }
@media (max-width: 420px) {
  .vs, .vs tbody th { font-size: 0.86rem; }
  .vs th, .vs td { padding: 10px 7px; }
  .vs-yes { display: none; }
}

/* Refund line with Bud waving */
.ul-guarantee { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--belly); box-shadow: var(--sh-card) !important; }
.ul-guarantee-bud { width: 76px; }
.ul-guarantee .card-note { margin-top: 4px; color: #33525A; }

/* Questions: native details, the answer opens with a soft height + fade */
.ul-faq { margin-top: 30px; }
.ul-faq .ul-h2 { margin-bottom: 12px; }
.faq { border-radius: 14px; background: var(--white); box-shadow: var(--sh-card); }
.faq + .faq { margin-top: 10px; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 12px 16px; font-weight: 700; cursor: pointer; border-radius: inherit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid rgba(46, 61, 68, 0.22); outline-offset: 2px; }
.faq-icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); transition: background-color 160ms ease, rotate 260ms var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.faq-icon::after { rotate: 90deg; transition: rotate 260ms var(--ease-out); }
.faq[open] .faq-icon { background: var(--blush); rotate: 180deg; }
.faq[open] .faq-icon::after { rotate: 0deg; }
.faq-a { padding: 0 16px 16px; color: var(--ink-soft); line-height: 1.55; }
.faq[open] .faq-a { animation: faq-in 260ms var(--ease-out); }
@keyframes faq-in { from { opacity: 0; translate: 0 -4px; } }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { block-size: 0; overflow: clip; transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete; }
  .faq[open]::details-content { block-size: auto; }
}

/* Last call on phones */
.ul-final { margin-top: 32px; text-align: center; }
.ul-final .card-note { margin-top: 6px; }
.ul-final .price-card { text-align: left; margin-top: 16px; }
.ul-final > .btn-link { display: block; margin: 14px auto 0; }

/* The price card */
.ul .price-card { gap: 14px; box-shadow: var(--sh-card); }
.ul .price b { font-size: 3.4rem; }
.ul .price-card .btn-lg { width: 100%; }
.ul.is-unlocked .price-card .btn[disabled] { opacity: 1; background: var(--teal-deeper); --edge: #3F8F90; }

/* Sticky buy bar (phones): slides up once the hero's button is gone */
.ul-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px calc(var(--gutter) + var(--safe-r)) calc(10px + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 -1px 0 rgba(46, 61, 68, 0.08);
  transform: translateY(110%); transition: transform 360ms var(--ease-out); pointer-events: none;
}
.ul-sticky.is-on { transform: none; pointer-events: auto; }
.ul-sticky-in { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto; }
.ul-sticky-price { display: grid; line-height: 1.05; }
.ul-sticky-price b { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.03em; }
.ul-sticky-price small { color: var(--ink-soft); font-weight: 700; font-size: 0.78rem; }
.ul-sticky-btn { flex: 1; min-height: 52px; }
.ul.is-unlocked .ul-sticky { display: none; }

/* Wide: story left, Bud and the price card in view on the right; no sticky bar, no hero button */
.ul .only-wide { display: none; }
@media (min-width: 960px) {
  .ul .only-narrow { display: none !important; }
  .ul .only-wide { display: grid !important; }
  .ul-sticky { display: none; }
  .ul .unlock-main { padding-bottom: 72px; }
  .ul .unlock-side { gap: 10px; }
  .ul .unlock-side .unlock-art { padding: 10px 0 0; }
  .ul .unlock-side .ul-sun { width: 230px; }
  .ul .unlock-side .unlock-bud { width: 200px; margin: 0 auto -6px; }
  .ul-hero { padding-top: 8px; }
  .ul .unlock-title { max-width: 14ch; }
  .ul-block { margin-top: 22px; }
  .ul-proof-grid { grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
  .ul-proof-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ul-proof-stats li { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 12px; }
}

/* ---------- Reduced motion: no movement, nothing loops; fades that explain stay ---------- */

@media (prefers-reduced-motion: reduce) {
  .ul-note, .ul-sun, .ring-fill, .pg-bar span, .cmp-bar span, .progress .skill-fill, .week-strip li .wk-dot,
  .tab.is-on .ic, .lib-fav .ic, .today-bud .bud, .s-finish .stat, .side-steps .side-dot, .faq-a { animation: none !important; }
  .week-strip li.is-today .wk-dot::after { display: none; }
  .ul-sticky, .app-toast, .switch-knob::after { transition-duration: 1ms !important; }
  .faq::details-content { transition: none !important; }
  :is(.lib-main, .pg-card, .px-hero, .along-main, .home-program, .take, .sc-choice, .my-main, .pg-day, .lesson, .chip, .px-go, .tab .ic):active { transform: none !important; }
}

/* Session top bar on phones: the step you're on is named once, centred under the whole bar, so a long
   name ("Finish on a win") never runs under the sound and close buttons. */
@media (max-width: 899px) {
  .session-shell .ob-stages { position: relative; padding-bottom: 17px; }
  .session-shell .ob-seg { position: static; }
  .session-shell .ob-seg-label { display: none; }
  .session-shell .ob-seg.is-now .ob-seg-label {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    text-align: center; direction: ltr; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Unlock: six features to start, the rest on a tap; on phones the price bars carry the comparison,
   so the second (table) version of it goes. */
.ul-get:not(.is-open) .get-grid > .is-more { display: none; }
.get-more { display: block; margin: 12px auto 0; }
@media (max-width: 759px) { .ul-table { display: none; } }