/* Lessen website: the shared chrome for every page (Kene, Oct 20-21, 2026).
 *
 * Colors, type and materials come from the Light Room brand bible
 * (~/Downloads/Lessen Brand Bible Newest.html). The menu and the footer
 * follow Origin's measured geometry and behaviour (study of Oct 21, 2026,
 * ~/Downloads/Lessen Website 2026-10-21 (Origin study)/A - nav and products/
 * nav/breakdown.md and footer/breakdown.md), with Lessen's logo, labels and
 * fonts substituted. Dark product pages use /assets/lr/os.css on top of this
 * file (docs/OS-SYSTEM.md).
 *
 * The menu has two themes. Dark (Origin's own: a near-clear frosted strip,
 * white labels, a white Get started) over dark bands and on every os page;
 * light (frosted white, ink labels, Money green Get started) over white
 * bands. chrome.js picks the theme from the band under the bar.
 */
:root {
  --white: #FFFFFF;
  --mist: #F0F5F2;          /* panels on white */
  --ink: #0C0E0D;           /* text, black buttons */
  --stone: #656A67;         /* second text */
  --grey: #8E9591;          /* greyed-out headline words */
  --money: #107550;         /* green words, main button, on track */
  --money-hi: #2C8E66;
  --money-lo: #00603F;
  --forest: #3F936E;
  --mint: #87CCAA;
  --glow: #A8EDC4;
  --pearl: #E9F3EE;
  --night: #000000;
  --amber: #A97416;         /* close to your weekly number (Day) */
  --ember: #A64736;         /* over your weekly number (Day) */

  --ink-a: rgba(12, 14, 13, .08);        /* hairlines */
  --ink-b: rgba(12, 14, 13, .14);
  --money-a: rgba(16, 117, 80, .08);
  --money-b: rgba(16, 117, 80, .16);

  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;

  --wrap: 1200px;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  --section: clamp(88px, 10vw, 148px);
  /* The menu: a 56px bar floating 24px from the top (16px on phones). */
  --nav-h: 80px;
  --nav-ease: cubic-bezier(.455, .03, .515, .955);   /* Origin's ease-in-out-quad */

  /* Light comes from the top left, the same on every surface. */
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 50px -30px rgba(12, 14, 13, .28);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(12, 14, 13, .05), 0 30px 70px -36px rgba(12, 14, 13, .35), 0 8px 18px -12px rgba(12, 14, 13, .12);
  --ease: cubic-bezier(.3, .7, .2, 1);
  color-scheme: light;
}
@media (max-width: 479px) { :root { --nav-h: 72px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--white); scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.lr { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.lr) :is(h1, h2, h3, h4, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.lr) a { color: inherit; }
:where(.lr) img, :where(.lr) svg { max-width: 100%; }
.lr :focus-visible { outline: 2px solid var(--money); outline-offset: 3px; border-radius: 10px; }
.lr-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; }
.lr-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.lr-skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 14px; }
.lr-skip:focus { top: 12px; }
.lr-num { font-variant-numeric: tabular-nums; }
.lr-cents { color: #A5ABA8; }
.lr-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #8C918E; letter-spacing: 0; }
.lr-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }

