/* Saving (/saving, was /keeping): Origin's Investing page (useorigin.com/products/investing,
 * studied Oct 21, 2026) in Lessen's brand. Shared parts come from os.css; this
 * file holds only the page's own compositions, all prefixed .kp- and scoped to
 * body.kp.
 *
 * Origin draws its product shots as flat images that shrink with their card
 * (400px wide at 1440, 292 at 1024, 278 at 390). Ours are live HTML and SVG on
 * a 400px artboard: every size inside is artboard pixels times --u (the
 * artboard's real width / 400), so a mockup keeps its proportions at every
 * width. Every number in them is a labelled sample.
 */

/* ---------------------------------------------------------------- artboards */
body.kp .kp-art { --u: calc(100cqw / 400); container-type: inline-size; position: relative; width: 100%; max-width: 400px; margin: 0 auto; text-align: left; color: #FFFFFF; }
body.kp .kp-tag { display: flex; justify-content: center; margin: 14px 0 -30px; }
body.kp .kp-micro { font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.4 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .7); }
body.kp .kp-ui { position: relative; border-radius: calc(16 * var(--u)); overflow: hidden; background: linear-gradient(162deg, #2D302E 0%, #222523 40%, #161817 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 50px -30px rgba(0, 0, 0, .8); }
body.kp .kp-ui-h { padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.4 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .78); }
body.kp .kp-ui-in { padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); }

