/* Lessen OS: the dark product-page system (Oct 21, 2026).
 *
 * Origin's (useorigin.com) measured page system, in Lessen's brand. Every
 * number below was measured on Origin's live pages on Oct 21, 2026 (the study
 * in ~/Downloads/Lessen Website 2026-10-21 (Origin study)/), then the brand
 * substitutions in the page map were applied and nothing else:
 *   Origin #0F1011 page        -> Lessen Ink #0C0E0D
 *   Lyon Display 300           -> Inter Tight 300, first word Instrument Serif italic
 *   Roboto Mono labels         -> Inter Tight uppercase, tracked to the same width
 *   charcoal #2B2B2C -> #131313 -> #282B29 -> #121413 (a faint green undertone)
 *   violet and blue gradients  -> the Forest gradient (#164832, #3F936E, #87CCAA)
 *   looping photo footage      -> looping green silk rendered from Lessen's art
 * Load after chrome.css. Markup, options and rules: docs/OS-SYSTEM.md; every
 * component is on show at /system.
 */
:root {
  --os-bg: #0C0E0D;
  --os-fg: #FFFFFF;
  --os-fg-2: rgba(255, 255, 255, .6);
  --os-fg-3: rgba(255, 255, 255, .45);
  --os-fg-4: rgba(255, 255, 255, .38);
  --os-line: rgba(255, 255, 255, .12);
  --os-line-2: rgba(255, 255, 255, .14);
  --os-pine: #164832; --os-forest: #3F936E; --os-mint: #87CCAA; --os-glow: #A8EDC4; --os-pearl: #E9F3EE; --os-deep: #09281B; --os-green: #107550;
  --os-card: linear-gradient(135deg, #282B29, #121413) #2B2E2C;
  --os-glass: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
  --os-forest-grad: linear-gradient(160deg, #164832, #3F936E 70%, #87CCAA);
  --os-rise: linear-gradient(180deg, #0C0E0D 0%, #0E1E17 18%, #164832 37%, #3F936E 69%, #3F936E 100%);
  --os-out: cubic-bezier(.165, .84, .44, 1);        /* outQuart: every reveal */
  --os-io: cubic-bezier(.455, .03, .515, .955);      /* ease-in-out-quad: hovers */
  --os-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --os-serif: "Instrument Serif", "Times New Roman", serif;
}

/* ---------------------------------------------------------------- the page */
html:has(body.os) { background: var(--os-bg); color-scheme: dark; }
body.os, body.lr.os { margin: 0; background: var(--os-bg); color: var(--os-fg); font: 300 16px/24px var(--os-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
:where(body.os) :where(h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(body.os) :where(a) { color: inherit; }
:where(body.os) :where(img, video) { display: block; max-width: 100%; }
body.os :focus-visible { outline: 2px solid var(--os-glow); outline-offset: 3px; border-radius: 8px; }
body.os ::selection { background: rgba(135, 204, 170, .35); }
body.os [hidden]:not(.lr-sheet):not(.lr-dd-panel) { display: none !important; }
.os-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- type
   Origin's scale (1440 -> 390): h1 96/86.4 -> 40/36; display h2 96/86.4 ->
   60/54; h2 80/80 -> 46/46; reading h2 48/55.2 -> 38; card h3 38/34.2 (the
   same on phones). Sizes glide between the two measured widths. Tracking is
   tuned so Inter Tight sets the same line lengths as Lyon Display
   (measured: "Track your spending" 769px, "Ask about your spending" 760px). */
.os-h1, .os-h2, .os-h2-xl, .os-h3, .os-h4, .os-h5 { font-family: var(--os-sans); font-weight: 300; color: var(--os-fg); letter-spacing: -.02em; text-wrap: balance; }
.os-h1 { font-size: clamp(40px, 8.833vw + 5.55px, 96px); line-height: .9; }
.os-h2-xl { font-size: clamp(60px, 5.678vw + 37.86px, 96px); line-height: .9; }
.os-h2 { font-size: clamp(46px, 5.363vw + 25.09px, 80px); line-height: 1; }
.os-h4 { font-size: clamp(38px, 1.577vw + 31.85px, 48px); line-height: 1.15; }
.os-h3 { font-size: 38px; line-height: .9; }
.os-h5 { font-size: 22px; line-height: .9; }
:is(.os-h1, .os-h2, .os-h2-xl, .os-h3, .os-h4, .os-h5) :is(i, em) { font-family: var(--os-serif); font-style: italic; font-weight: 400; font-size: 1.04em; line-height: 0; letter-spacing: -.01em; }
.os-p, .os-sub { font: 300 16px/24px var(--os-sans); color: var(--os-fg-2); }
.os-sub { max-width: 420px; margin-left: auto; margin-right: auto; }
.os-p-lg { font: 300 18px/27px var(--os-sans); color: var(--os-fg); }
.os-p-xl { font: 300 24px/36px var(--os-sans); color: var(--os-fg); letter-spacing: -.01em; }
.os-small { font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.os-fine { font: 300 12px/16.92px var(--os-sans); color: var(--os-fg-2); }
/* labels: Origin's Roboto Mono roles, in tracked Inter Tight */
.os-label { font: 500 12px/24px var(--os-sans); letter-spacing: .03em; text-transform: uppercase; }
.os-eyebrow { font: 500 11px/15.4px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-fg-3); }
.os-micro { font: 500 10px/14px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-fg-2); }
.os-legal { font: 500 10px/13.5px var(--os-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--os-fg-4); }
.os-num { font-variant-numeric: tabular-nums; }
/* every made-up number says so, beside it */
.os-tag { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--os-sans); letter-spacing: 0; color: var(--os-fg-2); }
.os-tag::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--os-mint); box-shadow: 0 0 6px rgba(135, 204, 170, .7); }
.os-soon { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 100px; background: rgba(255, 255, 255, .1); font: 500 10px/1 var(--os-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--os-fg); }

/* ---------------------------------------------------------------- layout
   Sections: 100px / 32px (70px / 16px on phones); a 1400px wrapper; text
   blocks 1200 / 980 / 420; grids 2 x 680 and 3 x 448 with 16px gaps at 1440. */
.os-section { position: relative; padding: 100px 32px; }
.os-section--flush-top { padding-top: 0; }
.os-section--flush-bottom { padding-bottom: 0; }
.os-wrap { max-width: 1400px; margin: 0 auto; }
.os-container { max-width: 1200px; margin: 0 auto; }
.os-measure { max-width: 980px; margin: 0 auto; }
.os-head { max-width: 980px; margin: 0 auto 100px; text-align: center; }
.os-head > .os-sub, .os-head > .os-p { max-width: 420px; margin: 24px auto 0; }
.os-head > .os-btn, .os-head > .os-btns { margin-top: 24px; }
.os-head--flush { margin-bottom: 0; }
.os-head--left { margin-left: 0; text-align: left; }
.os-center { text-align: center; }
.os-divider { display: block; height: 1px; margin: 0; border: 0; background: var(--os-line); }
.os-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.os-grid-2, .os-grid-3, .os-grid-4 { display: grid; gap: 16px; }
.os-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.os-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.os-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.os-span { grid-column: 1 / -1; }
.os-stack-16 > * + * { margin-top: 16px; }
@media (max-width: 991px) { .os-grid-3, .os-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .os-section { padding: 70px 16px; }
  .os-section--flush-top { padding-top: 0; }
  .os-section--flush-bottom { padding-bottom: 0; }
  .os-head { margin-bottom: 60px; }
  .os-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .os-grid-3, .os-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- buttons
   GET STARTED: white, 48px, radius 8, 12px uppercase label and a 15px arrow
   4px after it; hover to 86% white over .2s; nothing moves. */
.os-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 48px; padding: 12px 18px; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 500 12px/24px var(--os-sans); letter-spacing: .05em; text-transform: uppercase; color: #000000; background: #FFFFFF;
  -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
body.os a.os-btn { color: #000000; }
.os-btn:hover { background: rgba(255, 255, 255, .86); }
.os-btn svg, .os-arr { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.os-btn--dark, body.os a.os-btn--dark { color: #FFFFFF; background: rgba(255, 255, 255, .1); }
.os-btn--dark:hover { background: rgba(255, 255, 255, .18); }
.os-btn--sm { height: 36px; padding: 10px 12px; font-size: 12px; line-height: 16px; }
.os-btn--block { display: flex; width: 100%; }
.os-btn[disabled], .os-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------- reveal
   Origin's slideInBottom: from opacity 0 and 100px down to rest, 1s outQuart,
   250ms delay, once, when it enters the view. data-reveal="left" / "right"
   slide in from 100px to the side instead (Origin's collages). Nothing is
   hidden without JavaScript, and nothing moves under reduced motion. */
html.os-js [data-reveal] { transition: opacity 1s var(--os-out) .25s, transform 1s var(--os-out) .25s; }
html.os-js [data-reveal]:not(.os-in) { opacity: 0; transform: translate3d(0, 100px, 0); }
html.os-js [data-reveal="left"]:not(.os-in) { transform: translate3d(-100px, 0, 0); }
html.os-js [data-reveal="right"]:not(.os-in) { transform: translate3d(100px, 0, 0); }
html.os-js [data-reveal="fade"]:not(.os-in) { transform: none; }
@media (prefers-reduced-motion: reduce) { html.os-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- moving art
   A looping, muted silk film (os.js puts the <video> in; until then, without
   JavaScript and under reduced motion the poster frame shows). The page
   colour rises over the lower part, as Origin's gradient does, so the art
   always ends in the page. Looks: forest, night, dawn, deep (heroes) and
   dl-forest, dl-night, dl-dawn, dl-deep (download banners). */
.os-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--os-bg) center / cover no-repeat; }
.os-art video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .6s; }
.os-art video.on { opacity: 1; }
.os-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 14, 13, 0), #0C0E0D); }
.os-art[data-os-video="forest"] { background-image: url(/assets/lr/os/video/forest.webp); }
.os-art[data-os-video="night"] { background-image: url(/assets/lr/os/video/night.webp); }
.os-art[data-os-video="dawn"] { background-image: url(/assets/lr/os/video/dawn.webp); }
.os-art[data-os-video="deep"] { background-image: url(/assets/lr/os/video/deep.webp); }
.os-art[data-os-video="dl-forest"] { background-image: url(/assets/lr/os/video/dl-forest.webp); }
.os-art[data-os-video="dl-night"] { background-image: url(/assets/lr/os/video/dl-night.webp); }
.os-art[data-os-video="dl-dawn"] { background-image: url(/assets/lr/os/video/dl-dawn.webp); }
.os-art[data-os-video="dl-deep"] { background-image: url(/assets/lr/os/video/dl-deep.webp); }
@media (max-aspect-ratio: 1/1) {
  .os-art[data-os-video="forest"] { background-image: url(/assets/lr/os/video/forest-tall.webp); }
  .os-art[data-os-video="night"] { background-image: url(/assets/lr/os/video/night-tall.webp); }
  .os-art[data-os-video="dawn"] { background-image: url(/assets/lr/os/video/dawn-tall.webp); }
  .os-art[data-os-video="deep"] { background-image: url(/assets/lr/os/video/deep-tall.webp); }
  .os-art[data-os-video="dl-forest"] { background-image: url(/assets/lr/os/video/dl-forest-tall.webp); }
  .os-art[data-os-video="dl-night"] { background-image: url(/assets/lr/os/video/dl-night-tall.webp); }
  .os-art[data-os-video="dl-dawn"] { background-image: url(/assets/lr/os/video/dl-dawn-tall.webp); }
  .os-art[data-os-video="dl-deep"] { background-image: url(/assets/lr/os/video/dl-deep-tall.webp); }
}

/* ---------------------------------------------------------------- hero
   Full bleed, the height of the window (900 at 1440 x 900, 844 on a phone),
   the copy centred: padding 180 / 100 / 50 (100 / 24 / 70 on phones). */
.os-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; min-height: 100svh; padding: 180px 100px 50px; overflow: hidden; text-align: center; }
.os-hero-in { position: relative; z-index: 1; width: 100%; max-width: 980px; margin: 0 auto; }
.os-hero .os-sub { margin-top: 24px; }
.os-hero .os-btn, .os-hero .os-btns { margin-top: 24px; }
.os-hero .os-lesbar { margin-top: 40px; }
.os-hero-cap { margin: 24px auto; font: 300 16px/24px var(--os-sans); color: var(--os-fg-2); }
.os-hero-cap .os-tag { margin-left: 8px; vertical-align: 1px; }
.os-hero--short { min-height: 0; padding-top: 205px; padding-bottom: 50px; }
@media (max-width: 767px) {
  .os-hero { padding: 100px 24px 70px; } .os-hero--short { padding-top: 150px; }
  .os-hero .os-sub, .os-hero .os-btn, .os-hero .os-btns { margin-top: 16px; }
  .os-hero .os-lesbar { margin-top: 30px; }
  .os-hero-cap .os-tag { display: flex; justify-content: center; margin: 4px 0 0; }
}

/* ---------------------------------------------------------------- the Les bar
   Origin's typing bar (590 x 80, a pill of 12% white with a 24px blur, a 60px
   send circle), but Les speaks first: it types Les's heads-up, then the
   field turns into "Reply to Les..." with a caret, then the next heads-up.
   Two messages, one full cycle about every 16.3s, as Origin's does. */
.os-lesbar { position: relative; display: flex; align-items: center; gap: 20px; width: 590px; max-width: 100%; height: 80px; margin: 0 auto; padding: 10px 10px 10px 20px; border-radius: 100vw; text-decoration: none; text-align: left; color: #FFFFFF;
  background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 18px 20px rgba(0, 0, 0, .2); -webkit-tap-highlight-color: transparent; }
.os-lesbar-who { flex: none; display: grid; place-items: center; width: 12px; height: 12px; margin-right: -10px; }
.os-pearl { display: block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFFFFF, #E9F3EE 35%, #A8EDC4 70%, #87CCAA); box-shadow: 0 0 10px rgba(168, 237, 196, .65); }
.os-lesbar-text { position: relative; flex: 1; min-width: 0; height: 24px; overflow: hidden; }
.os-lesbar-msg, .os-lesbar-reply { position: absolute; left: 0; right: 0; top: 0; display: block; overflow: hidden; white-space: nowrap; font: 300 16px/24px var(--os-sans); transition: transform .45s var(--os-io), opacity .45s var(--os-io); }
.os-lesbar-reply { color: rgba(255, 255, 255, .6); opacity: 0; transform: translateY(70%); }
.os-lesbar.is-reply .os-lesbar-msg { opacity: 0; transform: translateY(-70%); }
.os-lesbar.is-reply .os-lesbar-reply { opacity: 1; transform: none; }
.os-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: currentColor; animation: osBlink 1s steps(1) infinite; }
.os-lesbar-reply .os-caret { margin-left: 0; margin-right: 2px; background: #FFFFFF; }
@keyframes osBlink { 50% { opacity: 0; } }
.os-lesbar-send { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 100%; background: rgba(255, 255, 255, .24); transition: background-color .45s; }
.os-lesbar.is-reply .os-lesbar-send { background: rgba(255, 255, 255, .34); }
.os-lesbar-send svg { width: 17px; height: 20px; fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .os-lesbar { gap: 14px; width: 342px; height: 54px; padding: 7px 7px 7px 18px; }
  .os-lesbar-who { margin-right: -6px; }
  .os-lesbar-text { height: 20px; }
  .os-lesbar-msg, .os-lesbar-reply { font-size: 13px; line-height: 20px; }
  .os-lesbar-send { width: 40px; height: 40px; }
  .os-lesbar-send svg { width: 13px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .os-caret { animation: none; } .os-lesbar-msg, .os-lesbar-reply { transition: none; } }

/* ---------------------------------------------------------------- the stair mark
   Origin turns its sparkle one full turn as the section scrolls in. Ours is
   the floating stair: the slabs start stacked and step down into place with
   the scroll (os.js sets --k from 0 to 1), and the landing lights up. 48px
   tall, 50px above the heading (30px on phones). */
.os-mark { --k: 1; position: relative; display: block; width: 62px; height: 48px; margin: 0 auto 50px; }
.os-mark i { position: absolute; width: 44.44%; height: 28.57%; border-radius: 999px; background: linear-gradient(135deg, #FFFFFF 0%, rgba(222, 247, 233, .92) 34%, rgba(160, 218, 189, .7) 70%, rgba(44, 118, 86, .75) 100%); box-shadow: inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .35), inset -5px -6px 12px rgba(9, 40, 27, .3), 0 14px 22px -10px rgba(0, 0, 0, .85); }
.os-mark i:nth-child(1) { left: 0; top: 0; }
.os-mark i:nth-child(2) { left: 27.78%; top: 35.71%; transform: translate(calc(-62.5% * (1 - var(--k))), calc(-125% * (1 - var(--k)))); opacity: calc(.2 + .8 * var(--k)); }
.os-mark i:nth-child(3) { left: 55.56%; top: 71.43%; transform: translate(calc(-125% * (1 - var(--k))), calc(-250% * (1 - var(--k)))); opacity: calc(.2 + .8 * var(--k)); background: linear-gradient(135deg, #FFFFFF 0%, #CFF3DE 30%, #87CCAA 62%, #2C7656 100%); box-shadow: inset 0 1.5px 0 #fff, 0 0 calc(30px * var(--k)) rgba(168, 237, 196, calc(.6 * var(--k))), 0 14px 22px -10px rgba(0, 0, 0, .85); }
@media (max-width: 767px) { .os-mark { width: 39px; height: 30px; margin-bottom: 30px; } }

/* ---------------------------------------------------------------- Hear from Les first: the note stack
   Origin's question pile, front card 804 wide: every 3s the front card grows
   to 1.08, rises, blurs and fades (0.5s), the two behind step forward and a
   new one joins at the back; the back cards peek 16px each and are dimmed.
   Each Les note: what Les noticed, why it matters, one next step, Reply. */
.os-stack { position: relative; width: 804px; max-width: 100%; margin: 0 auto; }
.os-note { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 20px 20px 22px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, #262927, #161817); transform-origin: 50% 100%; will-change: transform, opacity, filter;
  transition: transform .5s ease-in-out, opacity .5s ease-in-out, filter .5s ease-in-out; }
.os-note::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--os-bg); opacity: 0; pointer-events: none; transition: opacity .5s ease-in-out; }
.os-note > * { transition: opacity .3s ease-in-out; }
.os-note[data-pos="0"] { z-index: 4; transform: none; opacity: 1; }
.os-note[data-pos="1"] { z-index: 3; transform: translateY(16px) scale(.9167); }
.os-note[data-pos="2"] { z-index: 2; transform: translateY(32px) scale(.8333); }
.os-note[data-pos="1"]::after { opacity: .25; }
.os-note[data-pos="2"]::after { opacity: .45; }
.os-note[data-pos="back"] { z-index: 1; transform: translateY(48px) scale(.75); opacity: 0; }
.os-note[data-pos="out"] { z-index: 5; transform: translateY(-24px) scale(1.08); opacity: 0; filter: blur(8px); }
.os-note:not([data-pos="0"]):not([data-pos="out"]) > * { opacity: 0; }
.os-note.os-snap { transition: none; }
.os-note-who { align-self: start; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; }
.os-note-who .os-pearl { width: 16px; height: 16px; }
.os-note-label { font: 500 11px/15.4px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-mint); }
.os-note-what { margin-top: 4px; font: 400 16px/24px var(--os-sans); color: #FFFFFF; }
.os-note-why { margin-top: 2px; font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.os-note-act { display: flex; align-items: center; gap: 6px; }
.os-note-reply { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px; text-decoration: none; font: 500 12px/1 var(--os-sans); letter-spacing: .03em; text-transform: uppercase; color: var(--os-fg-2); transition: color .2s, background-color .2s; }
.os-note-reply:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.os-note-reply svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.os-stack-tag { display: flex; justify-content: center; margin-top: 24px; }
@media (max-width: 767px) {
  .os-note { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 12px; }
  .os-note-act { grid-column: 2; }
  .os-note-what { font-size: 15px; line-height: 22px; }
  .os-note-why { font-size: 13px; line-height: 19px; }
}

/* ---------------------------------------------------------------- cards
   Origin's track card: radius 16, the 135 degree charcoal, padding 90, at
   least 700 tall, content from the top, centred, 40px between the copy and
   the visual; copy 400 wide with 24px between title and text. Phones:
   padding 62 / 40, at least 500 tall. */
.os-card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 40px; min-width: 0; min-height: 700px; padding: 90px; border-radius: 16px; overflow: hidden; text-align: center; color: var(--os-fg); background: var(--os-card); }
.os-card-copy { width: 100%; max-width: 400px; }
.os-card-copy > .os-h3 + .os-p, .os-card-copy > .os-h3 + .os-p-lg { margin-top: 24px; }
.os-card-copy > .os-eyebrow + .os-h3 { margin-top: 16px; }
.os-card-visual { width: 100%; max-width: 400px; }
.os-card-visual > img, .os-card-visual > svg { display: block; width: 100%; height: auto; }
.os-card--wide { min-height: 0; }
.os-card--wide .os-card-copy { max-width: 600px; }
.os-card--wide .os-card-visual { max-width: 960px; }
.os-card--tall-art { justify-content: space-between; }
/* text cards: steps, product lists, reasons (Origin 448 x 193-220, padding 32, label then text 40px below) */
.os-card--text { align-items: flex-start; gap: 40px; min-height: 0; padding: 32px; text-align: left; }
.os-card--text .os-p-lg, .os-card--text .os-p { margin: 0; }
/* tall text cards (Estate's three pillars: 448 x 338, radius 30, padding 96 / 40) */
.os-card--pillar { justify-content: flex-start; align-items: flex-start; gap: 16px; min-height: 338px; padding: 96px 40px 40px; border-radius: 30px; text-align: left; }
/* glass cards, on Forest panels (Origin 502 x 212, padding 32) */
.os-card--glass { align-items: flex-start; gap: 32px; min-height: 212px; padding: 32px; text-align: left; background: var(--os-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
/* a full-width glass card with its copy set in from the left (Employers' last segment) */
.os-card--offset { padding-left: 310px; }
@media (max-width: 991px) { .os-card--offset { padding-left: 32px; } }
/* art cards (Origin's photo cards, 448 x 700): art fills it, the page colour rises from the bottom under the words */
.os-card--art { justify-content: flex-end; align-items: flex-start; padding: 32px; text-align: left; background: #101211; }
.os-card--art > .os-card-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.os-card--art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 14, 13, 0) 45%, #0C0E0D 96%); }
.os-card--art .os-card-copy { max-width: 310px; }
.os-card--art .os-card-t { font: 400 16px/24px var(--os-sans); color: #FFFFFF; }
.os-card--art .os-card-t + .os-p { margin-top: 0; }
.os-card--art .os-card-float { position: absolute; left: 50%; top: 96px; width: min(359px, calc(100% - 64px)); transform: translateX(-50%); }
@media (max-width: 991px) { .os-card { padding: 62px 40px; } .os-card--text, .os-card--glass, .os-card--art { padding: 32px; } .os-card--pillar { padding: 72px 32px 32px; } }
@media (max-width: 767px) {
  .os-card { min-height: 500px; }
  .os-card--wide, .os-card--text, .os-card--glass { min-height: 0; }
  .os-card--pillar { min-height: 320px; padding: 30px; border-radius: 24px; justify-content: flex-end; }
  .os-card--art { min-height: 600px; }
  .os-card--glass { border-radius: 10px; }
}

/* Copy-and-demo card pairs (Oct 23, 2026). A two-up row of cards that each
   hold words and a live demo stays side by side from 992px up; below that
   (iPad portrait and phones) the cards stack, one per row, each with its
   words first and its demo under them. Stacked, a card is only as tall as
   what it holds, so no tall empty card is left behind. Text-only card grids
   are not affected. */
@media (max-width: 991px) {
  .os-grid-2:has(> .os-card > .os-card-visual) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .os-grid-2 > .os-card:has(> .os-card-visual) { min-height: 0 !important; padding: 64px 40px 56px; }
  .os-grid-2 > .os-card:has(> .os-card-visual) .os-card-copy { max-width: 520px; }
}
@media (max-width: 767px) {
  .os-grid-2 > .os-card:has(> .os-card-visual) { padding: 56px 24px 44px; }
}

/* Forest gradient cards with drifting light (Origin's 20s violet drift):
   large blurred lights turn and slide inside the card, -180 -> 0 -> 180
   degrees and 0 -> 24vw -> 0 in two 10s legs. */
.os-card--grad { background: #1F6347; }
.os-gradfx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.os-gradfx i { position: absolute; display: block; border-radius: 40%; filter: blur(120px); will-change: transform; animation: osDrift 20s infinite; }
.os-gradfx i:nth-child(1) { width: 90%; height: 55%; left: -30%; top: -12%; background: #09281B; transform-origin: 80% 70%; }
.os-gradfx i:nth-child(2) { width: 85%; height: 70%; right: -25%; top: 10%; background: #5FAE89; transform-origin: 20% 40%; animation-delay: -6s; }
.os-gradfx i:nth-child(3) { width: 60%; height: 45%; left: 15%; bottom: -10%; background: #A8EDC4; opacity: .75; transform-origin: 50% 0%; animation-delay: -12s; }
.os-gradfx i:nth-child(4) { width: 55%; height: 50%; left: -20%; bottom: 5%; background: #164832; transform-origin: 100% 20%; animation-delay: -3s; }
@keyframes osDrift {
  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); }
}
.os-card--grad .os-h3 { color: #F5F7F6; }
.os-card--grad .os-p { color: rgba(255, 255, 255, .72); }
.os-paused .os-gradfx i, .os-gradfx.os-paused i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .os-gradfx i { animation: none; } }

/* ---------------------------------------------------------------- UI fragments for mockups
   Dark app panels (radius 12-16) with tiny tracked labels, light numbers. */
.os-ui { position: relative; border-radius: 16px; 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); text-align: left; overflow: hidden; }
.os-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.os-ui-body { padding: 16px; }
.os-ui-num { font: 300 28px/1.1 var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.os-ui-num small { font-size: .55em; color: var(--os-fg-3); letter-spacing: 0; }
.os-ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); font: 400 14px/20px var(--os-sans); color: #FFFFFF; }
.os-ui-row + .os-ui-row { margin-top: 8px; }
.os-ui-row b { font-weight: 400; }
.os-ui-row span { color: var(--os-fg-2); font-weight: 300; }
.os-ui-up { color: var(--os-mint); } .os-ui-warm { color: #EFC876; } .os-ui-over { color: #DE826A; }
.os-glass-ui { border-radius: 16px; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.os-sheet { border-radius: 16px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); text-align: left; }

/* a feed of bets (Origin's transaction list: 77px rows, a 48px mark, name and
   time on the left, the amount on the right) */
.os-feed { display: flex; flex-direction: column; text-align: left; }
.os-feed-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 77px; padding: 0 18px 0 16px; border-radius: 16px; background: linear-gradient(180deg, #262927, #161817); box-shadow: 0 -1px 0 rgba(255, 255, 255, .03) inset; }
.os-feed-row + .os-feed-row { margin-top: 0; }
.os-feed-row img, .os-feed-ic { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.os-feed-row b { display: block; font: 400 16px/22px var(--os-sans); color: #FFFFFF; }
.os-feed-row small { display: block; margin-top: 2px; font: 300 14px/20px var(--os-sans); color: var(--os-fg-2); }
.os-feed-row em { font: 400 18px/24px var(--os-sans); font-style: normal; color: #FFFFFF; font-variant-numeric: tabular-nums; }
/* a week of days (Origin's 7-day strip: 125 x 201 tiles, 14 apart) */
.os-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.os-day { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 201px; padding: 20px 8px 22px; border-radius: 12px; background: linear-gradient(160deg, #262927, #121413); text-align: center; }
.os-day > span { font: 500 9px/14px var(--os-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--os-fg-2); }
.os-day > span b { display: block; margin-top: 2px; font: 400 13px/18px var(--os-sans); letter-spacing: 0; color: #FFFFFF; }
.os-day img { width: 34px; height: 34px; border-radius: 50%; }
.os-day > em { font: 400 15px/20px var(--os-sans); font-style: normal; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.os-day.on { box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .5), 0 0 30px -10px rgba(135, 204, 170, .5); }
.os-day.on > em { color: var(--os-mint); }
.os-day .none { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* bars inside a panel (by book, by sport) */
.os-bars { display: flex; flex-direction: column; gap: 18px; }
.os-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font: 400 14px/20px var(--os-sans); color: #FFFFFF; }
.os-bar-row span { color: var(--os-fg-2); font-weight: 300; font-variant-numeric: tabular-nums; }
.os-bar-row i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.os-bar-row i::before { content: ""; display: block; width: var(--v, 50%); height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3F936E, #87CCAA); }
@media (max-width: 767px) { .os-days { gap: 6px; } .os-day { height: 120px; padding: 10px 2px 12px; border-radius: 8px; } .os-day img, .os-day .none { width: 20px; height: 20px; } .os-day > em { font-size: 10px; } .os-day > span b { font-size: 11px; } .os-feed-row { height: 64px; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; } .os-feed-row img { width: 40px; height: 40px; } }

/* ---------------------------------------------------------------- Forest panel
   Origin's "Model your financial future" panel: radius 16, padding 100 / 5%,
   the colour rising out of the page black (0 -> 18% -> 37% -> 69%). Heading,
   text 24 below, a dark button 24 below, the visual 60 below. */
.os-panel { position: relative; isolation: isolate; overflow: hidden; padding: 100px 5%; border-radius: 16px; text-align: center; background: var(--os-rise); }
.os-panel-in { max-width: 1020px; margin: 0 auto; }
.os-panel .os-sub, .os-panel .os-p { margin: 24px auto 0; max-width: 420px; color: rgba(255, 255, 255, .72); }
.os-panel .os-btn, .os-panel .os-btns { margin-top: 24px; }
.os-panel-visual { margin-top: 60px; }
.os-panel .os-grid-2 { margin-top: 60px; text-align: left; }
.os-panel--vivid { background: linear-gradient(180deg, #13805A 0%, rgba(135, 204, 170, 0) 100%) #0C0E0D; }  /* Employers' "Built for every workforce" */
@media (max-width: 767px) { .os-panel { padding: 70px 24px; } }

/* the glowing card: Estate's assessment band (1376 x 500, radius 16, padding
   124 / 69) with a dark button whose border carries a light that circles it
   every 2.5s. .os-glow works on any button or card. */
.os-glowcard { position: relative; overflow: hidden; padding: 124px 69px; border-radius: 16px; text-align: center; background: var(--os-rise); }
.os-glowcard .os-h1 { max-width: 1240px; margin: 0 auto; }
.os-glowcard .os-glow { margin-top: 24px; }
.os-glow { position: relative; isolation: isolate; display: inline-flex; border-radius: 8px; vertical-align: top; }
.os-glow--card { display: block; border-radius: 16px; }
.os-glow-ring { position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.os-glow-ring i { position: absolute; left: 50%; top: 50%; width: max(250%, 420px); aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg, transparent 0deg, transparent 230deg, rgba(168, 237, 196, .35) 290deg, #F4FBF7 330deg, transparent 350deg); animation: osTurn 2.5s linear infinite; }
.os-glow-blur { position: absolute; inset: -2px; z-index: 0; border-radius: inherit; filter: blur(8px); opacity: .85; pointer-events: none; }
.os-glow-blur .os-glow-ring { padding: 3px; }
@keyframes osTurn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.os-paused .os-glow-ring i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .os-glow-ring i { animation: none; transform: translate(-50%, -50%) rotate(40deg); } }
@media (max-width: 767px) { .os-glowcard { padding: 70px 24px; } }

/* ---------------------------------------------------------------- steps
   Couples' three steps: text cards with a tracked label, a number in front. */
.os-steps .os-card--text { min-height: 193px; justify-content: flex-start; gap: 40px; }
.os-step-n { margin-right: 12px; color: var(--os-mint); }

/* ---------------------------------------------------------------- moments: the row that slides with the scroll
   Origin's photo row (Forecasting, Estate): 400 x 230 cards, radius 16, 16px
   apart, a centred label on each; the row moves left 500px as the section
   passes through the window (os.js), and never on its own. */
.os-moments { position: relative; overflow: hidden; width: 100%; }
.os-moments-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.os-moment { position: relative; flex: none; width: 400px; height: 230px; margin: 0; border-radius: 16px; overflow: hidden; background: #101211; }
.os-moment img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.os-moment figcaption { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; font: 300 16px/24px var(--os-sans); color: #FFFFFF; text-align: center; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.os-moments--fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(12, 14, 13, 0), #0C0E0D); pointer-events: none; }
.os-moments-rule { display: block; height: 1px; max-width: 1400px; margin: 0 auto 24px; background: var(--os-line-2); }
@media (max-width: 767px) { .os-moment { width: 300px; height: 170px; } }

/* ---------------------------------------------------------------- the sportsbook orbit
   Origin's bank orbit: a 700 x 700 field, the logos on a 253px circle,
   turning once every 30s, each logo turning back so it stays upright. Ours:
   the books Lessen connects to, as white marks in dark glass circles. */
.os-orbit-sec { padding: 100px 0; overflow: hidden; }
.os-orbit { position: relative; width: 700px; height: 700px; max-width: 100%; margin: 0 auto; --r: 253px; --d: 100px; }
.os-orbit-ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; animation: osSpin 30s linear infinite; }
.os-orbit-ring > li { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  transform: rotate(calc(360deg / var(--n, 6) * var(--i, 0))) translateY(calc(var(--r) * -1)) rotate(calc(-360deg / var(--n, 6) * var(--i, 0))); }
.os-orbit-logo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; animation: osSpin 30s linear infinite reverse;
  background: radial-gradient(circle at 32% 26%, #2E3431 0%, #171A18 62%, #101211 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 46px -14px rgba(63, 147, 110, .55), 0 0 40px -8px rgba(135, 204, 170, .22); }
.os-orbit-c { position: absolute; left: 50%; top: 50%; width: 360px; max-width: 70%; transform: translate(-50%, -50%); text-align: center; }
.os-orbit-c .os-p { margin-top: 24px; }
.os-orbit-c .os-tag { margin-top: 12px; }
@keyframes osSpin { to { transform: rotate(360deg); } }
.os-paused .os-orbit-ring, .os-paused .os-orbit-logo { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .os-orbit-ring, .os-orbit-logo { animation: none; } }
@media (max-width: 767px) {
  .os-orbit-sec { padding: 70px 0; }
  .os-orbit { width: 320px; height: 320px; --r: 160px; --d: 80px; }
  .os-orbit-c { width: 170px; }
  .os-orbit-c .os-h3 { font-size: 22px; line-height: 19.8px; }
  .os-orbit-c .os-p { margin-top: 12px; font-size: 13px; line-height: 16.9px; }
}
/* the sportsbook marks, white, from /assets/lr/wordmarks */
.os-bk { display: block; width: var(--bw); aspect-ratio: var(--ar); background: #FFFFFF; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.os-bk.fd { --m: url(/assets/lr/wordmarks/fanduel.svg); --ar: 4.645; --bw: 64%; }
.os-bk.dk { --m: url(/assets/lr/wordmarks/draftkings.svg); --ar: 1.973; --bw: 52%; }
.os-bk.mgm { --m: url(/assets/lr/wordmarks/betmgm.svg); --ar: 5.946; --bw: 66%; }
.os-bk.fan { --m: url(/assets/lr/wordmarks/fanatics.png); --ar: 4.675; --bw: 64%; }
.os-bk.br { --m: url(/assets/lr/wordmarks/betrivers.png); --ar: 4.896; --bw: 64%; }
.os-bk.kal { --m: url(/assets/lr/wordmarks/kalshi.svg); --ar: 3.416; --bw: 56%; }

/* the logo strip (Employers' row of white logos between two hairlines) */
.os-logos { padding: 100px 32px; border-top: 1px solid var(--os-line); border-bottom: 1px solid var(--os-line); text-align: center; }
.os-logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; margin: 100px auto 0; padding: 0; list-style: none; max-width: 1200px; }
.os-logos-row .os-bk { width: auto; height: 20px; background: #FFFFFF; }
.os-logos-row .os-bk.dk { height: 30px; margin: -5px 0; }
.os-logos-note { margin-top: 40px; }
@media (max-width: 767px) { .os-logos { padding: 70px 16px; } .os-logos-row { gap: 22px 32px; margin-top: 60px; } }

/* ---------------------------------------------------------------- FAQ
   Origin's panel: 4% white, radius 16, padding 60; the title left and the
   questions right (2 x 592, 16 apart); each question a 4% row, radius 8,
   padding 16, 14 apart. A click shows the answer at once and turns the +
   45 degrees over 500ms. Phones: one column, padding 26 / 20. */
.os-faq { padding: 60px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.os-faq-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.os-faq-in > .os-h3, .os-faq-in > .os-h4 { text-align: left; }
.os-faq-list { display: flex; flex-direction: column; gap: 14px; }
.os-faq-item { border-radius: 8px; background: rgba(255, 255, 255, .04); }
.os-faq-q { margin: 0; font: inherit; }
.os-faq-q button { position: relative; display: block; width: 100%; padding: 16px 56px 16px 16px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font: 400 16px/24px var(--os-sans); color: #FAFAFA; -webkit-tap-highlight-color: transparent; }
.os-plus { position: absolute; right: 16px; top: 20px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; transition: transform .5s ease-in; }
.os-faq-q button[aria-expanded="true"] .os-plus { transform: rotate(45deg); }
.os-faq-a { padding: 0 56px 16px 16px; margin-top: -6px; }
.os-faq-a p, .os-faq-a li { font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.os-faq-a p + p { margin-top: 10px; }
.os-faq-a a { color: #FFFFFF; text-underline-offset: 2px; }
.os-faq-a[hidden] { display: none; }
@media (max-width: 767px) {
  .os-faq { padding: 26px 20px; }
  .os-faq-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- the toggle (Estate's membership switch)
   A 34 x 14 track and a 20px white knob that springs 20px across. */
.os-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; cursor: pointer; color: #FFFFFF; font: 400 16px/24px var(--os-sans); -webkit-tap-highlight-color: transparent; }
.os-toggle-track { position: relative; flex: none; width: 34px; height: 14px; border-radius: 100px; background: rgba(255, 255, 255, .18); transition: background-color .3s cubic-bezier(.68, -.6, .32, 1.6), box-shadow .3s; }
.os-toggle-track i { position: absolute; left: -3px; top: -3px; width: 20px; height: 20px; border-radius: 100%; background: #FAFAFA; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.68, -.6, .32, 1.6); }
.os-toggle[aria-checked="true"] .os-toggle-track { background: rgba(135, 204, 170, .6); box-shadow: 0 0 14px rgba(168, 237, 196, .35); }
.os-toggle[aria-checked="true"] .os-toggle-track i { transform: translateX(20px); }
[data-os-state="off"] [data-when="on"], [data-os-state="on"] [data-when="off"] { display: none !important; }
/* a crossed-out list price */
.os-was { color: rgba(255, 255, 255, .38); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- filters, tabs and search (Resources)
   36px chips of 10% white, radius 8; a white 200px menu; the search field
   widens from 90 to 250px when it has focus (.3s). */
.os-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; }
.os-filter { position: relative; }
.os-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 10px 12px; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 500 12px/16px var(--os-sans); letter-spacing: .03em; text-transform: uppercase; color: #FFFFFF; background: rgba(255, 255, 255, .1); transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.os-chip:hover { background: rgba(255, 255, 255, .16); }
.os-chip[aria-pressed="true"] { color: #000000; background: #FFFFFF; }
.os-chip .pl { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; transition: transform .2s var(--os-io); }
.os-chip[aria-expanded="true"] .pl { transform: rotate(45deg); }
.os-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.os-filter-menu { position: absolute; z-index: 20; left: 50%; top: calc(100% + 10px); width: 200px; padding: 5px 0; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, .2); transform: translateX(-50%); }
.os-filter-menu[hidden] { display: none; }
.os-filter-menu button { display: block; width: 100%; padding: 6px 10px; border: 0; background: none; cursor: pointer; text-align: left; font: 500 12px/18px var(--os-sans); letter-spacing: .03em; text-transform: uppercase; color: #3A3D3B; }
.os-filter-menu button:hover, .os-filter-menu button:focus-visible { background: rgba(0, 0, 0, .06); color: #000000; outline: none; }
.os-filter-menu button[aria-selected="true"] { color: #000000; }
.os-search { position: relative; display: inline-flex; align-items: center; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .1); }
.os-search svg { position: absolute; left: 12px; top: 11px; width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.os-search input { width: 90px; height: 36px; padding: 0 12px 0 36px; border: 0; border-radius: 8px; background: transparent; color: #FFFFFF; outline: none;
  font: 500 12px/16px var(--os-sans); letter-spacing: .03em; transition: width .3s ease-in-out; -webkit-appearance: none; appearance: none; }
.os-search input::placeholder { color: #FFFFFF; opacity: 1; text-transform: uppercase; }
.os-search input:focus::placeholder { color: rgba(255, 255, 255, .45); }
.os-search input:focus, .os-search input:not(:placeholder-shown) { width: 250px; }
.os-search:focus-within { box-shadow: 0 0 0 2px var(--os-glow); }
.os-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.os-empty[hidden] { display: none; }
@media (max-width: 767px) { .os-filters { flex-direction: column; align-items: stretch; gap: 12px; } .os-filter .os-chip { width: 100%; justify-content: space-between; } .os-search input, .os-search input:focus { width: 100%; } .os-search { width: 100%; } }

/* ---------------------------------------------------------------- the comparison table (Estate)
   A 4% panel; each group a header row (chevron, tracked group name, column
   names on the right), rows 65 tall with an 18% hairline, check circles. */
.os-table { padding: 60px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.os-table-in { max-width: 1200px; margin: 0 auto; }
.os-table-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--cols-w, 396px); align-items: center; width: 100%; min-height: 50px; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); background: none; cursor: pointer; text-align: left; color: var(--os-fg-2);
  font: 500 12px/18px var(--os-sans); letter-spacing: .03em; text-transform: uppercase; }
.os-table-head > span:first-child { display: inline-flex; align-items: center; gap: 12px; }
.os-table-head .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--os-io); }
.os-table-head[aria-expanded="false"] .chev { transform: rotate(180deg); }
.os-table-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); text-align: center; }
.os-table-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--cols-w, 396px); align-items: center; min-height: 65px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.os-table-row b { display: block; font: 400 18px/27px var(--os-sans); color: #FFFFFF; }
.os-table-row small { display: block; margin-top: 2px; font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.os-table-row .os-table-cols span { display: grid; place-items: center; }
.os-check { width: 26px; height: 26px; fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.os-table-body[hidden] { display: none; }
@media (max-width: 767px) { .os-table { padding: 26px 20px; } .os-table-head, .os-table-row { --cols-w: calc(var(--cols, 3) * 52px); } .os-table-row b { font-size: 16px; line-height: 22px; } .os-check { width: 22px; height: 22px; } }

/* ---------------------------------------------------------------- laurels (the three Kene confirmed)
   Two white wreaths per badge, Origin's award row at 57px tall. */
.os-laurels { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: 24px 0 0; padding: 0; list-style: none; color: #FFFFFF; }
.os-lau { display: flex; align-items: center; gap: 4px; }
.os-lau .br { flex: none; width: 18px; height: 57px; background: currentColor; -webkit-mask: url(/assets/lr/os/laurel.svg) center / contain no-repeat; mask: url(/assets/lr/os/laurel.svg) center / contain no-repeat; }
.os-lau .br.r { transform: scaleX(-1); }
.os-lau .in { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 104px; text-align: center; }
.os-lau .top { height: 18px; display: flex; align-items: center; justify-content: center; }
.os-lau .top svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.os-lau .stars { font-size: 12px; letter-spacing: 2.4px; margin-right: -2.4px; }
.os-lau .ser { font-family: var(--os-serif); font-style: italic; font-size: 17px; line-height: 1; }
.os-lau .cap { font: 500 10px/1.35 var(--os-sans); letter-spacing: 1.6px; text-transform: uppercase; }
@media (max-width: 767px) { .os-laurels { flex-wrap: nowrap; gap: 4px; } .os-lau { gap: 2px; } .os-lau .br { width: 12px; height: 42px; } .os-lau .in { min-width: 0; width: 84px; gap: 3px; } .os-lau .top { height: 14px; } .os-lau .top svg { width: 13px; height: 13px; } .os-lau .ser { font-size: 13px; } .os-lau .stars { font-size: 9px; letter-spacing: 1.6px; } .os-lau .cap { font-size: 7.5px; letter-spacing: .9px; } }

/* ---------------------------------------------------------------- the phone (a real Lessen screen, in HTML)
   The screen's sizes are in em of the phone: 1em = 1/30 of its width, so
   one class makes it any size (--w). The shell itself is .lr-phone (phone.css). */
.os-phone { --w: 300px; font-size: calc(var(--w) / 30); }
/* the shell (band, bezel, island, buttons, glass) is .lr-phone in phone.css; this is only the screen */
.os-phone-scr { color: #E9F3EE; background: radial-gradient(ellipse 120% 55% at 50% 0%, #0E3A2A 0%, #04130D 45%, #000 78%); }
.os-phone-sb { position: absolute; top: 0; left: 0; right: 0; height: 4.4em; display: flex; justify-content: space-between; align-items: center; padding: 0 2.6em; font-size: 1.2em; font-weight: 600; color: #fff; }
.os-phone-sb i { width: 1.85em; height: .85em; border-radius: .25em; border: .11em solid rgba(255, 255, 255, .8); position: relative; }
.os-phone-sb i::after { content: ""; position: absolute; inset: .12em .33em .12em .12em; background: #fff; border-radius: .08em; }
.os-home { position: absolute; inset: 5em 1.6em 1.4em; display: flex; flex-direction: column; }
.os-home .trust { display: flex; align-items: center; gap: .6em; font-size: 1.05em; color: #A7B0AB; }
.os-home .trust b { width: .6em; height: .6em; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 .6em rgba(135, 204, 170, .8); }
.os-home .ring { position: relative; width: 16.8em; height: 16.8em; margin: 2em auto 0; }
.os-home .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.os-home .ring circle { fill: none; stroke-width: 10; }
.os-home .ring .trk { stroke: rgba(233, 243, 238, .07); }
.os-home .ring .arc { stroke: #A8EDC4; stroke-linecap: round; stroke-dasharray: 75.3 100; filter: drop-shadow(0 0 6px rgba(135, 204, 170, .55)); }
.os-home .ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.os-home .ring b { font-weight: 300; font-size: 4em; letter-spacing: -.05em; line-height: 1; color: #fff; }
.os-home .ring small { margin-top: .55em; font-size: 1.1em; color: #A7B0AB; }
.os-home .days { margin-top: 1.2em; text-align: center; font-size: 1.15em; color: #A7B0AB; }
.os-home .steps { margin-top: 1em; display: grid; grid-template-columns: repeat(7, 1fr); gap: .5em; align-items: end; height: 4.2em; }
.os-home .steps span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .5em; height: 100%; font-size: .85em; color: #8C9590; }
.os-home .steps i { display: block; width: 100%; height: .35em; border-radius: .35em; background: rgba(233, 243, 238, .12); }
.os-home .steps .d1 i { height: 3em; border-radius: .7em; background: linear-gradient(180deg, #A8EDC4, #3F936E); box-shadow: 0 0 1em rgba(135, 204, 170, .35); }
.os-home .steps .d2 i { height: .7em; background: linear-gradient(180deg, #A8EDC4, #87CCAA); }
.os-home .tonight { margin-top: 1.4em; padding: 1.2em 1.3em 1.3em; border-radius: 1.8em; background: linear-gradient(180deg, rgba(233, 243, 238, .08), rgba(233, 243, 238, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(233, 243, 238, .05); }
.os-home .tonight span { display: block; font-size: .95em; color: #8C9590; }
.os-home .tonight b { display: block; margin-top: .3em; font-weight: 400; font-size: 1.35em; line-height: 1.3; letter-spacing: -.015em; color: #fff; }
.os-home .tonight em { display: inline-flex; margin-top: 1em; padding: .7em 1.2em; border-radius: 99em; font-style: normal; font-size: 1.05em; color: #0C0E0D; background: linear-gradient(180deg, #fff, #E4ECE8); }
.os-home .status { margin-top: 1.2em; display: flex; align-items: center; gap: .6em; font-size: 1.05em; color: #fff; }
.os-home .status i { width: .6em; height: .6em; border-radius: 50%; background: #E9F3EE; box-shadow: 0 0 .6em rgba(233, 243, 238, .7); }
.os-home .status span { color: #8C9590; }
.os-home .tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: .6em .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), inset 0 0 0 1px rgba(233, 243, 238, .06); }
.os-home .tabbar span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .8em; color: #8C9590; }
.os-home .tabbar svg { width: 3.75em; height: 3.25em; padding: .5em .9em; border-radius: 1.6em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.os-home .tabbar .on { color: #fff; }
.os-home .tabbar .on svg { background: rgba(233, 243, 238, .14); }
/* the app's tab bar, small (the tilted phones on Saving and Employers) */
.os-tabs { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: .7em .4em .6em; 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), inset 0 0 0 1px rgba(233, 243, 238, .06); }
.os-tabs span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .8em; color: #8C9590; }
.os-tabs svg { width: 3.6em; height: 2.8em; padding: .45em .95em; border-radius: 1.6em; box-sizing: border-box; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.os-tabs .on { color: #FFFFFF; }
.os-tabs .on svg { background: rgba(233, 243, 238, .14); }

/* ---------------------------------------------------------------- Download Lessen
   Origin's closing band: full bleed, 1008 tall at 1440 (844 on phones), the
   art fading into the page, the title 17vh from the top, Get started 24
   below, the laurels, then a phone rising from the bottom edge, cut off by
   it and fading into the page. */
.os-download { position: relative; isolation: isolate; overflow: hidden; min-height: 1008px; padding: 17vh 100px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.os-download-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 980px; }
.os-download .os-btn { margin-top: 24px; }
.os-download .os-laurels { margin-top: 23px; }
.os-download-stores { margin-top: 18px; font: 300 12px/16.92px var(--os-sans); color: var(--os-fg-2); }
.os-download-tag { margin-top: 8px; line-height: 16px; }
.os-download-stores a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.os-download-phone { position: relative; z-index: 1; width: 432px; height: 552px; margin-top: auto; padding-top: 4px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; flex: none; }
.os-download-phone .os-phone { --w: 420px; flex: none; }
.os-download-phone::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; height: 80%; background: linear-gradient(180deg, rgba(12, 14, 13, 0), #0C0E0D 96%); pointer-events: none; }
.os-download .os-art::after { background: linear-gradient(180deg, rgba(12, 14, 13, 0) 30%, #0C0E0D 100%); }
@media (max-width: 767px) {
  .os-download { min-height: 844px; padding: 143px 24px 0; }
  .os-download-phone { width: 246px; height: 314px; padding-top: 3px; }
  .os-download-phone .os-phone { --w: 240px; }
}

/* ---------------------------------------------------------------- the gallery (/system) only */
.os-sys-label { max-width: 1400px; margin: 0 auto; padding: 32px 32px 0; }
.os-sys-label p { display: inline-flex; gap: 10px; font: 500 11px/16px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-mint); }
.os-sys-label code { font: 400 11px/16px ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; color: var(--os-fg-3); }

/* Orbit badges in each book's own colour, like Origin's bank badges (lead review, Oct 21, 2026):
   a solid brand-colour disc, the white wordmark large inside it, a soft glow in the same colour. */
.os-orbit-logo:has(> .os-bk) { background: var(--bc, #1A1D1B); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 22px rgba(0, 0, 0, .18), 0 18px 40px -16px var(--bg, rgba(0, 0, 0, .6)), 0 0 46px -10px var(--bg, transparent); }
.os-orbit-logo:has(> .fd) { --bc: #1493FF; --bg: rgba(20, 147, 255, .55); }
.os-orbit-logo:has(> .dk) { --bc: #53A318; --bg: rgba(83, 163, 24, .55); }
.os-orbit-logo:has(> .mgm) { --bc: #1A1A1A; --bg: rgba(196, 162, 102, .5); }
.os-orbit-logo:has(> .mgm) .os-bk { background: #D9B979; }
.os-orbit-logo:has(> .fan) { --bc: #E10F2F; --bg: rgba(225, 15, 47, .5); }
.os-orbit-logo:has(> .br) { --bc: #12305C; --bg: rgba(40, 92, 170, .55); }
.os-orbit-logo:has(> .kal) { --bc: #00B37A; --bg: rgba(0, 179, 122, .55); }
.os-orbit-logo > .os-bk.fd, .os-orbit-logo > .os-bk.fan, .os-orbit-logo > .os-bk.br { --bw: 76%; }
.os-orbit-logo > .os-bk.mgm { --bw: 74%; }
.os-orbit-logo > .os-bk.dk { --bw: 62%; }
.os-orbit-logo > .os-bk.kal { --bw: 66%; }

/* The weekly number as a dial (Kene, Oct 28, 2026). One half-circle arc
   for the room left, the same on every page and on the homepage's weekly
   card: the arc shortens as the week is bet, its colour runs ember to mint
   so a nearly spent week shows only the warm end, and a lit dot sits at its
   tip. Goals and totals use the mint-only arc. The markup is written by
   build-time pages with the value already in place. */
.os-home .ring.dial, .hw .hw-ring.dial { height: auto; }
.os-home .ring.dial svg, .hw .hw-ring.dial svg { display: block; width: 100%; height: auto; transform: none; overflow: visible; }
.os-home .ring.dial .trk, .hw .hw-ring.dial .trk { fill: none; stroke: rgba(233, 243, 238, .08); stroke-width: 9; stroke-linecap: round; }
.os-home .ring.dial .arc, .hw .hw-ring.dial .arc { fill: none; stroke: url(#lrDialG); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(135, 204, 170, .35)); }
.os-home .ring.dial.mint .arc, .hw .hw-ring.dial.mint .arc { stroke: url(#lrDialM); }
.os-home .ring.dial .pin, .hw .hw-ring.dial .pin { fill: #E9F3EE; stroke: none; filter: drop-shadow(0 0 6px rgba(168, 237, 196, .9)); }
.os-home .ring.dial > div, .hw .hw-ring.dial > div { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.os-home .ring.dial > div small, .hw .hw-ring.dial > div small { margin-top: .45em; }
.hw .hw-ring.dial { width: 230px; margin-bottom: 14px; }
.os-home .ring.dial > div b { font-size: 3.2em; }