/* ---------------------------------------------------------------- type */
.lr-kicker { font-size: 14px; font-weight: 500; color: var(--money); letter-spacing: -.005em; margin-bottom: 18px; }
.lr-h2 { font-weight: 300; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -.05em; color: var(--ink); text-wrap: balance; }
.lr-h2 .g { color: var(--grey); }
.lr-h2 .m { color: var(--money); }
.lr-h3 { font-weight: 400; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -.025em; color: var(--ink); }
.lr-body { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--stone); letter-spacing: -.008em; max-width: 46ch; }
.lr-small { font-size: 14px; line-height: 1.5; color: var(--stone); }
.lr-sig { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- buttons (Light Room pages) */
.lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0; font: 500 16px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .25s; -webkit-tap-highlight-color: transparent; }
.lr-btn:active { transform: scale(.98); }
.lr-btn-green { color: #fff; background: linear-gradient(180deg, var(--money-hi) 0%, var(--money) 55%, var(--money-lo) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 12px 26px -10px rgba(16, 117, 80, .6), 0 0 0 1px rgba(0, 96, 63, .35); }
.lr-btn-black { color: #fff; background: linear-gradient(180deg, #2A2D2C, var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 24px -12px rgba(12, 14, 13, .55); }
.lr-btn-quiet { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-b); }
@media (hover: hover) {
  .lr-btn-green:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 16px 32px -10px rgba(16, 117, 80, .7), 0 0 0 1px rgba(0, 96, 63, .4); }
  .lr-btn-black:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 30px -12px rgba(12, 14, 13, .6); }
  .lr-btn-quiet:hover { box-shadow: inset 0 0 0 1px rgba(12, 14, 13, .3); }
}
.lr-btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.lr-link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(12, 14, 13, .25); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.lr-link:hover { text-decoration-color: var(--ink); }
/* A slow band of light crosses a Light Room button on hover; press settles it. */
.lr-btn { position: relative; overflow: hidden; isolation: isolate; }
.lr-btn::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg) translateX(0); opacity: 0; }
.lr-btn:hover::after { animation: lrShine .95s var(--ease) both; }
@keyframes lrShine { from { opacity: 1; transform: skewX(-18deg) translateX(0); } to { opacity: 1; transform: skewX(-18deg) translateX(420%); } }
.lr-btn:hover { transform: translateY(-1.5px); }
.lr-btn:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
.lr-btn-green:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 16px 30px -12px rgba(16, 117, 80, .75), 0 0 0 1px rgba(0, 86, 56, .3); }
.lr-btn-white:hover { box-shadow: inset 0 1px 0 #fff, 0 18px 40px -14px rgba(168, 237, 196, .75), 0 0 0 1px rgba(255, 255, 255, .5); }
.lr-btn-glass:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 34px -16px rgba(0, 0, 0, .6); }
.lr-btn-glass::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); }
.lr-btn-black::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent); }

/* ================================================================ the menu
   Origin's bar (measured at 1440): fixed 24px from the top and sides, 1392 x
   56, radius 12, a 6% tint and a 24px blur, the same at every scroll
   position. Logo left in a 135px block; three 34px pills (8px gap) centred
   in the space that is left; Log in as plain text and a white 48px Get
   started with an arrow, 4px inside the bar's right edge. */
.lr-nav {
  --n-bar: rgba(255, 255, 255, .62);
  --n-bar-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(12, 14, 13, .05), 0 12px 30px -20px rgba(12, 14, 13, .3);
  --n-fg: #0C0E0D;
  --n-pill: rgba(12, 14, 13, .04);
  --n-pill-hi: rgba(12, 14, 13, .09);
  --n-cta: #107550; --n-cta-hi: #2C8E66; --n-cta-fg: #FFFFFF;
  --n-s1: #0C0E0D; --n-s2: #0C0E0D; --n-s3: #107550;
  --n-focus: #107550;
  --n-panel-shadow: 0 0 0 1px rgba(12, 14, 13, .07), 0 24px 50px -20px rgba(12, 14, 13, .35);
  position: sticky; top: 0; z-index: 60; height: var(--nav-h); padding: 24px 24px 0; pointer-events: none;
}
.lr-nav.dark, body.os .lr-nav:not(.light) {
  --n-bar: rgba(12, 14, 13, .06);
  --n-bar-shadow: 0 0 0 0 transparent;
  --n-fg: #FFFFFF;
  --n-pill: rgba(255, 255, 255, .04);
  --n-pill-hi: rgba(255, 255, 255, .16);
  --n-cta: #FFFFFF; --n-cta-hi: rgba(255, 255, 255, .86); --n-cta-fg: #000000;
  --n-s1: #FFFFFF; --n-s2: #E9F3EE; --n-s3: #87CCAA;
  --n-focus: #A8EDC4;
  --n-panel-shadow: 0 0 0 0 transparent;
}
/* On the dark product pages the bar is fixed, as Origin's is, and takes no
   room: the first section starts at the very top, under the bar. */
body.os .lr-nav { position: fixed; left: 0; right: 0; top: 0; }

.lr-nav-bar { pointer-events: auto; position: relative; display: flex; align-items: center; height: 56px; padding: 4px 4px 4px 24px; border-radius: 12px;
  background: var(--n-bar); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--n-bar-shadow);
  transition: background-color .45s, box-shadow .45s; }
