/* /les: Les, your always-on betting advisor (Oct 21, 2026).
 * Origin's Forecasting page (useorigin.com/products/forecasting), section by
 * section, in Lessen's brand. Shared parts come from os.css; everything here
 * is scoped to body.les and uses the os tokens only. */

/* ---------------------------------------------------------------- 1. the hero film
   Origin's Forecasting hero is a star-field film; ours is a forward drift
   through tiny mint and pearl lights (page-les.js plays it like os.js plays
   the silk loops). The poster is the background until it plays. */
.les .os-art.les-film { background-image: url(/assets/lr/les/hero.webp); }
@media (max-aspect-ratio: 1/1) { .les .os-art.les-film { background-image: url(/assets/lr/les/hero-tall.webp); } }

/* ---------------------------------------------------------------- 2. the tilted phone
   Origin: "Create a plan you can follow", a black phone laid back in an
   isometric tilt, 980 x 551 at 1440 (326 x 183 on phones), 100px under the
   heading. Ours is a real Lessen heads-up screen in HTML, tilted in 3D, with
   a metal edge built from stacked layers. */
.les .les-p3 { margin: 100px auto 0; }
/* the tilted phone itself is the shared .lr-tilt in phone.css */

/* the heads-up screen (1em = 1/30 of the phone's width, as .os-phone) */
.les .les-hu { position: absolute; inset: 5.2em 1.5em 1.4em; display: flex; flex-direction: column; text-align: left; }
.les .les-hu-top { display: flex; align-items: center; gap: .7em; font-size: 1.2em; font-weight: 400; color: #FFFFFF; }
.les .les-hu-top .os-pearl { width: 1.1em; height: 1.1em; }
.les .les-hu-top span:last-child { margin-left: auto; font-size: .85em; font-weight: 300; color: #8C9590; }
.les .les-hu-card { margin-top: 1.3em; padding: 1.5em 1.4em 1.4em; border-radius: 2em; background: linear-gradient(180deg, rgba(233, 243, 238, .1), rgba(233, 243, 238, .035)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(233, 243, 238, .05); }
.les .les-hu-label { font-size: .85em; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #87CCAA; }
.les .les-hu-what { margin-top: .55em; font-size: 1.55em; line-height: 1.22; font-weight: 400; letter-spacing: -.015em; color: #FFFFFF; }
.les .les-hu-nums { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: 1.1em; }
.les .les-hu-nums div { padding: .8em .9em; border-radius: 1.2em; background: rgba(0, 0, 0, .28); }
.les .les-hu-nums small { display: block; font-size: .8em; color: #8C9590; }
.les .les-hu-nums b { display: block; margin-top: .2em; font-size: 1.6em; font-weight: 300; letter-spacing: -.03em; color: #FFFFFF; }
.les .les-hu-why { margin-top: 1em; font-size: 1.05em; line-height: 1.4; color: #A7B0AB; }
.les .les-hu-btn { display: flex; justify-content: center; align-items: center; height: 3.1em; margin-top: .7em; border-radius: 99em; font-size: 1.05em; font-weight: 500; color: #FFFFFF; background: rgba(233, 243, 238, .1); box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .08); }
.les .les-hu-btn--main { margin-top: 1.2em; color: #0C0E0D; background: linear-gradient(180deg, #FFFFFF, #E4ECE8); box-shadow: none; }
.les .les-hu-btn--quiet { background: none; box-shadow: none; color: #A7B0AB; }
.les .les-hu-reply { display: flex; align-items: center; gap: .5em; margin-top: 1.2em; height: 3.4em; padding: 0 1.2em; border-radius: 99em; font-size: 1.05em; color: #8C9590; background: rgba(233, 243, 238, .06); box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .06); }
.les .les-hu-reply i { width: .08em; height: 1.2em; background: #FFFFFF; }
.les .les-hu-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: auto; padding: .9em .4em; border-radius: 2.2em; background: linear-gradient(180deg, rgba(233, 243, 238, .1), rgba(233, 243, 238, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.les .les-hu-tabs span { text-align: center; font-size: .78em; color: #8C9590; }
.les .les-hu-tabs .on { color: #FFFFFF; }

/* ---------------------------------------------------------------- 3 and 8. the charts on the Forest panels
   Origin draws pale translucent sheets with mono axis labels on the blue;
   ours are the same sheets on Forest, with tracked Inter Tight labels. */
.les .les-chart { padding: 20px 24px 16px; }
.les .les-chart-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.les .les-chart-r { text-align: right; }
.les .les-chart-k { font: 300 12px/16px var(--os-sans); color: rgba(255, 255, 255, .78); }
.les .les-chart-v { margin-top: 4px; font: 300 22px/26px var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.les .les-chart-d { margin-top: 4px; font: 300 12px/17px var(--os-sans); color: rgba(255, 255, 255, .72); }
.les .les-chart-d b { font-weight: 500; color: #FFFFFF; }
.les .les-chart-svg, .les .les-prog-svg { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.les .les-chart-svg .grid path, .les .les-prog-svg .grid path { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.les .les-chart-svg .area { fill: rgba(233, 243, 238, .14); }
.les .les-chart-svg .line { fill: none; stroke: #E9F3EE; stroke-width: 2; stroke-linecap: round; }
.les .les-chart-svg .pin path { stroke: #FFFFFF; stroke-width: 1.5; }
.les .les-chart-svg .pin circle { fill: #FFFFFF; filter: drop-shadow(0 4px 10px rgba(9, 40, 27, .45)); }
.les .les-chart-svg .pin text { fill: #0C0E0D; font: 500 13px var(--os-sans); text-anchor: middle; }
.les .axis text { fill: rgba(255, 255, 255, .78); font: 500 10px var(--os-sans); letter-spacing: 1.6px; }
.les .axis-x text { text-anchor: middle; }
.les .les-chart-rank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.les .les-chart-rank li { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(9, 40, 27, .22); }
.les .les-chart-rank b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 500 11px/1 var(--os-sans); color: #0C0E0D; background: #FFFFFF; }
.les .les-chart-rank span { font: 300 12px/16px var(--os-sans); color: rgba(255, 255, 255, .72); }
.les .les-chart-rank em { display: inline; margin-right: 6px; font: 400 13px/18px var(--os-sans); font-style: normal; color: #FFFFFF; }
.les .les-chart-tag { display: flex; justify-content: flex-start; margin-top: 8px; }
.les .les-chart-tag .os-tag { color: rgba(255, 255, 255, .78); }

.les .les-week .os-panel-in > .os-h2 { margin-left: -110px; margin-right: -110px; }
@media (max-width: 1200px) { .les .les-week .os-panel-in > .os-h2 { margin-left: 0; margin-right: 0; } }
/* the progress sheet (Origin's "Project your success" chart: outlined tabs, three stats, the chart) */
.les .les-prog-sheet { padding: 20px 24px 18px; }
.les .les-tabs { display: flex; gap: 8px; }
.les .les-tabs span { padding: 7px 14px; border-radius: 8px; font: 400 12px/16px var(--os-sans); color: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.les .les-tabs .on { color: #FFFFFF; background: rgba(255, 255, 255, .18); }
.les .les-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.les .les-stat { margin-top: 8px; font: 300 30px/34px var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.les .les-prog-svg { margin-top: 18px; }
.les .les-prog-svg .bars rect { fill: rgba(233, 243, 238, .5); }
.les .les-prog-svg .bars .over { fill: rgba(233, 243, 238, .22); }
.les .les-prog-svg .bars .now { fill: #E9F3EE; }
.les .les-prog-svg .cap { stroke: #FFFFFF; stroke-width: 1.5; stroke-dasharray: 5 5; fill: none; }
.les .les-prog-svg .pace { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; stroke-dasharray: 2 4; fill: none; }
.les .les-prog-svg .pill rect { fill: rgba(9, 40, 27, .35); stroke: rgba(255, 255, 255, .55); }
.les .les-prog-svg .pill--cap rect { fill: rgba(9, 40, 27, .55); stroke: #FFFFFF; }
.les .les-prog-svg .pill text { fill: #FFFFFF; font: 400 12px var(--os-sans); text-anchor: middle; }

/* ---------------------------------------------------------------- 7. the four card visuals (Origin: chat, table, scenario chart, checklist) */
.les .les-tag { margin-top: 14px; }
.les .les-chat { padding: 18px; border-radius: 16px; text-align: left; background: linear-gradient(180deg, #232624, #141615); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 40px -24px rgba(0, 0, 0, .8); }
.les .les-chat-les { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: start; }
.les .les-chat-les .os-pearl { width: 12px; height: 12px; margin-top: 5px; }
.les .les-chat-les p { font: 300 15px/22px var(--os-sans); color: #FFFFFF; }
.les .les-chat-you { width: max-content; max-width: 80%; margin: 14px 0 14px auto; padding: 8px 14px; border-radius: 12px; font: 400 14px/20px var(--os-sans); color: #FFFFFF; background: #000000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.les .les-chat-in { display: flex; align-items: center; gap: 6px; height: 46px; margin-top: 18px; padding: 0 6px 0 14px; border-radius: 12px; font: 300 14px/20px var(--os-sans); color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }
.les .les-chat-in i { width: 1px; height: 16px; background: var(--os-mint); }
.les .les-chat-in span { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.les .les-chat-in svg { width: 11px; height: 13px; fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.les .les-table { text-align: left; }
.les .les-table-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px; align-items: center; min-height: 50px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); font: 300 14px/20px var(--os-sans); color: #FFFFFF; }
.les .les-table-row:last-child { border-bottom: 0; }
.les .les-table-row b { font-weight: 400; color: var(--os-fg-2); }
.les .les-table-row b.yes { color: var(--os-mint); }
.les .les-table-h { min-height: 38px; font: 500 10px/14px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-fg-3); }
.les .les-book { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; }
.les .les-book img { width: 36px; height: 36px; border-radius: 50%; }
.les .les-book b { display: block; font: 400 15px/20px var(--os-sans); color: #FFFFFF; }
.les .les-book small { display: block; font: 300 12px/16px var(--os-sans); color: var(--os-fg-2); }
.les .les-can { margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .07); }
.les .les-can li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 300 14px/20px var(--os-sans); color: var(--os-fg-2); }
.les .les-can li:first-child { color: #FFFFFF; }
.les .les-can svg { flex: none; width: 16px; height: 16px; fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.les .les-can svg.ok { stroke: var(--os-mint); }
.les .les-checks { text-align: left; }
.les .les-check { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); font: 300 14px/20px var(--os-sans); color: #FFFFFF; }
.les .les-check:last-child { border-bottom: 0; }
.les .les-check .box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.les .les-check .box.on { background: #FFFFFF; box-shadow: none; }
.les .les-check .box svg { width: 12px; height: 12px; fill: none; stroke: #0C0E0D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 767px) {
  .les .les-p3 { margin-top: 40px; }
  /* Origin's phone charts keep every part and simply get small; ours do the same,
     and drop only what repeats (the ranked list, the long notes under each stat) */
  .les .les-chart { padding: 12px 12px 10px; }
  .les .les-chart-top { gap: 10px; }
  .les .les-chart-k { font-size: 9px; line-height: 12px; }
  .les .les-chart-v { margin-top: 2px; font-size: 13px; line-height: 16px; }
  .les .les-chart-d { display: none; }
  .les .les-chart-tag { margin-top: 4px; }
  .les .les-chart-tag .os-tag { font-size: 10px; line-height: 12px; }
  .les .les-chart-rank { display: none; }
  .les .axis text { font-size: 22px; letter-spacing: 1px; }
  .les .les-chart-svg .pin circle { r: 22; }
  .les .les-chart-svg .pin text { font-size: 22px; transform: translateY(3px); transform-box: fill-box; }
  .les .les-prog-sheet { padding: 12px 12px 10px; }
  .les .les-tabs { gap: 5px; }
  .les .les-tabs span { padding: 4px 7px; font-size: 9px; line-height: 12px; border-radius: 6px; }
  .les .les-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .les .les-stat { margin-top: 2px; font-size: 17px; line-height: 20px; }
  .les .les-prog-svg { margin-top: 8px; }
  .les .les-prog-svg .pill text { font-size: 20px; }
  .les .les-trust .os-card-visual { max-width: 278px; }
  .les .les-chat-les p { font-size: 14px; line-height: 20px; }
}


/* ---------------------------------------------------------------- 6b. Sunday Review (Lessen's own section, Oct 21, 2026)
   Les's weekly recap as a story: a phone-like card with six segmented bars
   that fill over 5s each and move on by themselves. Tap or click the right
   side for the next card, the left side for the one before; swipe on a
   phone; arrow keys; hover or hold to pause; real buttons beside it. Reduced
   motion: no auto-advance, nothing counts or fills, every card still opens.
   page-les.js runs it. Layout at 1440: card 380 x 676 between a list of the
   cards (left) and three short facts (right). */
.les .les-sr-sec { padding-bottom: 120px; }
.les .les-sr { display: grid; grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); gap: 0 120px; align-items: center; text-align: left; }
.les .les-sr-side { align-self: center; }
.les .les-sr-toc ol { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--os-line); }
.les .les-sr-toc li { border-bottom: 1px solid var(--os-line); }
.les .les-sr-toc button { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 54px; padding: 0 4px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 300 18px/24px var(--os-sans); letter-spacing: -.01em; color: var(--os-fg-3); transition: color .3s var(--os-io); }
.les .les-sr-toc button span { font: 500 10px/14px var(--os-sans); letter-spacing: 2px; color: var(--os-fg-4); transition: color .3s var(--os-io); }
.les .les-sr-toc button:hover { color: var(--os-fg-2); }
.les .les-sr-toc button[aria-current="true"] { color: #FFFFFF; }
.les .les-sr-toc button[aria-current="true"] span { color: var(--os-glow); }
.les .les-sr-facts > div { padding: 22px 0; border-top: 1px solid var(--os-line); }
.les .les-sr-facts > div:last-child { border-bottom: 1px solid var(--os-line); }
.les .les-sr-facts .os-p { margin-top: 8px; max-width: 300px; }

.les .les-sr-mid { position: relative; }
.les .les-sr-player { position: relative; border-radius: 38px; outline: none; }
.les .les-sr-player:focus-visible { outline: 2px solid var(--os-glow); outline-offset: 6px; border-radius: 40px; }
.les .les-sr-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .2s var(--os-io); }
.les .les-sr-arrow:hover { background: rgba(255, 255, 255, .16); }
.les .les-sr-arrow svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.les .les-sr-arrow--prev { left: -76px; }
.les .les-sr-arrow--next { right: -76px; }
.les .les-sr-card { position: relative; width: 100%; aspect-ratio: 380 / 676; overflow: hidden; border-radius: 38px; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  background: #0A0C0B; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 0 160px -40px rgba(63, 147, 110, .45); }
.les .les-sr-card::before { content: ""; position: absolute; inset: 0; background: url(/assets/lr/les/hero-tall.webp) center / cover; opacity: .55; }
.les .les-sr-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at var(--gx, 50%) 108%, rgba(63, 147, 110, .55), rgba(22, 72, 50, .25) 45%, rgba(10, 12, 11, 0) 70%), linear-gradient(180deg, rgba(10, 12, 11, .55) 0%, rgba(10, 12, 11, .78) 38%, rgba(10, 12, 11, .62) 100%);
  transition: background-position 1s var(--os-out); }
.les .les-sr-card[data-at="1"] { --gx: 20%; } .les .les-sr-card[data-at="2"] { --gx: 70%; } .les .les-sr-card[data-at="3"] { --gx: 35%; } .les .les-sr-card[data-at="4"] { --gx: 80%; } .les .les-sr-card[data-at="5"] { --gx: 50%; }

.les .les-sr-bars { position: absolute; z-index: 2; top: 16px; left: 18px; right: 18px; display: flex; gap: 4px; }
.les .les-sr-bars span { flex: 1; height: 2.5px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .24); }
.les .les-sr-bars i { display: block; height: 100%; background: #FFFFFF; transform: scaleX(0); transform-origin: 0 50%; }
.les .les-sr-top { position: absolute; z-index: 2; top: 30px; left: 18px; right: 12px; display: flex; align-items: center; gap: 8px; font: 400 14px/20px var(--os-sans); color: #FFFFFF; }
.les .les-sr-top .os-pearl { width: 14px; height: 14px; }
.les .les-sr-top b { font-weight: 500; }
.les .les-sr-when { color: var(--os-fg-2); }
.les .les-sr-sample { margin-left: auto; padding: 2px 8px; border-radius: 99px; font: 500 9px/14px var(--os-sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--os-fg-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.les .les-sr-pause { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.les .les-sr-pause:hover { background: rgba(255, 255, 255, .1); }
.les .les-sr-pause svg { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.les .les-sr-pause .ic-play { display: none; fill: #FFFFFF; stroke: none; }
.les .les-sr-pause[aria-pressed="true"] .ic-pause { display: none; }
.les .les-sr-pause[aria-pressed="true"] .ic-play { display: block; }

.les .les-sr-slides { position: absolute; z-index: 1; inset: 0; }
.les .les-sr-slide { position: absolute; inset: 92px 28px 28px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .45s var(--os-out), transform .6s var(--os-out), visibility 0s .45s; }
.les .les-sr-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--os-out), transform .6s var(--os-out), visibility 0s; }
.les .les-sr-slide.is-back { transform: translateX(-14px); }
.les .les-sr-k { font: 500 11px/16px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-glow); }
.les .les-sr-big { margin-top: 26px; font: 300 96px/88px var(--os-sans); letter-spacing: -.045em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.les .les-sr-t { margin-top: 14px; font: 300 24px/30px var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.les .les-sr-t--lg { margin-top: 26px; font-size: 38px; line-height: 40px; letter-spacing: -.03em; }
.les .les-sr-p { margin-top: auto; font: 300 15px/22px var(--os-sans); color: var(--os-fg-2); }
.les .les-sr-p b { font-weight: 400; color: #FFFFFF; }
.les .les-sr-s3 .les-sr-p, .les .les-sr-s6 .les-sr-p { margin-top: 14px; }
.les .les-sr-fine { margin-top: 12px; font: 400 12px/16px var(--os-sans); color: var(--os-fg-3); }

/* 1: the cover */
.les .les-sr-cover { margin-top: 34px; font: 300 54px/52px var(--os-sans); letter-spacing: -.035em; color: #FFFFFF; }
.les .les-sr-cover i { font-family: var(--os-serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; }
.les .les-sr-range { margin-top: 14px; font: 300 18px/24px var(--os-sans); color: var(--os-fg-2); }
.les .les-sr-list { margin: auto 0 0; padding: 0; list-style: none; }
.les .les-sr-list li { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .1); font: 300 15px/20px var(--os-sans); color: rgba(255, 255, 255, .82); }
.les .les-sr-list span { font: 500 10px/14px var(--os-sans); letter-spacing: 2px; color: var(--os-mint); }
.les .les-sr-hint { margin-top: 16px; font: 400 12px/16px var(--os-sans); color: var(--os-fg-3); }

/* 2 and 5: the meters (fill once when the card opens) */
.les .les-sr-meter, .les .les-sr-goal { margin-top: 34px; }
.les .les-sr-meter .row, .les .les-sr-goal .row { display: flex; justify-content: space-between; gap: 12px; font: 300 14px/20px var(--os-sans); color: var(--os-fg-2); }
.les .les-sr-meter .row b, .les .les-sr-goal .row b { font-weight: 400; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.les .les-sr-meter .trk { margin: 8px 0 18px; }
.les .les-sr .trk { height: 10px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.les .les-sr .trk i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 99px; background: linear-gradient(90deg, #87CCAA, #E9F3EE); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--os-out) .35s; }
.les .les-sr .trk--dim i { background: rgba(255, 255, 255, .34); }
.les .les-sr .is-on .trk i, .les .les-sr .is-seen .trk i { transform: scaleX(1); }
.les .les-sr-goal { margin-top: auto; padding: 18px; border-radius: 20px; background: rgba(9, 40, 27, .45); box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .16); }
.les .les-sr-goal .trk { margin-top: 12px; }
.les .les-sr-goal p { margin-top: 10px; font: 300 14px/20px var(--os-sans); color: var(--os-fg-2); }

/* 3: the week, day by day */
.les .les-sr-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 190px; margin-top: auto; }
.les .les-sr-days span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.les .les-sr-days i { display: block; width: 100%; height: max(4px, calc(var(--h) * 150px)); border-radius: 8px; background: rgba(255, 255, 255, .2); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1s var(--os-out) .3s; }
.les .les-sr-days .hot i { background: linear-gradient(180deg, #E9F3EE, #87CCAA); box-shadow: 0 0 30px -4px rgba(168, 237, 196, .55); }
.les .les-sr-days b { margin-bottom: 8px; font: 500 12px/16px var(--os-sans); color: #FFFFFF; opacity: 0; transition: opacity .5s var(--os-out) 1s; }
.les .les-sr-days em { margin-top: 10px; font: 500 10px/14px var(--os-sans); font-style: normal; letter-spacing: 1.5px; color: var(--os-fg-3); }
.les .les-sr-days .hot em { color: #FFFFFF; }
.les .is-on .les-sr-days i, .les .is-seen .les-sr-days i { transform: scaleY(1); }
.les .is-on .les-sr-days b, .les .is-seen .les-sr-days b { opacity: 1; }

/* 4: late nights, as dots */
.les .les-sr-dots { display: grid; grid-template-columns: 76px 1fr; gap: 14px 12px; align-items: center; margin-top: 34px; }
.les .les-sr-dots p { font: 300 13px/18px var(--os-sans); color: var(--os-fg-2); }
.les .les-sr-dots div { display: flex; gap: 10px; }
.les .les-sr-dots i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.les .les-sr-dots i.f { background: rgba(255, 255, 255, .34); box-shadow: none; }
.les .les-sr-dots i.m { background: radial-gradient(circle at 34% 28%, #FFFFFF, #E9F3EE 35%, #A8EDC4 70%, #87CCAA); box-shadow: 0 0 14px rgba(168, 237, 196, .6); }

/* 6: next week, with an answer and a reply */
.les .les-sr-ask { display: grid; gap: 10px; margin-top: auto; }
.les .les-sr-ask button { height: 50px; border: 0; border-radius: 99px; cursor: pointer; font: 500 15px/20px var(--os-sans); }
.les .les-sr-yes { color: #0C0E0D; background: linear-gradient(180deg, #FFFFFF, #E4ECE8); }
.les .les-sr-yes:hover { background: #E4ECE8; }
.les .les-sr-no { color: #FFFFFF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.les .les-sr-no:hover { background: rgba(255, 255, 255, .16); }
.les .les-sr-done { display: none; margin-top: auto; padding: 16px 18px; border-radius: 20px; font: 300 15px/22px var(--os-sans); color: #FFFFFF; background: rgba(9, 40, 27, .5); box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .22); }
.les .les-sr-done b { display: block; margin-bottom: 2px; font: 500 11px/16px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-glow); }
.les .les-sr-s6.is-answered .les-sr-ask { display: none; }
.les .les-sr-s6.is-answered .les-sr-done { display: block; }
.les .les-sr-reply { display: flex; align-items: center; height: 50px; margin-top: 12px; padding: 0 6px 0 18px; border-radius: 99px; text-decoration: none; font: 300 15px/20px var(--os-sans); color: var(--os-fg-2);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.les .les-sr-reply b { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.les .les-sr-reply svg { width: 11px; height: 13px; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.les .les-sr-foot { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 22px; }
.les .les-sr-count { font: 500 10px/14px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-fg-3); font-variant-numeric: tabular-nums; }

/* Les on the other pages: one quiet line of links under the trust cards */
.les .les-elsewhere { max-width: 680px; margin: 56px auto 0; text-align: center; font: 300 16px/24px var(--os-sans); color: var(--os-fg-2); }
.les .les-elsewhere a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; transition: text-decoration-color .2s var(--os-io); }
.les .les-elsewhere a:hover { text-decoration-color: #FFFFFF; }

@media (max-width: 1199px) { .les .les-sr { gap: 0 96px; } }
@media (max-width: 991px) {
  .les .les-sr { grid-template-columns: 380px; justify-content: center; }
  .les .les-sr-side { display: none; }
}
@media (max-width: 767px) {
  .les .les-sr-sec { padding-bottom: 80px; }
  .les .les-sr { grid-template-columns: minmax(0, 340px); }
  .les .les-sr-player { border-radius: 32px; }
  .les .les-sr-card { border-radius: 32px; }
  /* the arrows drop below the card, either side of the counter */
  .les .les-sr-arrow { top: auto; bottom: -70px; margin-top: 0; width: 44px; height: 44px; }
  .les .les-sr-arrow--prev { left: 0; }
  .les .les-sr-arrow--next { right: 0; }
  .les .les-sr-foot { flex-direction: column; gap: 6px; min-height: 48px; margin-top: 22px; padding: 0 56px; }
  .les .les-sr-slide { inset: 84px 22px 22px; }
  .les .les-sr-big { margin-top: 20px; font-size: 80px; line-height: 74px; }
  .les .les-sr-t { font-size: 21px; line-height: 27px; }
  .les .les-sr-t--lg { margin-top: 20px; font-size: 32px; line-height: 35px; }
  .les .les-sr-cover { margin-top: 24px; font-size: 46px; line-height: 45px; }
  .les .les-sr-list li { padding: 7px 0; font-size: 14px; }
  .les .les-sr-meter, .les .les-sr-dots { margin-top: 24px; }
  .les .les-sr-days { height: 160px; }
  .les .les-sr-days i { height: max(4px, calc(var(--h) * 120px)); }
  .les .les-sr-ask button, .les .les-sr-reply { height: 46px; }
  .les .les-elsewhere { margin-top: 40px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .les .les-sr-slide, .les .les-sr-slide.is-on { transform: none; transition: none; }
  .les .les-sr .trk i, .les .les-sr-days i, .les .les-sr-days b, .les .les-sr-card::after { transition: none; }
  .les .les-sr-pause { display: none; }
}

/* (Oct 23, 2026) the tilted phone's back edges reached 3px past the right
   side at 768px and let the whole page scroll sideways; clip the section
   sideways only (no scroll box, the shadow above and below is untouched). */
.les .les-before { overflow-x: clip; }