/* Sharing (Oct 21, 2026): Origin's Couples page in Lessen's brand.
 * Loads after os.css. Everything here is scoped to body.sh and uses the
 * .sh- prefix; os- classes are never restyled globally. Measurements are
 * Origin's (useorigin.com/couples, measured live Oct 21, 2026 at 1440, 1024
 * and 390): photo cards 680 x 700 with frosted panels (picker 275 x 207,
 * account card 358 x 191, chart 340 x 340); carousel cards 439 x 434,
 * radius 30, arrows 45px; text cards 448 x 193. Colours are the OS tokens
 * only (Ink, charcoal, Pine, Forest, Mint, Glow, Pearl, the ember warning).
 */

/* ------------------------------------------------------------ hero
   Lessen adds one quiet link at the foot of the hero for the person who was
   given a code (lessen.app/sharing is where the app sends them). */
.sh .sh-hero-door { position: absolute; left: 50%; bottom: 34px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; transform: translateX(-50%); white-space: nowrap; text-decoration: none;
  font: 500 12px/16px var(--os-sans); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .72); transition: color .2s, background-color .2s; }
.sh .sh-hero-door:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.sh .sh-hero-door svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ 2. photo cards
   Origin's track cards: 680 x 700, radius 16, padding 24; the art fills the
   card and the page colour rises from transparent at the top to Ink at the
   bottom; a 632 x 540 stage holds the frosted panels in the middle; the copy
   (470 wide, a 16/24 400 title over 16/24 300 text) sits bottom-left. */