.lr-nav :focus-visible { outline: 2px solid var(--n-focus); outline-offset: 2px; border-radius: 8px; }
.lr-nav .lr-sheet :focus-visible, .lr-nav .lr-dd-panel :focus-visible { outline-color: #107550; }

/* the logo: the floating stair, flat, straight on. White, pearl, mint on
   dark; ink, ink, Money green on white. Origin's mark is 20 x 22; the stair
   is wider than it is tall, so it is 28 x 22. */
.lr-logo { flex: none; display: flex; align-items: center; width: 135px; height: 48px; text-decoration: none; }
.lr-logo svg { display: block; width: 28px; height: 22px; }
.lr-logo .s1, .lr-logo .s2, .lr-logo .s3 { transition: fill .45s; }
.lr-logo .s1 { fill: var(--n-s1); } .lr-logo .s2 { fill: var(--n-s2); } .lr-logo .s3 { fill: var(--n-s3); }

/* the pills */
.lr-links { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; margin-left: 32px; }
.lr-chip, .lr-login { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 8px 12px; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
  font: 400 12px/18px var(--sans); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; color: var(--n-fg);
  background: var(--n-pill); -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--nav-ease), color .45s; }
.lr-chip:hover, .lr-chip[aria-expanded="true"], .lr-chip[aria-current="page"], .lr-dd.current > .lr-chip { background: var(--n-pill-hi); }
/* (Oct 25, 2026) five links since How it works joined the bar: a little tighter on narrow desktops so it never touches Log in */
@media (min-width: 992px) and (max-width: 1139px) { .lr-links { gap: 4px; margin-left: 16px; } .lr-chip { padding-left: 9px; padding-right: 9px; } }
.lr-dd-btn { padding-right: 32px; font-weight: 500; letter-spacing: .01em; }
.lr-login { letter-spacing: .1em; }
.lr-dd-btn .pl, .lr-sheet-dd .pl { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; transition: transform .2s var(--nav-ease); }
.lr-dd-btn .pl { position: absolute; right: 10px; top: 50%; margin-top: -8px; }
.lr-dd-btn[aria-expanded="true"] .pl, .lr-sheet-dd[aria-expanded="true"] .pl { transform: rotate(45deg); }

/* the Products panel: white, 150px, 4px padding, 8px under the pill,
   centred on it; it fades in and out over .3s and never slides. */
.lr-dd { position: relative; }
.lr-dd-panel { position: absolute; z-index: 2; top: 100%; left: 50%; margin-top: 8px; transform: translateX(-50%); min-width: 150px; padding: 4px; border-radius: 12px;
  background: #FFFFFF; box-shadow: var(--n-panel-shadow); opacity: 0; transition: opacity .3s ease-in-out; }
.lr-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }  /* keeps the hover across the 8px gap */
.lr-dd-panel.open { opacity: 1; }
.lr-dd-panel a { display: block; padding: 7px 15px; border-radius: 6px; white-space: nowrap; text-decoration: none; color: #000000;
  font: 500 12px/24px var(--sans); letter-spacing: .03em; text-transform: uppercase; transition: background-color .2s var(--nav-ease); }
.lr-dd-panel a:hover { background: rgba(0, 0, 0, .08); }
.lr-dd-panel a[aria-current="page"] { background: rgba(0, 0, 0, .06); }

