/* Tracking (/tracking): Origin's Spending page (useorigin.com/products/spending,
 * studied Oct 21, 2026) in Lessen's brand. Shared parts come from os.css; this
 * file holds only the page's own compositions, all prefixed .tr-.
 *
 * Origin draws its product shots as flat images that shrink with their card
 * (400px wide at 1440, 292 at 1024, 278 at 390). Ours are live HTML and SVG
 * drawn on the same artboards (400, 960 for the day strip, 584 for the
 * collage): every size inside is written in artboard pixels times --u, where
 * --u is the artboard's real width divided by its design width, so a mockup
 * keeps Origin's proportions at every width. Every number in them is a
 * labelled sample.
 */

/* ---------------------------------------------------------------- artboards */
.tr-art { --u: calc(100cqw / 400); container-type: inline-size; position: relative; width: 100%; max-width: 400px; margin: 0 auto; text-align: left; color: #FFFFFF; }
.tr-art--days { --u: calc(100cqw / 960); max-width: 960px; }
.tr-micro { font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.4 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.tr-warm { color: #EFC876; }
/* the sample label under a mockup sits in the card's padding, so the card keeps Origin's height */
.tr-tag { display: flex; justify-content: center; margin: 14px 0 -30px; }

/* ---------------------------------------------------------------- See every bet: the feed (Origin's subscription list, 400 x 317)
   Rows 80 tall that overlap by 3, a light-to-dark fall on each, a 48px mark,
   the book and when, an optional type icon, the stake. */
.tr-feed { margin: 0; padding: 0; list-style: none; }
.tr-row { position: relative; display: grid; grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) auto auto; align-items: center; height: calc(80 * var(--u)); padding: 0 calc(19 * var(--u)) 0 calc(18 * var(--u));
  border-radius: calc(16 * var(--u)); background: linear-gradient(180deg, #2A2D2B 0%, #212422 46%, #181A19 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 calc(-10 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, .55); }
.tr-row + .tr-row { margin-top: calc(-3 * var(--u)); }
.tr-row img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; object-fit: cover; }
.tr-row-t { min-width: 0; padding-left: calc(28 * var(--u)); }
.tr-row-t b { display: block; font: 400 calc(16 * var(--u))/calc(22 * var(--u)) var(--os-sans); color: rgba(255, 255, 255, .94); white-space: nowrap; }
.tr-row-t small { display: block; margin-top: calc(3 * var(--u)); font: 300 calc(14 * var(--u))/calc(19 * var(--u)) var(--os-sans); color: rgba(255, 255, 255, .58); white-space: nowrap; }
.tr-row-ic { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-right: calc(24 * var(--u)); color: rgba(255, 255, 255, .55); }
.tr-row-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-row > em { grid-column: 4; font: 400 calc(17.5 * var(--u))/1 var(--os-sans); font-style: normal; letter-spacing: -.01em; color: #FFFFFF; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Know where your money goes: the flow (Origin's Sankey, 400 x 431)
   Books on the left, last week's total in the middle, sports on the right. */
.tr-flow { position: relative; margin: 0; border-radius: calc(16 * var(--u)); overflow: hidden;
  background: linear-gradient(158deg, #2E312F 0%, #252826 38%, #1C1E1D 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 50px -30px rgba(0, 0, 0, .8); }
.tr-flow-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-flow-svg text { font-family: var(--os-sans); fill: #FFFFFF; }
.tr-flow-l text { font-size: 14px; font-weight: 400; }
.tr-flow-l .v { font-weight: 300; fill: rgba(255, 255, 255, .86); }
.tr-flow-r text { font-size: 12px; font-weight: 400; text-anchor: end; fill: rgba(255, 255, 255, .95); }
.tr-flow-r .v { font-weight: 300; fill: rgba(255, 255, 255, .8); }
.tr-flow-wk { position: absolute; left: calc(18 * var(--u)); bottom: calc(46 * var(--u)); font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.2 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.tr-flow-tag { position: absolute; left: calc(18 * var(--u)); bottom: calc(18 * var(--u)); }

/* ---------------------------------------------------------------- Spot your busiest nights: a week of days (Origin's 7-day strip, 960 x 201)
   125 x 201 tiles 14 apart; the busiest night carries a mint edge. Origin's
   strip stays 960 wide on tablets and runs to the card's edges; so does ours. */
.tr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin: 0; padding: 0; list-style: none; }
.tr-day { position: relative; display: flex; flex-direction: column; align-items: center; height: calc(201 * var(--u)); padding: calc(19 * var(--u)) 0 calc(22 * var(--u)); border-radius: calc(12 * var(--u)); text-align: center;
  background: linear-gradient(162deg, #2B2E2C 0%, #1F2120 48%, #131514 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.tr-day-d { font: 500 calc(9 * var(--u))/calc(13 * var(--u)) var(--os-sans); letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.tr-day-d b { display: block; margin-top: calc(3 * var(--u)); font: 400 calc(13 * var(--u))/calc(17 * var(--u)) var(--os-sans); letter-spacing: 0; color: #FFFFFF; }
.tr-day-ic { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(8 * var(--u)); }
.tr-day-ic img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; }
.tr-none { display: block; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tr-day > em { font: 400 calc(15 * var(--u))/calc(20 * var(--u)) var(--os-sans); font-style: normal; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-day--top { background: linear-gradient(162deg, #2C3430 0%, #1E2522 48%, #121614 100%); box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .42), 0 0 calc(36 * var(--u)) calc(-12 * var(--u)) rgba(135, 204, 170, .5); }
.tr-day--top > em { color: var(--os-glow); }
.tr-wide { margin-top: 16px; }
@media (min-width: 992px) { .tr-wide .os-card-visual { flex: none; width: 960px; max-width: none; } }
@media (max-width: 767px) { .tr-wide { margin-top: 30px; } }

/* ---------------------------------------------------------------- Tap into your bets: the collage (Origin's two overlapping panels, 584 x 428)
   Les in front (356 x 343, 228px in), last week behind it (356 x 179, 249px
   down); they slide in from the right and the left. */
.tr-collage { --u: calc(100cqw / 584); container-type: inline-size; position: relative; width: 100%; max-width: 584px; aspect-ratio: 584 / 428; margin: 0 auto; text-align: left; }
.tr-col-a { position: absolute; z-index: 1; left: calc(228 * var(--u)); top: 0; width: calc(356 * var(--u)); }
.tr-col-b { position: absolute; z-index: 0; left: 0; top: calc(249 * var(--u)); width: calc(356 * var(--u)); }
html.os-js .tr-collage [data-reveal] { transition-delay: 0s, 0s; }
/* the panels slide in from 100px to each side; the section clips that sideways travel so a phone never scrolls sideways */
.tr-tap, .tr-gradsec { overflow-x: clip; }
.tr-panel { position: relative; overflow: hidden; border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, #282B29 0%, #202321 55%, #1B1D1C 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 calc(26 * var(--u)) calc(50 * var(--u)) calc(-14 * var(--u)) rgba(0, 0, 0, .75); }
.tr-panel-h { display: flex; align-items: center; gap: calc(9 * var(--u)); height: calc(55 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .07);
  font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.8 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.tr-panel-h .os-pearl { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.tr-advisor { height: calc(343 * var(--u)); }
.tr-advisor-in { padding: calc(16 * var(--u)); }
.tr-inset { height: calc(76 * var(--u)); padding: calc(17 * var(--u)) calc(16 * var(--u)) 0; border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.tr-inset .tr-micro { font-size: calc(9 * var(--u)); letter-spacing: calc(2.6 * var(--u)); }
.tr-inset-n { display: flex; justify-content: space-between; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); font: 400 calc(16 * var(--u))/1 var(--os-sans); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-inset-n .tr-warm { font-size: calc(13 * var(--u)); font-weight: 400; }
.tr-advisor-txt { margin-top: calc(20 * var(--u)); width: calc(330 * var(--u)); font: 400 calc(12 * var(--u))/calc(20 * var(--u)) var(--os-sans); color: rgba(255, 255, 255, .9);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(120 * var(--u)), rgba(0, 0, 0, .25) calc(168 * var(--u)), transparent calc(178 * var(--u))); mask-image: linear-gradient(180deg, #000 calc(120 * var(--u)), rgba(0, 0, 0, .25) calc(168 * var(--u)), transparent calc(178 * var(--u))); }
.tr-advisor-txt ul { margin: 0; padding: 0 0 0 calc(18 * var(--u)); list-style: none; }
.tr-advisor-txt li { position: relative; }
.tr-advisor-txt li::before { content: ""; position: absolute; left: calc(-11 * var(--u)); top: calc(8.5 * var(--u)); width: calc(3.5 * var(--u)); height: calc(3.5 * var(--u)); border-radius: 50%; background: currentColor; }
.tr-advisor-txt li b { display: block; font-weight: 400; color: #FFFFFF; }
.tr-week { height: calc(179 * var(--u)); }
.tr-week-in { padding: calc(15 * var(--u)) calc(16 * var(--u)) 0; }
.tr-week-n { font: 300 calc(22 * var(--u))/1 var(--os-sans); letter-spacing: -.01em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-collage-tag { position: absolute; right: 0; bottom: calc(6 * var(--u)); display: flex; }
/* the day tiles used in the collage and the Sunday review (Origin's 1-7 tiles) */
.tr-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(3 * var(--u)); margin: calc(18 * var(--u)) 0 0; padding: 0; list-style: none; }
.tr-tiles li { display: flex; flex-direction: column; justify-content: space-between; height: calc(48 * var(--u)); padding: calc(8 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u)); border-radius: calc(4 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #FFFFFF; }
.tr-tiles b { font: 400 calc(11 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .78); }
.tr-tiles span { font: 400 calc(9.5 * var(--u))/1 var(--os-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-tiles .t1 { background: rgba(233, 243, 238, .07); }
.tr-tiles .t2 { background: rgba(233, 243, 238, .16); }
.tr-tiles .t3 { background: #6F8C7D; box-shadow: none; }
.tr-tiles .t4 { background: #CFE3D8; box-shadow: none; color: #0C0E0D; }
.tr-tiles .t5 { background: #FFFFFF; box-shadow: none; color: #0C0E0D; }
.tr-tiles .t4 b, .tr-tiles .t5 b { color: rgba(12, 14, 13, .55); }
.tr-tiles .t3 b { color: rgba(255, 255, 255, .7); }
/* the rule and the claim under the collage (Origin: a 508px hairline, the statement and a fine line) */
.tr-claim { max-width: 508px; margin: 24px auto 0; }
.tr-rule { display: block; height: 1px; background: var(--os-line-2); }
.tr-claim .os-p { margin-top: 24px; }
.tr-claim .os-fine { margin-top: 10px; }

/* ---------------------------------------------------------------- the two Forest cards (Origin's violet "ultra gradient")
   Origin's exact build in Lessen's colours: a base colour, three shapes in a
   120px blur, six more in a second blur laid over them in overlay mode. Only
   the first shape moves (-180 -> 0 -> 180 degrees, 0 -> 24vw -> 0, two 10s
   legs), as on Origin. Sizes are in vw, as Origin's are. */
.tr-grad { background: #107550; }
.tr-gfx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.tr-gfx-main, .tr-gfx-over { position: absolute; left: 0; top: 0; width: 100%; height: 0; filter: blur(120px); }
.tr-gfx-over { z-index: 1; mix-blend-mode: overlay; opacity: .62; }
.tr-gfx i { position: absolute; display: block; border-radius: 1000vw; }
.tr-gfx .g3 { width: 35vw; height: 100vw; top: -19.8vw; left: -26vw; background: #5FAE89; transform: rotate(180deg); }
.tr-gfx .g2 { width: 25vw; height: 40vw; top: -20vw; left: -27.4vw; background: #0C0E0D; }
.tr-gfx .g1 { width: 40vw; height: 40vw; top: -24.7vw; left: 3.6vw; background: #0C0E0D; }
.tr-gfx .g8 { width: 47vw; height: 119vw; top: -17.1vw; left: 26.7vw; background: #3F936E; }
.tr-gfx .g9 { width: 30vw; height: 119vw; top: -5.3vw; left: 16vw; background: #87CCAA; }
.tr-gfx .g4 { width: 65vw; height: 40vw; top: -11.3vw; right: -17.8vw; background: #5FAE89; }
.tr-gfx .g5 { width: 30vw; height: 30vw; top: -21.7vw; left: 8.6vw; background: #0C0E0D; }
.tr-gfx .g7 { width: 20vw; height: 13vw; top: -4.1vw; right: -23.9vw; background: #0C0E0D; }
.tr-gfx .g6 { width: 66vw; height: 60vw; top: -14.2vw; left: 6.2vw; background: #A8EDC4; }
.tr-grad--b .g3 { width: 31vw; background: #0C0E0D; }
.tr-gfx .g3 { animation: trDrift 20s infinite; will-change: transform; }
@keyframes trDrift {
  0% { transform: translateX(0) rotate(-180deg); animation-timing-function: ease-in-out; }
  50% { transform: translateX(24vw) rotate(0deg); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0) rotate(180deg); }
}
.tr-gfx.tr-paused .g3 { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tr-gfx .g3 { animation: none; } }
.tr-grad .os-h3 { color: #F5F7F6; }
.tr-grad .os-p { color: rgba(255, 255, 255, .72); }
@media (min-width: 768px) { .tr-grad { min-height: 840px; } }

/* Morning recaps: the frosted panel (Origin's "Here's what we gathered", 400 x 367) */
.tr-frost { height: calc(367 * var(--u)); padding: calc(22 * var(--u)) calc(18 * var(--u)) 0; border-radius: calc(16 * var(--u)); background: rgba(9, 40, 27, .16);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.tr-frost-t { font: 300 calc(24 * var(--u))/calc(30 * var(--u)) var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.tr-frost ul { margin: calc(20 * var(--u)) 0 0; padding: 0; list-style: none; }
.tr-frost li { display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); row-gap: calc(7 * var(--u)); }
.tr-frost li + li { margin-top: calc(26 * var(--u)); }
.tr-frost li svg { grid-row: 1; width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-frost li b { grid-column: 2; grid-row: 1; align-self: center; font: 400 calc(15 * var(--u))/calc(22 * var(--u)) var(--os-sans); color: #FFFFFF; }
.tr-frost li span { grid-column: 2; font: 300 calc(13.5 * var(--u))/calc(21 * var(--u)) var(--os-sans); color: rgba(255, 255, 255, .78); }

/* Sunday reviews: the story card (Origin's weekly recap, 400 x 514) */
.tr-story { height: calc(514 * var(--u)); padding: calc(26 * var(--u)) calc(16 * var(--u)) 0; border-radius: calc(16 * var(--u)); background: rgba(12, 14, 13, .22);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.tr-story-top { display: flex; justify-content: space-between; align-items: center; height: calc(12 * var(--u)); }
.tr-dashes { display: flex; gap: calc(4 * var(--u)); }
.tr-dashes i { display: block; width: calc(22 * var(--u)); height: calc(2 * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, .3); }
.tr-dashes i.on { background: #FFFFFF; }
.tr-story-top svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-right: calc(2 * var(--u)); fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; }
.tr-story-t { max-width: calc(270 * var(--u)); margin-top: calc(22 * var(--u)); font: 300 calc(25 * var(--u))/calc(27 * var(--u)) var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.tr-story-card { margin-top: calc(16 * var(--u)); border-radius: calc(16 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .05); }
.tr-story-card > .tr-micro { display: flex; align-items: center; height: calc(52 * var(--u)); padding: 0 calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .16); letter-spacing: calc(2.8 * var(--u)); }
.tr-story-in { padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); }
.tr-story-n { font: 300 calc(25 * var(--u))/1 var(--os-sans); letter-spacing: -.01em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-story .tr-tiles { margin-top: calc(18 * var(--u)); }
.tr-story .tr-tiles li { height: calc(53 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tr-story .tr-tiles .t1 { background: rgba(255, 255, 255, .08); }
.tr-story .tr-tiles .t2 { background: rgba(255, 255, 255, .2); }
.tr-story .tr-tiles .t3 { background: #8DC5A8; box-shadow: none; color: #0C0E0D; }
.tr-story .tr-tiles .t3 b { color: rgba(12, 14, 13, .55); }
.tr-story .tr-tiles .t4 { background: #DDF2E6; }
.tr-story-p { margin-top: calc(18 * var(--u)); font: 400 calc(15 * var(--u))/calc(23.5 * var(--u)) var(--os-sans); color: #FFFFFF; }

/* ---------------------------------------------------------------- the weekly number: two app panels (Origin's Suggested budget, 400 x 381, and Budget tracking, 400 x 514) */
.tr-ui { position: relative; overflow: hidden; border-radius: calc(16 * var(--u)); background: linear-gradient(150deg, #2B2E2C 0%, #202322 46%, #131514 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 50px -30px rgba(0, 0, 0, .8); }
.tr-ui-h { display: flex; align-items: center; height: calc(62 * var(--u)); padding: 0 calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .07);
  font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.6 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.tr-chart { height: calc(381 * var(--u)); }
.tr-chart-in { padding-top: calc(24 * var(--u)); }
.tr-chart-n { padding: 0 calc(18 * var(--u)); font: 300 calc(34 * var(--u))/1 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-chart-s { padding: 0 calc(18 * var(--u)); margin-top: calc(8 * var(--u)); font: 300 calc(12 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .55); }
.tr-bars { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; height: calc(178 * var(--u)); margin-top: calc(12 * var(--u)); padding: 0 calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tr-bars i { justify-self: center; display: block; width: calc(14 * var(--u)); height: calc(var(--h) * 178 / 570 * var(--u)); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; background: linear-gradient(180deg, #4E5350 0%, #3A3E3C 100%); }
.tr-line { position: absolute; left: 0; right: calc(23 * var(--u)); bottom: calc(var(--h) * 178 / 570 * var(--u)); height: 0; border-top: 1px dashed rgba(255, 255, 255, .82); }
.tr-line::after { content: ""; position: absolute; right: calc(-8 * var(--u)); top: calc(-4.5 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #FFFFFF; }
.tr-bars-x { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: calc(21 * var(--u)) calc(18 * var(--u)) 0; text-align: center; font: 400 calc(13 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .7); white-space: nowrap; }
.tr-room { height: calc(514 * var(--u)); }
.tr-gauge { position: relative; width: calc(220 * var(--u)); height: calc(220 * var(--u)); margin: calc(15 * var(--u)) auto 0; }
.tr-gauge svg { display: block; width: 100%; height: 100%; transform: rotate(140deg); overflow: visible; }
.tr-gauge circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.tr-gauge .trk { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 260 360; }
.tr-gauge .arc { stroke: #A8EDC4; stroke-dasharray: 145.6 360; filter: drop-shadow(0 0 6px rgba(135, 204, 170, .45)); }
.tr-gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: calc(14 * var(--u)); }
.tr-gauge-c span { font: 400 calc(14 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .9); }
.tr-gauge-c b { margin-top: calc(9 * var(--u)); font: 300 calc(30 * var(--u))/1 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-gauge-c small { margin-top: calc(8 * var(--u)); font: 400 calc(12.5 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .82); }
.tr-books { margin: calc(-27 * var(--u)) calc(18 * var(--u)) 0; padding: 0; list-style: none; }
.tr-books li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; height: calc(69 * var(--u)); padding: 0 calc(16 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); }
.tr-books li + li { margin-top: calc(9 * var(--u)); }
.tr-books li > span { display: flex; align-items: center; gap: calc(10 * var(--u)); font: 400 calc(15.5 * var(--u))/1 var(--os-sans); color: #FFFFFF; }
.tr-books li > span i { display: block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--c); }
.tr-books em { font: 300 calc(15.5 * var(--u))/1 var(--os-sans); font-style: normal; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.tr-books em b { font-weight: 400; color: #FFFFFF; }
.tr-books li > svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(14 * var(--u)); fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-books li::before, .tr-books li::after { content: ""; position: absolute; bottom: calc(15 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(4 * var(--u)); }
.tr-books li::before { left: calc(18 * var(--u)); width: calc((100% - 36 * var(--u)) * var(--v) / 100); min-width: calc(8 * var(--u)); background: var(--c); }
.tr-books li::after { right: calc(18 * var(--u)); width: calc((100% - 36 * var(--u)) * (100 - var(--v)) / 100 - 6 * var(--u)); background: rgba(255, 255, 255, .12); }
.tr-books .b1 { --c: #E9F3EE; } .tr-books .b2 { --c: #87CCAA; } .tr-books .b3 { --c: #3F936E; }

/* the sample line under the note stack sits closer, so the section keeps near Origin's 664px */
.tr-hear .os-stack-tag { margin-top: 16px; }

/* ---------------------------------------------------------------- orbit, download: page details */
.tr-orbit-note { margin-top: 12px; color: var(--os-fg-3); }
.tr .os-home .ring .arc { stroke-dasharray: 56 100; }
.tr .os-home .steps .tr-mon i { height: 1.25em; border-radius: .5em; background: linear-gradient(180deg, #A8EDC4, #87CCAA); }

/* ---------------------------------------------------------------- phones (Origin's 767 breakpoint)
   The mockups keep shrinking with their cards, as Origin's images do. The
   day strip is the one exception: Origin shrinks it to 278 x 58, where its
   writing can't be read; ours keeps a short, readable tile instead. */
@media (max-width: 767px) {
  .tr-art--days { --u: 1px; }
  .tr-days { gap: 5px; }
  .tr-day { height: 84px; padding: 9px 0; border-radius: 8px; }
  .tr-day-d { font-size: 7px; line-height: 9px; letter-spacing: .6px; }
  .tr-day-d b { margin-top: 1px; font-size: 10px; line-height: 12px; }
  .tr-day-ic { gap: 3px; }
  .tr-day-ic img, .tr-none { width: 16px; height: 16px; }
  .tr-day > em { font-size: 9px; line-height: 11px; }
  .tr-day--top { box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .5), 0 0 16px -6px rgba(135, 204, 170, .55); }
  .tr-tag { margin-bottom: -28px; }
  .tr-orbit-note { margin-top: 8px; font-size: 10px; line-height: 13px; }
}

/* ---------------------------------------------------------------- Oct 21: the hero film (the tracking network) */
.tr .os-art.tr-film { background-image: url(/assets/lr/tracking/hero-loop.webp); background-position: 50% 50%; }
.tr .os-art.tr-film video { object-position: 50% 50%; }
@media (max-aspect-ratio: 1/1) { .tr .os-art.tr-film { background-image: url(/assets/lr/tracking/hero-loop-tall.webp); background-position: 50% 50%; } .tr .os-art.tr-film video { object-position: 50% 50%; } }
/* Oct 25: Origin's overlay, one linear fade: a light wash under the nav, clear footage through the middle, ink at the foot */
.tr .os-art.tr-film::after { background: linear-gradient(180deg, rgba(12, 14, 13, .32) 0%, rgba(12, 14, 13, 0) 20%, rgba(12, 14, 13, 0) 56%, #0C0E0D 100%); }

/* ---------------------------------------------------------------- Oct 21: See every bet as real iOS-style notifications */
.tr-lock { border-radius: calc(26 * var(--u)); padding: calc(18 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%), #0A0B0B; /* plain black (Kene, Oct 23): not the hero's eye film */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.tr-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(8 * var(--u)); }
.tr-n { position: relative; display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); gap: calc(11 * var(--u)); align-items: start; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u));
  border-radius: calc(20 * var(--u)); background: rgba(38, 42, 40, .58); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, .6); }
.tr-n-ic { position: relative; display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); background: linear-gradient(160deg, #164832, #0F2A1F); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
.tr-n-ic svg { width: 62%; height: auto; fill: #E9F3EE; } .tr-n-ic svg .s3 { fill: #A8EDC4; }
.tr-n-bk { position: absolute; right: calc(-5 * var(--u)); bottom: calc(-5 * var(--u)); width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: 50%; box-shadow: 0 0 0 calc(2 * var(--u)) rgba(38, 42, 40, 1); }
.tr-n-bk.fd { background: #1493FF url(/assets/lr/book-fd.webp) center / cover; } .tr-n-bk.dk { background: #53A318 url(/assets/lr/book-dk.webp) center / cover; }
.tr-n-b { min-width: 0; display: block; }
.tr-n-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tr-n-h b { font: 500 calc(11 * var(--u))/calc(15 * var(--u)) var(--os-sans); letter-spacing: calc(.6 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.tr-n-h time { font: 400 calc(12 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .5); }
.tr-n strong { display: block; margin-top: calc(2 * var(--u)); font: 500 calc(14.5 * var(--u))/calc(19 * var(--u)) var(--os-sans); color: #FFFFFF; }
.tr-n-t { display: block; font: 400 calc(13.5 * var(--u))/calc(18 * var(--u)) var(--os-sans); color: rgba(255, 255, 255, .78); }
.tr-n--old { transform: scale(.95); opacity: .78; margin-top: calc(-2 * var(--u)); }
html.os-js .tr-n { opacity: 0; transform: translateY(calc(-22 * var(--u))) scale(.96); }
html.os-js .tr-notes.tr-in .tr-n { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .7s cubic-bezier(.2, .8, .2, 1); }
html.os-js .tr-notes.tr-in .tr-n--old { opacity: .78; transform: scale(.95); }
.tr-notes.tr-in .tr-n:nth-child(2) { transition-delay: .14s; } .tr-notes.tr-in .tr-n:nth-child(3) { transition-delay: .28s; } .tr-notes.tr-in .tr-n:nth-child(4) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) { html.os-js .tr-n { opacity: 1; transform: none; transition: none; } html.os-js .tr-n--old { opacity: .78; transform: scale(.95); } }

/* Oct 25: the eye film (Higgsfield, 13.3 s ping-pong loop, no blink, eased at both turns) keeps its left half black, so wide screens need no scrim;
   a soft side wash only takes the edge off the light rows where the words cross the face */
.os-hero .tr-film::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,14,13,0) 35%, rgba(12,14,13,.28) 58%, rgba(12,14,13,0) 80%); }
/* phones: the tall cut keeps the words on black and lets the eye rise out of the dark below them */
@media (max-aspect-ratio: 1/1) {
  .os-hero .tr-film::before { background: none; }
  .tr .os-art.tr-film::after { background: linear-gradient(180deg, rgba(12, 14, 13, .3) 0%, rgba(12, 14, 13, 0) 18%, rgba(12, 14, 13, 0) 80%, #0C0E0D 100%); }
}