.sh .sh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sh .sh-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 700px; padding: 24px; border-radius: 16px; overflow: hidden; background: #101211; }
.sh .sh-card-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sh .sh-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(12, 14, 13, 0), #0C0E0D); }
.sh .sh-card-vis { position: relative; display: flex; align-items: center; justify-content: center; height: 540px; }
.sh .sh-card-copy { position: relative; z-index: 3; width: 100%; max-width: 470px; text-align: left; }
.sh .sh-card-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font: 400 16px/24px var(--os-sans); color: #FFFFFF; }
.sh .sh-card-copy .os-p { margin: 0; }
.sh .sh-card-tag { position: absolute; z-index: 3; top: 24px; right: 24px; padding: 5px 10px 5px 9px; border-radius: 100px; color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

.sh .sh-intro-h { max-width: 980px; margin-left: auto; margin-right: auto; }

/* the frosted panels: Origin's rgba(0,0,0,.38) with a 24px blur, radius 16 */
.sh .sh-ui { position: relative; border-radius: 16px; color: #FFFFFF; text-align: left; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.sh .sh-ui-h { display: flex; justify-content: space-between; align-items: center; margin: 0; font: 500 10px/14px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* people as initials in rings: a brand-tinted ring, a dark gap, a thin pearl ring */
.sh .sh-av { --ring: #87CCAA; flex: none; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #0E100F;
  box-shadow: inset 0 0 0 2.5px var(--ring), inset 0 0 0 4px #0B0D0C, inset 0 0 0 5px rgba(233, 243, 238, .9);
  font: 500 11px/1 var(--os-sans); letter-spacing: .1em; text-indent: .1em; color: #FFFFFF; }
.sh .sh-av--mint { --ring: #87CCAA; }
.sh .sh-av--pearl { --ring: #E9F3EE; }
.sh .sh-av--pair { --ring: #87CCAA; box-shadow: inset 0 0 0 2.5px #87CCAA, inset 0 0 0 4.5px #3F936E, inset 0 0 0 6px #0B0D0C; }
.sh .sh-av--pair svg { width: 15px; height: 15px; fill: none; stroke: #FFFFFF; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* the people picker (Origin's member picker: 275 x 207, three 61px rows, a radio at the right) */
.sh .sh-pick { z-index: 2; display: flex; flex-direction: column; justify-content: center; width: 275px; height: 207px; margin-left: 60px; padding: 12px 0; }
.sh .sh-pick-row { display: flex; align-items: center; gap: 12px; height: 61px; padding: 0 25px 0 16px; }
.sh .sh-pick-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 18px/24px var(--os-sans); letter-spacing: -.005em; color: #FFFFFF; }
.sh .sh-radio { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.sh .sh-pick-row.is-on .sh-radio { background: radial-gradient(circle, #FFFFFF 0 3.6px, transparent 4.1px); box-shadow: inset 0 0 0 1.5px #FFFFFF; }

/* the share card behind it (Origin's account card: 358 x 191, 15% in, 284 down) */
.sh .sh-share { position: absolute; z-index: 1; left: 15%; top: 284px; width: 358px; height: 191px; transform-origin: 0 0; }
.sh .sh-share .sh-ui-h { height: 55px; padding: 0 16px 6px; align-items: flex-end; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sh .sh-share-row { display: flex; align-items: center; gap: 15px; padding: 42px 16px 0; }
.sh .sh-share-who { flex: 1; min-width: 0; }
.sh .sh-share-who b { display: block; font: 400 16px/20px var(--os-sans); color: #FFFFFF; }
.sh .sh-share-who small { display: block; margin-top: 1px; font: 300 12px/16px var(--os-sans); color: rgba(255, 255, 255, .82); white-space: nowrap; }
.sh .sh-pill { flex: none; align-self: flex-start; margin-top: 10px; padding: 1px 7px; border-radius: 9px; box-shadow: inset 0 0 0 1.25px #A8EDC4;
  font: 500 9px/14px var(--os-sans); letter-spacing: 1.8px; text-transform: uppercase; color: #A8EDC4; }
.sh .sh-share-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 0; font: 400 14px/20px var(--os-sans); color: #FFFFFF; }
.sh .sh-chip { display: inline-flex; align-items: center; gap: 8px; height: 33px; padding: 0 12px; border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font: 400 13px/1 var(--os-sans); white-space: nowrap; }
.sh .sh-chip svg { width: 12px; height: 12px; margin-left: 2px; fill: none; stroke: #FFFFFF; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sh .sh-dots { display: inline-flex; }
.sh .sh-dots i { width: 9px; height: 9px; border-radius: 50%; background: #87CCAA; }
.sh .sh-dots i + i { margin-left: -3px; background: #E9F3EE; }

/* the level picker (Origin's chart panel: 340 x 340, a 50px header with a hairline,
   the body, a 58px footer with tracked labels) */
.sh .sh-lv { display: flex; flex-direction: column; width: 340px; height: 340px; }
.sh .sh-lv .sh-ui-h { height: 50px; padding: 0 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sh .sh-lv-n { color: #A8EDC4; }
.sh .sh-lv-list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 4px 17px; list-style: none; }
.sh .sh-lv-list li { display: flex; align-items: center; gap: 12px; height: 54px; }
.sh .sh-lv-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .55); }
.sh .sh-lv-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sh .sh-lv-ic--light i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sh .sh-lv-list li.on .sh-lv-ic { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #87CCAA, 0 0 14px -4px rgba(135, 204, 170, .7); }
.sh .sh-lv-list li.on .sh-lv-ic--light i { background: #A8EDC4; box-shadow: 0 0 8px rgba(168, 237, 196, .9); }
.sh .sh-lv-t { flex: 1; min-width: 0; }
.sh .sh-lv-t b { display: block; font: 400 16px/20px var(--os-sans); color: #FFFFFF; }
.sh .sh-lv-t small { display: block; font: 300 12px/16px var(--os-sans); color: rgba(255, 255, 255, .6); }
.sh .sh-lv-list li:not(.on) .sh-lv-t b { color: rgba(255, 255, 255, .62); }
.sh .sh-sw { position: relative; flex: none; width: 34px; height: 14px; border-radius: 100px; background: rgba(255, 255, 255, .18); }
.sh .sh-sw i { position: absolute; left: -3px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: #FAFAFA; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.sh .sh-lv-list li.on .sh-sw { background: rgba(135, 204, 170, .6); box-shadow: 0 0 14px rgba(168, 237, 196, .35); }
.sh .sh-lv-list li.on .sh-sw i { transform: translateX(20px); }
.sh .sh-lv-foot { display: flex; align-items: center; justify-content: space-between; height: 58px; margin: 0; padding: 0 17px; border-top: 1px solid rgba(255, 255, 255, .08);
  font: 500 10px/14px var(--os-sans); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------ 4. what each level shows
   Origin's testimonial carousel: section padding 100 / 32 / 0, the 38px
   title, cards 100 below it, 439 x 434 colour fields (radius 30, padding 32,
   15px either side), three in view (two under 992px, one under 641px), the
   45px arrows 35 below. It advances every 5s with a 600ms slide; it waits
   while hovered or focused, off screen, with the tab hidden, and never moves
   by itself under reduced motion. The colour fields are built from the brand
   greens only, kept dark under the words (white text at 4.5:1 or better). */
.sh .sh-levels { padding: 100px 32px 0; }
.sh .sh-levels-title { max-width: 980px; margin: 0 auto; text-align: center; }
.sh .sh-car { --per: 3; position: relative; margin-top: 100px; }
.sh .sh-car-view { margin: 0 -15px; overflow: hidden; }
.sh .sh-car-track { display: flex; margin: 0; padding: 0; list-style: none; will-change: transform; }
.sh .sh-car-track.is-moving { transition: transform .6s ease; }
.sh .sh-car-slide { flex: 0 0 calc(100% / var(--per)); box-sizing: border-box; min-width: 0; padding: 0 15px; }
.sh .sh-q { display: flex; flex-direction: column; align-items: center; height: 434px; padding: 32px; border-radius: 30px; text-align: center; color: #FFFFFF; background-color: #164832; }
.sh .sh-q-top { display: flex; align-items: center; justify-content: center; gap: 8px; height: 16px; font: 500 11px/16px var(--os-sans); letter-spacing: 2px; text-indent: 2px; text-transform: uppercase; color: #FFFFFF; }
.sh .sh-q-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh .sh-q-ic--light { display: grid; place-items: center; }
.sh .sh-q-ic--light i { width: 8px; height: 8px; border-radius: 50%; background: #A8EDC4; box-shadow: 0 0 8px rgba(168, 237, 196, .9); }
.sh .sh-q-text { margin-top: 20px; font: 300 18px/27px var(--os-sans); color: #FFFFFF; text-wrap: pretty; }
.sh .sh-q-by { margin-top: 20px; font: 500 11px/24px var(--os-sans); letter-spacing: 2px; text-indent: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.sh .sh-q--1 { background:
  radial-gradient(70% 55% at 88% 100%, rgba(233, 243, 238, .95), rgba(233, 243, 238, 0) 72%),
  radial-gradient(75% 60% at 18% 92%, rgba(168, 237, 196, .9), rgba(168, 237, 196, 0) 70%),
  linear-gradient(180deg, #164832 0%, #1A573D 38%, #3F936E 72%, #87CCAA 100%); }
.sh .sh-q--2 { background:
  radial-gradient(60% 50% at 100% 70%, rgba(168, 237, 196, .85), rgba(168, 237, 196, 0) 72%),
  radial-gradient(80% 55% at 30% 105%, rgba(135, 204, 170, .95), rgba(135, 204, 170, 0) 70%),
  linear-gradient(160deg, #09281B 0%, #164832 36%, #107550 70%, #3F936E 100%); }
.sh .sh-q--3 { background:
  radial-gradient(90% 60% at 50% 110%, rgba(168, 237, 196, .9), rgba(168, 237, 196, 0) 70%),
  radial-gradient(45% 40% at 0% 60%, rgba(63, 147, 110, .9), rgba(63, 147, 110, 0) 72%),
  linear-gradient(180deg, #0E3A2A 0%, #164832 40%, #1F6347 70%, #3F936E 100%); }
.sh .sh-q--4 { background:
  radial-gradient(85% 50% at 50% 104%, rgba(233, 243, 238, .95), rgba(233, 243, 238, 0) 70%),
  radial-gradient(50% 45% at 100% 85%, rgba(135, 204, 170, .9), rgba(135, 204, 170, 0) 72%),
  linear-gradient(200deg, #164832 0%, #1A573D 40%, #3F936E 74%, #A8EDC4 100%); }
.sh .sh-car-arrows { display: flex; justify-content: center; gap: 15px; margin-top: 35px; }
.sh .sh-car-arrow { display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #000000; background: rgba(255, 255, 255, .2); transition: background-color .2s ease-in-out; -webkit-tap-highlight-color: transparent; }
.sh .sh-car-arrow:hover { background: #FFFFFF; }
.sh .sh-car-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh .sh-car-slide.is-clone { pointer-events: none; }

/* ------------------------------------------------------------ 6. always your call
   Lessen's consent row: the 38px title, then six short promises between two
   hairlines (Employers' logo-row geometry), then the provider line. */
.sh .sh-call-in { text-align: center; }
.sh .sh-call-title { max-width: 980px; margin: 0 auto; }
.sh .sh-call-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 60px 0 0; padding: 0; list-style: none; text-align: left; border-top: 1px solid var(--os-line); border-bottom: 1px solid var(--os-line); }
.sh .sh-call-row li { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px 24px 36px; border-left: 1px solid var(--os-line); }
.sh .sh-call-row li:first-child { border-left: 0; }
.sh .sh-call-row svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #87CCAA; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh .sh-call-row b { margin-top: 20px; font: 400 16px/22px var(--os-sans); color: #FFFFFF; }
.sh .sh-call-row span { margin-top: 6px; font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-pro { display: flex; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 48px; }
.sh .sh-pro .os-p { max-width: 560px; text-align: left; color: rgba(255, 255, 255, .72); }
.sh .sh-pro .os-btn { flex: none; }
.sh .sh-pro-fine { max-width: 640px; margin: 14px auto 0; color: var(--os-fg-3); }

/* ------------------------------------------------------------ 7. the code door
   Origin's demo-form language: dark fields (radius 8, no border, lighter at
   the top), small white labels, one white button. sharing.js swaps the
   button's text while it works, so the arrow is drawn in CSS, not inside it. */
.sh .sh-door-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; max-width: 1200px; margin: 0 auto; }
.sh .sh-door-copy .os-eyebrow { color: var(--os-mint); }
.sh .sh-door-copy .os-h4 { margin-top: 18px; text-align: left; }
.sh .sh-door-copy > .os-p { max-width: 470px; margin-top: 20px; }
.sh .sh-door-steps { display: flex; flex-direction: column; gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.sh .sh-door-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.sh .sh-door-steps .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font: 500 12px/1 var(--os-sans); color: var(--os-mint); }
.sh .sh-door-steps p { margin: 0; font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-door-steps b { display: block; margin-top: 3px; font: 400 16px/22px var(--os-sans); color: #FFFFFF; }
.sh .sh-door-steps code { font: 500 13px/1 var(--os-sans); letter-spacing: .12em; color: #FFFFFF; }
.sh .sh-door-form { padding: 40px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.sh .sh-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; }
.sh .sh-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh .sh-f > span { font: 500 12px/16px var(--os-sans); color: #FFFFFF; }
.sh .sh-f input { width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 8px; outline: none; color: #FFFFFF; caret-color: #A8EDC4;
  font: 400 16px/24px var(--os-sans); background: linear-gradient(0deg, #121413, #232624); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); -webkit-appearance: none; appearance: none; }
.sh .sh-f input::placeholder { color: rgba(255, 255, 255, .34); }
.sh .sh-f input:focus { box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .55), 0 0 0 2px rgba(168, 237, 196, .9); }
.sh .sh-f-code input { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.sh .sh-f-code input::placeholder { letter-spacing: .14em; }
.sh .sh-open { margin-top: 16px; }
.sh .sh-open::after { content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10.5M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.sh .sh-open[disabled] { opacity: .6; }
.sh .sh-err { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: rgba(222, 130, 106, .08); box-shadow: inset 2px 0 0 #DE826A; }
.sh .sh-err p { margin: 0; font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-err p:first-child { font-weight: 500; color: #FFFFFF; }
.sh .sh-under { margin-top: 20px; font: 300 14px/21px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-under a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; white-space: nowrap; }
.sh .sh-under a:hover { text-decoration-color: #FFFFFF; }
.sh .sh-door-fine { max-width: 720px; margin: 48px auto 0; text-align: center; color: var(--os-fg-3); }

/* the sample shared page, shown on request */
.sh .sh-sample { max-width: 1200px; margin: 60px auto 0; border-radius: 16px; overflow: hidden; text-align: left; background: var(--os-card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .8); scroll-margin-top: 100px; }
.sh .sh-sample-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); font: 400 13px/1 var(--os-sans); color: var(--os-fg-2); }
.sh .sh-sample-bar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh .sh-sample-bar em { margin-left: auto; padding: 4px 8px; border-radius: 100px; font: 500 9px/1 var(--os-sans); font-style: normal; letter-spacing: 1.6px; text-transform: uppercase; color: #A8EDC4; box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .5); }
.sh .sh-sample-in { padding: 32px; }
.sh .sh-sample-h { font: 300 22px/26px var(--os-sans); letter-spacing: -.01em; color: #FFFFFF; }
.sh .sh-sample-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 300 13px/19px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-sample-meta i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 6px rgba(135, 204, 170, .8); }
.sh .sh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.sh .sh-tile { display: flex; flex-direction: column; min-width: 0; padding: 18px; border-radius: 12px; background: linear-gradient(180deg, #232624, #141615); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sh .sh-tile-k { font: 500 10px/14px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: #87CCAA; }
.sh .sh-tile-on { margin-top: 14px; font: 300 28px/1.1 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.sh .sh-tile-big { margin-top: 14px; font: 300 28px/1.1 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.sh .sh-tile-big span { font-size: 13px; letter-spacing: 0; color: var(--os-fg-3); }
.sh .sh-tile-big .arr { font-size: 22px; color: #87CCAA; }
.sh .sh-tile-s { margin-top: auto; padding-top: 14px; font: 300 13px/19px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-mini { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 10px; height: 64px; margin-top: 16px; padding: 0 2px; }
.sh .sh-mini i { display: block; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(233, 243, 238, .9), rgba(233, 243, 238, .06)); }
.sh .sh-mini i.over { background: linear-gradient(180deg, rgba(222, 130, 106, .9), rgba(222, 130, 106, .06)); }
.sh .sh-mini b { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px dashed rgba(255, 255, 255, .7); }
.sh .sh-win { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 14px; font: 400 12px/16px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-win + .sh-win { margin-top: 10px; }
.sh .sh-win i { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.sh .sh-win b { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #3F936E, #A8EDC4); }
.sh .sh-sample-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sh .sh-sample-foot p { max-width: 760px; font: 300 13px/19px var(--os-sans); color: var(--os-fg-2); }
.sh .sh-sample-foot .os-btn { flex: none; }

/* the phone in the download band: $40 left of $150 is 27% of the ring */
.sh .os-download .os-home .ring .arc { stroke-dasharray: 26.7 100; }

/* ------------------------------------------------------------ 1024 and below */
@media (max-width: 1199px) {
  .sh .sh-call-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh .sh-call-row li:nth-child(4) { border-left: 0; }
  .sh .sh-call-row li:nth-child(n+4) { border-top: 1px solid var(--os-line); }
  .sh .sh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .sh .sh-car { --per: 2; }
  .sh .sh-pick { margin-left: 0; }
  .sh .sh-share { top: 273px; transform: scale(.737); }
  .sh .sh-lv { width: 310px; height: 310px; }
  .sh .sh-lv-list li { height: 48px; }
  .sh .sh-door-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sh .sh-door-copy > .os-p { max-width: 560px; }
}

/* ------------------------------------------------------------ phones
   Origin's phone layout: the cards stack (358 x 600, 30 apart) with the
   copy moved to the top and the page colour rising from the top instead;
   the share card shrinks; the carousel shows one card; steps stack. */
@media (max-width: 767px) {
  .sh .sh-br { display: none; }
  .sh .sh-hero-door { bottom: 26px; }
  .sh .sh-cards { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sh .sh-card { justify-content: flex-start; height: 600px; }
  .sh .sh-card::before { background: linear-gradient(180deg, #0C0E0D, rgba(12, 14, 13, 0)); }
  .sh .sh-card-copy { max-width: 310px; }
  .sh .sh-card-vis { flex: 1; height: auto; margin-top: 40px; }
  .sh .sh-card-tag { position: static; align-self: flex-start; margin-top: 16px; }
  .sh .sh-share { left: 15%; top: 273px; }
  .sh .sh-levels { padding: 70px 16px 0; }
  .sh .sh-car { margin-top: 70px; }
  .sh .sh-call-row { grid-template-columns: minmax(0, 1fr); margin-top: 40px; border-bottom: 0; }
  .sh .sh-call-row li, .sh .sh-call-row li:nth-child(4) { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-left: 0; border-top: 1px solid var(--os-line); }
  .sh .sh-call-row li:first-child { border-top: 0; }
  .sh .sh-call-row li:last-child { border-bottom: 1px solid var(--os-line); }
  .sh .sh-call-row svg { grid-row: span 2; }
  .sh .sh-call-row b { margin-top: 0; }
  .sh .sh-pro { flex-direction: column; align-items: flex-start; margin-top: 32px; }
  .sh .sh-pro-fine { text-align: left; margin-left: 0; }
  .sh .sh-door-form { padding: 24px 20px; }
  .sh .sh-fields { grid-template-columns: minmax(0, 1fr); }
  .sh .sh-door-fine { text-align: left; margin-top: 32px; }
  .sh .sh-sample { margin-top: 40px; }
  .sh .sh-sample-in { padding: 24px 20px; }
  .sh .sh-tiles { grid-template-columns: minmax(0, 1fr); }
  .sh .sh-sample-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) { .sh .sh-car { --per: 1; } }
@media (max-width: 380px) {
  .sh .sh-hero-door { font-size: 11px; letter-spacing: .03em; }
  .sh .sh-pick { transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .sh .sh-car-track.is-moving { transition: none; } }

/* the hero's door link glides to the door (instant under reduced motion) */
html:has(body.sh) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.sh) { scroll-behavior: auto; } }

/* hero film (Kene, Oct 25, 2026: "something that signals togetherness"): blue hour high in an empty stadium,
   two friends seen from behind on the top steps, one arm around the other, the floodlit green pitch below.
   They sit low in the frame under calm night sky, so the words rest in the sky like Origin's heroes. One
   wide cut, centred on phones (the pair sits in the middle third). Poster first; the scrim meets the next section. */
.sh .os-art.sh-film { background-image: url(/assets/lr/sharing/hero-loop.webp); background-position: center 70%; }
.sh .sh-hero { background: #0C0E0D; }
.sh .sh-hero .os-art.sh-film { background-color: #0C0E0D; }
.sh .sh-hero .os-art.sh-film video { object-position: center 70%; }
.sh .sh-hero .os-art::after { background: linear-gradient(180deg, rgba(12,14,13,.45), rgba(12,14,13,.1) 30%, rgba(12,14,13,0) 60%, #0C0E0D); }
@media (max-aspect-ratio: 1/1) { /* phones: the scene sits under the words, its top edge lost in the night */
  .sh .sh-hero { padding-bottom: 290px; }
  .sh .sh-hero .os-art.sh-film { background-size: auto 58%; background-position: center bottom; }
  .sh .sh-hero .os-art.sh-film video { top: auto; bottom: 0; height: 58%; object-position: center; }
  .sh .sh-hero .os-art::after { background: linear-gradient(180deg, #0C0E0D 0%, #0C0E0D 42%, rgba(12,14,13,.2) 56%, rgba(12,14,13,0) 70%, #0C0E0D); }
}
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .sh .sh-hero { justify-content: flex-start; padding-top: clamp(112px, 15.5vh, 170px); }
  .sh .sh-hero .os-sub { margin-top: 18px; }
  .sh .sh-hero .os-btn { margin-top: 22px; }
  .sh .sh-hero .os-lesbar { margin-top: 28px; }
  .sh .sh-hero .os-hero-cap { margin-top: 16px; }
}
.sh .sh-levels { overflow: hidden; }

/* (Oct 23, 2026) the words come first in the page (phones and screen
   readers read them before the demo); on wider screens grid rows put the
   demo on top and the words at the foot, as before, with no order trick. */
@media (min-width: 992px) {
  .sh .sh-card { display: grid; grid-template-rows: auto auto; align-content: space-between; }
  .sh .sh-card > .sh-card-vis { grid-row: 1; }
  .sh .sh-card > .sh-card-copy { grid-row: 2; }
}

/* (Oct 23, 2026) The two sharing cards stack below 992px (iPad portrait as
   well as phones): words first, then the demo, each card at least as tall as
   its demo needs. From 992px the grid rows put the demo on top again. */
@media (max-width: 991px) {
  .sh .sh-cards { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 620px; margin-left: auto; margin-right: auto; }
  .sh .sh-card { display: flex; justify-content: flex-start; height: auto; min-height: 0; padding: 32px 24px 28px; }
  .sh .sh-card::before { background: linear-gradient(180deg, #0C0E0D, rgba(12, 14, 13, 0) 45%, rgba(12, 14, 13, .5)); }
  .sh .sh-card-copy { max-width: 420px; }
  .sh .sh-card-tag { position: static; align-self: flex-start; margin-top: 16px; }
  .sh .sh-card-vis { flex: none; height: 440px; margin-top: 16px; }
}