/* Log in and Get started */
.lr-nav-right { flex: none; display: flex; align-items: center; gap: 10px; }
.lr-login { background: transparent; }
.lr-start { display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 12px 18px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  font: 500 12px/24px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--n-cta-fg); background: var(--n-cta);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .45s; }
.lr-start:hover { background: var(--n-cta-hi); }
.lr-start svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* the phone menu button: three 20 x 2 bars, 4px apart, that turn into an X */
.lr-menu { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--n-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lr-burger { position: relative; display: block; width: 20px; height: 14px; }
.lr-burger i { position: absolute; left: 0; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transform-origin: 0 50%; transition: opacity .3s, transform .3s ease-in-out, background-color .45s; }
.lr-burger i:nth-child(1) { top: 0; } .lr-burger i:nth-child(2) { top: 6px; } .lr-burger i:nth-child(3) { top: 12px; }
.lr-menu[aria-expanded="true"] .lr-burger i:nth-child(1) { transform: translate(3px, -1px) rotate(45deg); }
.lr-menu[aria-expanded="true"] .lr-burger i:nth-child(2) { opacity: 0; }
.lr-menu[aria-expanded="true"] .lr-burger i:nth-child(3) { transform: translate(3px, 1px) rotate(-45deg); }

/* the phone sheet: white, the bar's width, hanging straight under it, the
   labels centred; Products opens in place and its + turns into an x. */
.lr-sheet { position: absolute; z-index: 3; top: 100%; left: 0; right: 0; padding: 16px 27px; border-radius: 12px; background: #FFFFFF; box-shadow: var(--n-panel-shadow);
  max-height: calc(100vh - var(--nav-h) - 16px); max-height: calc(100svh - var(--nav-h) - 16px); overflow: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .3s ease-in-out; }
.lr-sheet.open { opacity: 1; }
.lr-sheet nav { display: flex; flex-direction: column; align-items: center; gap: 0; }
.lr-sheet nav > a, .lr-sheet-dd { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 500 12px/18px var(--sans); letter-spacing: .03em; text-transform: uppercase; color: #000000; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--nav-ease); }
.lr-sheet-list { width: 150px; padding: 4px; border-radius: 12px; background: #FFFFFF; }
.lr-sheet-list a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 15px; border-radius: 6px; text-decoration: none; color: #000000; text-align: center;
  font: 500 12px/24px var(--sans); letter-spacing: .03em; text-transform: uppercase; transition: background-color .2s var(--nav-ease); }
.lr-sheet-list a[aria-current="page"], .lr-sheet nav > a[aria-current="page"] { background: rgba(0, 0, 0, .06); }
@media (hover: hover) { .lr-sheet nav > a:hover, .lr-sheet-dd:hover, .lr-sheet-list a:hover { background: rgba(0, 0, 0, .08); } }
.lr-sheet[hidden], .lr-dd-panel[hidden], .lr-sheet-list[hidden] { display: none !important; }

/* Origin's breakpoints: the phone menu from 991px down; from 479px down the
   bar sits 16px from the edges and the menu button moves next to the logo. */
@media (max-width: 991px) {
  .lr-links, .lr-login { display: none; }
  .lr-menu { display: inline-flex; order: 3; margin-left: auto; }
  .lr-nav-right { order: 4; margin-left: 6px; }
  .lr-nav-bar { padding: 4px 4px 4px 24px; }
  .lr-logo { width: auto; }
}
@media (min-width: 992px) { .lr-sheet { display: none !important; } }
@media (max-width: 479px) {
  .lr-nav { padding: 16px 16px 0; }
  .lr-nav-bar { padding: 4px; }
  .lr-logo { padding: 0 10px; }
  .lr-menu { order: 2; margin-left: -7px; }
  .lr-nav-right { order: 4; margin-left: auto; }
}

/* ================================================================ the footer
   Origin's footer (measured at 1440): 32px padding, a 1400px wrapper, one
   row of blocks 60px apart (the newsletter 400px, link columns 100px, the
   app block taking the rest), the wordmark, a 14% divider, then the legal
   lines. 12px type: titles in full colour, links at 60%, hover to full over
   .2s. The tokens below give three grounds: white pages (default), dark
   product pages, and the homepage's Forest band. */
footer.lr-foot {
  --f-fg: #0C0E0D; --f-2: #656A67; --f-3: rgba(12, 14, 13, .55); --f-line: rgba(12, 14, 13, .1);
  --f-field: #F0F5F2; --f-field-edge: inset 0 0 0 1px rgba(12, 14, 13, .07); --f-field-fg: #0C0E0D; --f-ph: #8C918E;
  --f-sub: rgba(12, 14, 13, .07); --f-sub-hi: rgba(12, 14, 13, .12);
  --f-pill: #F0F5F2; --f-pill-hi: #E5EEE9; --f-pill-edge: inset 0 0 0 1px rgba(12, 14, 13, .06);
  --f-cta: #107550; --f-cta-fg: #FFFFFF; --f-cta-hi: #2C8E66;
  --f-ok: #107550; --f-err: #A64736; --f-focus: #107550;
  --f-s1: #0C0E0D; --f-s2: #0C0E0D; --f-s3: #107550;
  position: relative; margin: 0; padding: 48px 32px 0; border-top: 1px solid var(--f-line); background: transparent; color: var(--f-fg); font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
body.os footer.lr-foot, .lr-forest-end footer.lr-foot, .os-dark footer.lr-foot, footer.lr-foot.on-dark {
  --f-fg: #FFFFFF; --f-2: rgba(255, 255, 255, .6); --f-3: rgba(255, 255, 255, .5); --f-line: rgba(255, 255, 255, .14);
  --f-field: linear-gradient(180deg, #222523, #131514); --f-field-edge: 0 0 0 0 transparent; --f-field-fg: #FAFAFA; --f-ph: rgba(255, 255, 255, .45);
  --f-sub: rgba(255, 255, 255, .1); --f-sub-hi: rgba(255, 255, 255, .18);
  --f-pill: linear-gradient(180deg, #222523, #131514); --f-pill-hi: linear-gradient(180deg, #2A2E2B, #181A19); --f-pill-edge: 0 0 0 0 transparent;
  --f-cta: #FFFFFF; --f-cta-fg: #000000; --f-cta-hi: rgba(255, 255, 255, .86);
  --f-ok: #A8EDC4; --f-err: #DE826A; --f-focus: #A8EDC4;
  --f-s1: #FFFFFF; --f-s2: #E9F3EE; --f-s3: #87CCAA;
  padding-top: 32px; border-top: 0;
}
.lr-forest-end footer.lr-foot { --f-field: linear-gradient(180deg, rgba(7, 32, 21, .55), rgba(4, 22, 14, .62)); --f-pill: linear-gradient(180deg, rgba(7, 32, 21, .5), rgba(4, 22, 14, .58)); --f-pill-hi: linear-gradient(180deg, rgba(7, 32, 21, .7), rgba(4, 22, 14, .75)); }
footer.lr-foot :focus-visible { outline: 2px solid var(--f-focus); outline-offset: 3px; border-radius: 6px; }
footer.lr-foot a { color: inherit; }
footer.lr-foot p, footer.lr-foot ul, footer.lr-foot h2 { margin: 0; }
.lr-foot-in { max-width: 1400px; margin: 0 auto; padding-bottom: 24px; }
.lr-foot-top { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 60px; }
footer.lr-foot .lr-foot-t { font: 400 12px/16.92px var(--sans); letter-spacing: 0; color: var(--f-fg); text-transform: none; }

/* the list: Origin's "The Gist" block */
footer.lr-foot .lr-news { flex: 1 1 300px; max-width: 400px; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; scroll-margin-top: calc(var(--nav-h) + 24px); }
footer.lr-foot .lr-news-copy p { margin-top: 12px; max-width: none; font: 400 12px/16.92px var(--sans); color: var(--f-2); }
footer.lr-foot .lr-news-form { display: block; margin-top: 12px; }
.lr-news-field { position: relative; display: flex; align-items: center; height: 52px; border-radius: 8px; background: var(--f-field); box-shadow: var(--f-field-edge); transition: box-shadow .2s; }
.lr-news-field:focus-within { box-shadow: var(--f-field-edge), 0 0 0 1px var(--f-focus); }
footer.lr-foot .lr-news-form input { flex: 1; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0 12px 0 22px; border: 0; border-radius: 8px 0 0 8px; background: transparent; box-shadow: none; outline: none;
  font: 300 14px/20px var(--sans); color: var(--f-field-fg); }
footer.lr-foot .lr-news-form input::placeholder { color: var(--f-ph); opacity: 1; }
footer.lr-foot .lr-news-form input:focus { box-shadow: none; outline: none; }
footer.lr-foot .lr-news-form button { flex: none; height: 40px; min-height: 0; margin: 0 6px 0 0; padding: 0 14px; border: 0; border-radius: 6px; cursor: pointer; transform: none;
  font: 500 12px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--f-fg); background: var(--f-sub); box-shadow: none; transition: background-color .2s; }
footer.lr-foot .lr-news-form button:hover { background: var(--f-sub-hi); transform: none; box-shadow: none; }
footer.lr-foot .lr-news-form button[disabled] { opacity: .6; cursor: default; }
footer.lr-foot .lr-news-fine { margin-top: 12px; font: 400 11px/15.5px var(--sans); color: var(--f-2); }
footer.lr-foot .lr-news-fine a { color: var(--f-fg); text-decoration: underline; text-decoration-color: var(--f-line); text-underline-offset: 2px; }
footer.lr-foot .lr-news-status { margin-top: 10px; font: 400 12px/16.92px var(--sans); color: var(--f-ok); }
footer.lr-foot .lr-news-status:empty { display: none; }
footer.lr-foot .lr-news-status.err { color: var(--f-err); }

/* the link columns */
.lr-foot-cols { display: flex; gap: 60px; }
.lr-foot-col { min-width: 100px; }
footer.lr-foot .lr-foot-col ul { list-style: none; padding: 0; }
footer.lr-foot .lr-foot-col a { display: block; font: 400 12px/24px var(--sans); color: var(--f-2); text-decoration: none; white-space: nowrap; transition: color .2s var(--nav-ease); }
footer.lr-foot .lr-foot-col a:hover, footer.lr-foot .lr-foot-col a[aria-current="page"] { color: var(--f-fg); }

/* the account block: Origin's "Download the app" column */
.lr-foot-app { flex: 1 1 260px; min-width: 0; }
footer.lr-foot .lr-foot-note { margin-top: 12px; max-width: 300px; font: 400 12px/16.92px var(--sans); color: var(--f-2); }
.lr-foot-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 17px; }
.lr-foot-btn, .lr-foot-login { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  font: 500 12px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
footer.lr-foot .lr-foot-btn { color: var(--f-cta-fg); background: var(--f-cta); }
footer.lr-foot .lr-foot-btn:hover { background: var(--f-cta-hi); }
footer.lr-foot .lr-foot-login { color: var(--f-fg); background: var(--f-pill); box-shadow: var(--f-pill-edge); }
footer.lr-foot .lr-foot-login:hover { background: var(--f-pill-hi); }
.lr-foot-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* the wordmark, the divider and the legal lines */
.lr-foot-mark { display: inline-flex; align-items: center; gap: 9px; margin-top: 64px; text-decoration: none; color: var(--f-fg); }
.lr-foot-mark svg { display: block; width: 31px; height: 24px; }
.lr-foot-mark .s1 { fill: var(--f-s1); } .lr-foot-mark .s2 { fill: var(--f-s2); } .lr-foot-mark .s3 { fill: var(--f-s3); }
.lr-foot-mark .wm { font: 400 25px/1 var(--sans); letter-spacing: -.04em; color: var(--f-fg); }
.lr-foot-mark .wm .n { color: var(--f-s3); }
.lr-foot-legal { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--f-line); }
footer.lr-foot .lr-foot-legal p { margin-top: 13.5px; max-width: none; font: 500 10px/13.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--f-3); }
footer.lr-foot .lr-foot-legal p.lr-foot-help { margin: 0 0 4px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 400 12px/18px var(--sans); letter-spacing: 0; text-transform: none; color: var(--f-2); }
footer.lr-foot .lr-foot-help a { color: var(--f-fg); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--f-line); text-underline-offset: 2px; }
footer.lr-foot .lr-foot-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font: 500 10px/13.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--f-3); }