/* See beyond the numbers, card 1: kept vs old pace (Origin's PORTFOLIO chart, 400 x 373) */
body.kp .kp-legend { display: flex; gap: calc(36 * var(--u)); }
body.kp .kp-legend p { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: calc(8 * var(--u)); font: 400 calc(13 * var(--u))/1.3 var(--os-sans); color: rgba(255, 255, 255, .62); }
body.kp .kp-legend b { grid-column: 1 / -1; margin-top: calc(6 * var(--u)); font: 300 calc(26 * var(--u))/1 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-legend small { font-size: .5em; color: rgba(255, 255, 255, .5); letter-spacing: 0; }
body.kp .kp-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; }
body.kp .kp-dot--mint { background: #A8EDC4; box-shadow: 0 0 8px rgba(168, 237, 196, .8); }
body.kp .kp-dot--grey { background: #8C9590; }
body.kp .kp-pace { display: block; width: 100%; height: auto; margin-top: calc(18 * var(--u)); overflow: visible; }
body.kp .kp-pace-old { stroke: rgba(233, 243, 238, .4); stroke-width: 1.4; stroke-dasharray: 3 4; fill: none; }
body.kp .kp-pace-line { fill: none; stroke: #A8EDC4; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(135, 204, 170, .55)); }
body.kp .kp-pace-end { fill: #E9F3EE; filter: drop-shadow(0 0 6px rgba(168, 237, 196, .9)); }
body.kp .kp-pace-wk text { font: 400 10px var(--os-sans); fill: rgba(255, 255, 255, .45); }
body.kp .kp-chips { display: flex; justify-content: space-between; margin-top: calc(16 * var(--u)); }
body.kp .kp-chips span { padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: calc(6 * var(--u)); font: 400 calc(12 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .62); }
body.kp .kp-chips .on { color: #FFFFFF; background: rgba(255, 255, 255, .1); }

/* card 2: your real year and the money goal (Origin's ASSET & RISK, 400 x 406) */
body.kp .kp-year { padding: calc(6 * var(--u)) 0; }
body.kp .kp-yr { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(8 * var(--u)); padding: calc(13 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.kp .kp-yr span { font: 400 calc(14 * var(--u))/1.2 var(--os-sans); color: #FFFFFF; }
body.kp .kp-yr b { grid-row: 1; grid-column: 2; font: 400 calc(14 * var(--u))/1.2 var(--os-sans); color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
body.kp .kp-yr i { grid-column: 1 / -1; display: block; height: calc(3 * var(--u)); border-radius: 3px; background: linear-gradient(90deg, rgba(233, 243, 238, .55), rgba(233, 243, 238, .35)); width: var(--v); }
body.kp .kp-yr i.b { background: linear-gradient(90deg, #3F936E, #87CCAA); }
body.kp .kp-yr i.c { background: #EFC876; box-shadow: 0 0 8px rgba(239, 200, 118, .45); }
body.kp .kp-yr--diff b { color: #EFC876; }
body.kp .kp-goal { padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); }
body.kp .kp-goal-l { display: flex; justify-content: space-between; font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2.2 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .6); }
body.kp .kp-goal-l span { font: 400 calc(13 * var(--u))/1 var(--os-sans); letter-spacing: 0; text-transform: none; color: #FFFFFF; }
body.kp .kp-goal-n { margin-top: calc(12 * var(--u)); font: 300 calc(30 * var(--u))/1 var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-goal-n small { font-size: .45em; letter-spacing: 0; color: rgba(255, 255, 255, .55); }
body.kp .kp-goal-bar { display: block; height: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
body.kp .kp-goal-bar i { display: block; width: var(--v); height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3F936E, #A8EDC4); box-shadow: 0 0 10px rgba(135, 204, 170, .5); }
body.kp .kp-goal-s { margin-top: calc(10 * var(--u)); font: 300 calc(12 * var(--u))/1.3 var(--os-sans); color: rgba(255, 255, 255, .55); }

/* ---------------------------------------------------------------- Dive into every leak (phone 980 x 551, three photo cards 448 x 700) */
body.kp .kp-dive-head { text-align: center; }
body.kp .kp-phone { width: 980px; max-width: 100%; margin: 60px auto 0; }
/* the phone is the shared tilted .lr-tilt (phone.css); this is its Money screen (1em = 1/30 of the phone) */
body.kp .kp-money { position: absolute; inset: 5em 1.5em 1.4em; display: flex; flex-direction: column; text-align: left; }
body.kp .kp-m-top { font-size: .85em; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #A7B0AB; }
body.kp .kp-m-trust { display: flex; align-items: center; gap: .6em; margin-top: .9em; font-size: 1.05em; color: #A7B0AB; }
body.kp .kp-m-trust b { width: .6em; height: .6em; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 .6em rgba(135, 204, 170, .8); }
body.kp .kp-m-card { margin-top: 1em; padding: 1.3em 1.3em 1.2em; 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); }
body.kp .kp-m-lab { font-size: .8em; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #87CCAA; }
body.kp .kp-m-big { display: flex; align-items: baseline; gap: .5em; margin-top: .4em; }
body.kp .kp-m-big b { font-size: 3.2em; font-weight: 300; letter-spacing: -.05em; line-height: 1; color: #FFFFFF; }
body.kp .kp-m-big span { font-size: 1.05em; color: #FFFFFF; }
body.kp .kp-m-sub { margin-top: .4em; font-size: 1em; color: #8C9590; }
body.kp .kp-m-line { display: block; width: 100%; height: 2.6em; margin-top: .5em; overflow: visible; }
body.kp .kp-m-line path { fill: none; stroke: #A8EDC4; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
body.kp .kp-m-line circle { fill: #FFFFFF; }
body.kp .kp-m-ttl { margin-top: .5em; font-size: 1.55em; line-height: 1.22; letter-spacing: -.015em; color: #FFFFFF; }
body.kp .kp-m-row { display: flex; justify-content: space-between; gap: 1em; padding: .75em 0 .65em; border-top: 1px solid rgba(233, 243, 238, .08); margin-top: .7em; }
body.kp .kp-m-row + .kp-m-row { margin-top: 0; }
body.kp .kp-m-row span { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
body.kp .kp-m-row b { font-size: 1.15em; font-weight: 400; color: #FFFFFF; }
body.kp .kp-m-row small { font-size: .9em; color: #8C9590; }
body.kp .kp-m-row em { font-style: normal; font-size: .95em; font-weight: 500; color: #FFFFFF; }
body.kp .kp-m-row i { font-style: normal; font-size: 1.3em; font-weight: 300; color: #FFFFFF; }
body.kp .kp-photos { margin-top: 40px; }
body.kp .kp-photo { min-height: 700px; }
body.kp .kp-photo .os-card-copy { position: relative; }
body.kp .kp-float { padding: 16px; text-align: left; color: #FFFFFF; background: rgba(8, 16, 12, .5); }
body.kp .kp-float-h { font: 500 10px/1 var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
body.kp .kp-bars { display: flex; flex-direction: column; gap: 14px; }
body.kp .kp-bars div { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; font: 400 13px/1 var(--os-sans); }
body.kp .kp-bars span { color: rgba(255, 255, 255, .85); }
body.kp .kp-bars b { font-weight: 400; color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-bars i { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
body.kp .kp-bars i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 3px; background: rgba(255, 255, 255, .92); }
body.kp .kp-bars i.m::before { background: #A8EDC4; box-shadow: 0 0 8px rgba(168, 237, 196, .8); }
body.kp .kp-hours { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; height: 110px; padding: 8px 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
body.kp .kp-hours i { display: block; height: var(--h); border-radius: 3px 3px 0 0; background: rgba(233, 243, 238, .28); }
body.kp .kp-hours i.n { background: linear-gradient(180deg, #A8EDC4, #3F936E); box-shadow: 0 0 10px rgba(135, 204, 170, .45); }
body.kp .kp-hours-x { display: flex; justify-content: space-between; margin-top: 8px; font: 400 10px/1 var(--os-sans); color: rgba(255, 255, 255, .5); }
body.kp .kp-float-row { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
body.kp .kp-float-row p, body.kp .kp-grid3 p { font: 400 12px/1.3 var(--os-sans); color: rgba(255, 255, 255, .7); }
body.kp .kp-float-row b, body.kp .kp-grid3 b { display: block; margin-top: 4px; font: 400 15px/1.2 var(--os-sans); color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
body.kp .kp-grid3 p { padding: 14px 6px; border-right: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); }
body.kp .kp-grid3 p:nth-child(3n) { border-right: 0; }
body.kp .kp-grid3 p:nth-child(n+4) { border-bottom: 0; }
body.kp .kp-dive-tag { display: flex; justify-content: center; margin-top: 24px; }

/* ---------------------------------------------------------------- Ways to keep more (2 x 2) */
body.kp .kp-ways-grid .os-card:nth-child(-n+2) { min-height: 760px; }
body.kp .kp-list { margin: 0; padding: 0; list-style: none; border-radius: calc(16 * var(--u)); overflow: hidden; background: linear-gradient(162deg, #2B2E2C, #171918); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 50px -30px rgba(0, 0, 0, .8); }
body.kp .kp-list li { display: grid; grid-template-columns: calc(28 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(16 * var(--u)); height: calc(66 * var(--u)); padding: 0 calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .06); font: 400 calc(15 * var(--u))/1 var(--os-sans); }
body.kp .kp-list li:last-child { border-bottom: 0; }
body.kp .kp-list b { font-weight: 400; color: #FFFFFF; }
body.kp .kp-list em { font-style: normal; color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-list li.on { background: rgba(168, 237, 196, .06); }
body.kp .kp-list li.on em { color: #A8EDC4; }
body.kp .kp-li-ic { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .08); }
body.kp .kp-li-ic svg { width: 60%; height: 60%; fill: none; stroke: #E9F3EE; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.kp .kp-tonight { display: grid; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)); }
body.kp .kp-dial { position: relative; }
body.kp .kp-dial svg { display: block; width: 100%; height: auto; overflow: visible; }
body.kp .kp-dial .t { fill: none; stroke: rgba(233, 243, 238, .1); stroke-width: 10; stroke-linecap: round; }
body.kp .kp-dial .a { fill: none; stroke: #A8EDC4; stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(135, 204, 170, .6)); }
body.kp .kp-dial .p { fill: #E9F3EE; filter: drop-shadow(0 0 6px rgba(233, 243, 238, .9)); }
body.kp .kp-dial p { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
body.kp .kp-dial b { display: block; font: 300 calc(40 * var(--u))/1 var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; }
body.kp .kp-dial span { display: block; margin-top: calc(6 * var(--u)); font: 400 calc(12 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .6); }
body.kp .kp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
body.kp .kp-tiles p { padding: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, .05); font: 400 calc(12 * var(--u))/1.2 var(--os-sans); color: rgba(255, 255, 255, .62); }
body.kp .kp-tiles b { display: block; margin-top: calc(5 * var(--u)); font: 400 calc(15 * var(--u))/1.2 var(--os-sans); color: #FFFFFF; }
body.kp .kp-goals { margin: 0; padding: calc(4 * var(--u)) 0; list-style: none; }
body.kp .kp-goals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(10 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.kp .kp-goals li:last-child { border-bottom: 0; }
body.kp .kp-goals b { font: 400 calc(14 * var(--u))/1.2 var(--os-sans); color: #FFFFFF; }
body.kp .kp-goals em { grid-row: 1; grid-column: 2; font: 400 calc(14 * var(--u))/1.2 var(--os-sans); font-style: normal; color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-goals em small { color: rgba(255, 255, 255, .5); font-size: .85em; }
body.kp .kp-goals .kp-goal-bar { grid-column: 1 / -1; margin-top: 0; }
body.kp .kp-weeks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: calc(8 * var(--u)); height: calc(60 * var(--u)); }
body.kp .kp-weeks i { display: block; height: calc(var(--h) / 2.2); border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0; background: linear-gradient(180deg, #A8EDC4, #3F936E); opacity: .9; }
body.kp .kp-ui--soon { padding: calc(18 * var(--u)); }
body.kp .kp-ask { position: relative; padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
body.kp .kp-ask p { font: 400 calc(12 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .62); }
body.kp .kp-ask b { display: block; margin-top: calc(8 * var(--u)); font: 300 calc(34 * var(--u))/1 var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; }
body.kp .kp-ask-go { position: absolute; right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .16); }
body.kp .kp-ask-go svg { width: 40%; height: 40%; fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.kp .kp-row { display: grid; grid-template-columns: calc(28 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); font: 400 calc(13 * var(--u))/1.2 var(--os-sans); }
body.kp .kp-row b { font-weight: 400; color: #FFFFFF; }
body.kp .kp-row em { font-style: normal; font-size: calc(12 * var(--u)); color: rgba(255, 255, 255, .55); }
body.kp .os-card-copy .os-soon { margin-left: 6px; vertical-align: 1px; }

/* ---------------------------------------------------------------- Tap into your money: the collage (Origin 358 x 365 over 358 x 292) */
body.kp .kp-collage { position: relative; width: 612px; max-width: 100%; height: 470px; margin: 0 auto; text-align: left; }
body.kp .kp-col-a { position: absolute; right: 0; top: 0; width: 350px; z-index: 2; }
body.kp .kp-col-b { position: absolute; left: 0; top: 186px; width: 350px; z-index: 1; }
body.kp .kp-panel { border-radius: 14px; overflow: hidden; background: linear-gradient(165deg, #2D302E, #1A1C1B 55%, #141615); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .85); }
body.kp .kp-panel-h { display: flex; align-items: center; gap: 8px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 500 10px/1 var(--os-sans); letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
body.kp .kp-panel-h .os-pearl { width: 10px; height: 10px; }
body.kp .kp-panel-in { padding: 14px 16px 18px; }
body.kp .kp-inset { padding: 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
body.kp .kp-inset .kp-micro { --u: 1px; }
body.kp .kp-inset-n { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font: 400 16px/1 var(--os-sans); color: #FFFFFF; }
body.kp .kp-up { font-size: 12px; color: #A8EDC4; }
body.kp .kp-advisor { margin-top: 14px; font: 400 12px/1.6 var(--os-sans); color: rgba(255, 255, 255, .86); }
body.kp .kp-advisor ul { margin: 6px 0 0; padding: 0 0 0 16px; }
body.kp .kp-advisor li { margin-top: 4px; color: rgba(255, 255, 255, .7); }
body.kp .kp-advisor li b { display: block; font-weight: 500; color: #FFFFFF; }
body.kp .kp-panel-l { font: 400 12px/1 var(--os-sans); color: rgba(255, 255, 255, .6); }
body.kp .kp-panel-n { margin-top: 8px; font: 300 26px/1 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
body.kp .kp-panel-n span { font-size: 12px; letter-spacing: 0; color: rgba(255, 255, 255, .5); }
body.kp .kp-wave { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
body.kp .kp-wave .l { fill: none; stroke: #87CCAA; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(135, 204, 170, .5)); }
body.kp .kp-wave .e { fill: #A8EDC4; filter: drop-shadow(0 0 6px rgba(168, 237, 196, .9)); }
body.kp .kp-collage-tag { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; justify-content: center; }
body.kp .kp-claim { max-width: 500px; margin: 30px auto 0; text-align: center; }
body.kp .kp-rule { display: block; height: 1px; margin-bottom: 24px; background: rgba(255, 255, 255, .14); }
body.kp .kp-claim .os-p { font-size: 16px; }
body.kp .kp-claim .os-fine { margin-top: 12px; }

/* the two Forest gradient cards (Origin's violet ultra-gradient cards, 680 x 766) */
body.kp .kp-grad { min-height: 766px; }
body.kp .kp-grad .os-card-copy .os-p { text-align: left; }
body.kp .kp-frost { position: relative; padding: calc(20 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
body.kp .kp-frost-l { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(10 * var(--u))/1 var(--os-sans); letter-spacing: calc(2 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .85); }
body.kp .kp-frost-l svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #E9F3EE; stroke-width: 1.5; stroke-linecap: round; }
body.kp .kp-frost-t { margin-top: calc(12 * var(--u)); font: 400 calc(18 * var(--u))/1.3 var(--os-sans); color: #FFFFFF; }
body.kp .kp-frost-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
body.kp .kp-frost-row p { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(9, 40, 27, .3); font: 400 calc(12 * var(--u))/1.2 var(--os-sans); color: rgba(255, 255, 255, .78); }
body.kp .kp-frost-row b { display: block; margin-top: calc(5 * var(--u)); font: 400 calc(17 * var(--u))/1 var(--os-sans); color: #FFFFFF; }
body.kp .kp-frost-big { margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(9, 40, 27, .38); }
body.kp .kp-frost-big p { font: 400 calc(12 * var(--u))/1.4 var(--os-sans); color: rgba(255, 255, 255, .78); }
body.kp .kp-frost-big b { display: inline-block; margin-top: calc(8 * var(--u)); font: 300 calc(36 * var(--u))/1 var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; }
body.kp .kp-frost-big span { margin-left: calc(8 * var(--u)); font: 400 calc(13 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .78); }
body.kp .kp-frost-s { margin-top: calc(12 * var(--u)); font: 400 calc(11 * var(--u))/1.45 var(--os-sans); color: rgba(255, 255, 255, .72); }
body.kp .kp-tag--light { margin-bottom: 0; }
body.kp .kp-story { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(9, 40, 27, .45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
body.kp .kp-story-top { display: flex; justify-content: space-between; align-items: center; }
body.kp .kp-dashes { display: flex; gap: calc(4 * var(--u)); }
body.kp .kp-dashes i { display: block; width: calc(18 * var(--u)); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
body.kp .kp-dashes i.on { background: #FFFFFF; }
body.kp .kp-story-top svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; }
body.kp .kp-story-t { margin-top: calc(14 * var(--u)); font: 300 calc(22 * var(--u))/1.15 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
body.kp .kp-story-card { margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
body.kp .kp-story-bars { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
body.kp .kp-story-bars div { display: grid; grid-template-columns: calc(70 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); font: 400 calc(12 * var(--u))/1 var(--os-sans); color: rgba(255, 255, 255, .8); }
body.kp .kp-story-bars i { display: block; width: var(--v); height: calc(8 * var(--u)); border-radius: 8px; background: linear-gradient(90deg, #E9F3EE, #A8EDC4); }
body.kp .kp-story-bars i.g { background: rgba(255, 255, 255, .3); }
body.kp .kp-story-bars b { font-weight: 400; color: #FFFFFF; font-variant-numeric: tabular-nums; }
body.kp .kp-story-p { margin-top: calc(14 * var(--u)); font: 400 calc(12.5 * var(--u))/1.5 var(--os-sans); color: rgba(255, 255, 255, .92); }

/* ---------------------------------------------------------------- Grow what you keep (Origin's 448 x 220 text cards) */
body.kp .kp-tool { min-height: 220px; text-decoration: none; transition: background-color .3s var(--os-io), box-shadow .3s var(--os-io); }
body.kp a.kp-tool:hover { box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .28); }
body.kp .kp-tool .os-eyebrow { display: flex; align-items: center; gap: 10px; }
body.kp .kp-orbit-note { margin-top: 14px; color: var(--os-fg-3); }

/* ---------------------------------------------------------------- tablets */
@media (max-width: 991px) {
  body.kp .kp-photos { grid-template-columns: minmax(0, 1fr); }
  body.kp .kp-photo { min-height: 640px; }
  body.kp .kp-ways-grid .os-card:nth-child(-n+2) { min-height: 700px; }
}

/* ---------------------------------------------------------------- phones (Origin: one column, the photo cards' words move to the top) */
@media (max-width: 767px) {
  body.kp .kp-phone { width: 326px; margin-top: 40px; }
  body.kp .kp-photos { margin-top: 30px; gap: 30px; }
  body.kp .kp-photo { min-height: 600px; justify-content: flex-start; }
  body.kp .kp-photo::before { background: linear-gradient(180deg, #0C0E0D 0%, rgba(12, 14, 13, .55) 30%, rgba(12, 14, 13, 0) 60%); }
  body.kp .kp-photo .os-card-float { position: relative; left: auto; top: auto; transform: none; width: 100%; margin-top: auto; }
  body.kp .kp-ways-grid .os-card:nth-child(-n+2), body.kp .kp-grad { min-height: 500px; }
  body.kp .kp-collage { width: 342px; height: 560px; }
  body.kp .kp-col-a { width: 300px; }
  body.kp .kp-col-b { top: 330px; width: 250px; }
  body.kp .kp-tag { margin-bottom: -20px; }
  body.kp .kp-tool { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { body.kp .kp-tool { transition: none; } }

/* the collage slides in from the sides (Origin's 100px slide); keep that travel inside the section so phones never scroll sideways */
body.kp .kp-tap { overflow-x: clip; }
/* Origin's ask section is 663 tall: our notes are taller (four parts), so the head sits a little closer */
body.kp .kp-hear .os-head { margin-bottom: 70px; }
@media (max-width: 767px) { body.kp .kp-hear .os-head { margin-bottom: 44px; } }

/* ---------------------------------------------------------------- the hero film (Oct 21, 2026)
   A crystal column slowly filling with mint light, one drop at a time
   (page-saving.js plays it). The poster is the background until it plays. */
.kp .os-art.sv-film { background-image: url(/assets/lr/saving/hero-loop.webp); background-position: 0% 50%; }
.kp .os-art.sv-film video { object-position: 0% 50%; }
@media (max-aspect-ratio: 1/1) { .kp .os-art.sv-film, .kp .os-art.sv-film video { background-position: 50% 50%; object-position: 50% 50%; } }
@media (max-aspect-ratio: 1/1) { .kp .os-art.sv-film { background-image: url(/assets/lr/saving/hero-loop-tall.webp); } }
/* the film's glow sits in the upper half, so the shared bottom fade starts lower here (the text side of the frame is near black anyway) */
.kp .os-art.sv-film::after { background: linear-gradient(180deg, rgba(12, 14, 13, .25) 0%, rgba(12, 14, 13, 0) 20%, rgba(12, 14, 13, 0) 52%, #0C0E0D 100%); }

/* Oct 25: wallet film (Higgsfield, 13 s seamless loop: a bill slides in, the hand brings the next one; pinned left so the hand clears the headline). Origin-style: an even linear wash, no pool, so the
   hand and the wallet still read as footage under the words */
.os-hero .sv-film::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,14,13,.34) 0%, rgba(12,14,13,.4) 48%, rgba(12,14,13,0) 80%); }
/* phones: the tall cut keeps the words on dark and sets the hand and wallet low, under the words */
@media (max-aspect-ratio: 1/1) {
  .os-hero .sv-film::before { background: linear-gradient(180deg, rgba(12,14,13,0) 40%, rgba(12,14,13,.3) 58%, rgba(12,14,13,0) 80%); }
  .kp .os-art.sv-film::after { background: linear-gradient(180deg, rgba(12, 14, 13, .3) 0%, rgba(12, 14, 13, 0) 18%, rgba(12, 14, 13, 0) 80%, #0C0E0D 100%); }
}

/* (Oct 23, 2026) "Dive into every leak": the words come first in the page;
   below 992px they also come first on screen, the glass panel follows them in
   the flow (not pinned), and the card is only as tall as both. */
@media (max-width: 991px) {
  body.kp .kp-photos { max-width: 560px; margin-left: auto; margin-right: auto; gap: 28px; }
  body.kp .kp-photo { min-height: 0; justify-content: flex-start; gap: 28px; padding: 36px 28px 32px; }
  body.kp .kp-photo::before { background: linear-gradient(180deg, #0C0E0D 0%, rgba(12, 14, 13, .55) 30%, rgba(12, 14, 13, .1) 60%, rgba(12, 14, 13, .55) 100%); }
  body.kp .kp-photo .os-card-float { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 400px; margin: 0 auto; }
}
body.kp .os-card-copy .os-soon { display: inline-block; margin-top: 12px; }