@media (max-width: 1100px) { .lr-foot-cols { gap: 40px; } .lr-foot-top { gap: 48px; } }
@media (max-width: 991px) { .lr-foot-app { flex-basis: 100%; } }
/* phones: one 358px column, as Origin's does */
@media (max-width: 767px) {
  footer.lr-foot, body.os footer.lr-foot, .lr-forest-end footer.lr-foot { padding-left: 16px; padding-right: 16px; }
  .lr-foot-top { flex-direction: column; gap: 30px; }
  footer.lr-foot .lr-news { flex: none; width: 100%; max-width: none; }
  .lr-foot-cols { flex-direction: column; gap: 30px; }
  .lr-foot-mark { margin-top: 48px; }
}
@media (pointer: coarse) { footer.lr-foot .lr-foot-col a { display: inline-block; padding: 10px 0; line-height: 24px; } footer.lr-foot .lr-foot-col li { line-height: 0; } }

/* ---------------------------------------------------------------- the cookie choice panel, in Day colors */
html body .lessen-ads-choice { background: rgba(255, 255, 255, .97) !important; color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink-a), 0 24px 50px -20px rgba(12, 14, 13, .35) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-family: var(--sans) !important; }
html body .lessen-ads-choice button { border-color: var(--ink-b) !important; color: var(--ink) !important; min-height: 40px; }
html body .lessen-ads-choice button:first-of-type { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
html body .lessen-ads-preferences { color: var(--stone) !important; border-color: var(--ink-b) !important; background: var(--white) !important; }

@media (prefers-reduced-motion: reduce) {
  .lr *, .lr *::before, .lr *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .lr-btn:hover::after { animation: none; } .lr-btn:hover { transform: none; }
}