/* /how-it-works (Oct 21, 2026). Page styles only, scoped to body.hw.
 * The page follows Origin's home page section by section (and its Employers
 * "How it works" cards); the shared parts come from os.css. Measured Origin
 * values are noted beside each block. */

/* ---------------------------------------------------------------- step label
   A small tracked label above each step heading (Origin's mono card labels). */
.hw .hw-step-n { margin: 0 0 18px; font: 500 11px/15.4px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--os-mint); }
.hw .hw-cap-tag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-top: 24px; }
.hw .hw-cap-note { font: 300 12px/16px var(--os-sans); color: var(--os-fg-3); }

/* ---------------------------------------------------------------- hero
   Origin home: 1170 tall at 1440, h1 top at 135, the phone (620 wide) rising
   from y 545 and cut by the section's lower edge; its screen is see-through,
   so the film shows inside it, as Origin's sky does. */
.hw .hw-hero { justify-content: flex-start; min-height: 1170px; padding: 135px 32px 0; }
.hw .hw-hero .os-art::after { background: linear-gradient(180deg, rgba(12, 14, 13, .12) 0%, rgba(12, 14, 13, 0) 30%, rgba(12, 14, 13, .25) 70%, #0C0E0D 100%); }
.hw .hw-hero .os-h1 { max-width: 860px; margin: 0 auto; line-height: 1.15; }
.hw .hw-hero-phone { position: relative; z-index: 1; width: 640px; max-width: 100%; height: 600px; margin: 64px auto 0; overflow: hidden; }
.hw .hw-hero-phone .hw-phone { --w: 620px; margin: 0 auto; }
.hw .hw-hero-phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, rgba(12, 14, 13, 0), #0C0E0D 92%); pointer-events: none; z-index: 2; }
.hw .hw-phone-scr { background: linear-gradient(180deg, rgba(12, 14, 13, .14), rgba(12, 14, 13, .3)); }
.hw .hw-hero-tag { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; }
.hw .hw-deck-head { position: absolute; left: 2.2em; right: 2.2em; top: 5.4em; text-align: center; }
.hw .hw-deck-ic { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .55em; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hw .hw-deck-ic svg { width: 1.1em; height: .86em; fill: #FFFFFF; }
.hw .hw-deck-title { margin-top: .8em; font: 300 2.32em/1.15 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; text-wrap: balance; }
.hw .hw-deck { position: absolute; left: 3.1em; right: 3.1em; top: 16.4em; height: 11em; margin: 0; padding: 0; list-style: none; }
.hw .hw-dcard { position: absolute; inset: 0 0 auto; min-height: 9.6em; padding: 1.25em 1.35em 1.35em; border-radius: .9em; text-align: left; color: #FFFFFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .14)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1em 2em -1em rgba(4, 20, 13, .45);
  transform-origin: 50% 120%; transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .7s cubic-bezier(.65, 0, .35, 1); will-change: transform, opacity; }
.hw .hw-dcard[data-pos="0"] { z-index: 4; transform: none; opacity: 1; }
.hw .hw-dcard[data-pos="1"] { z-index: 3; transform: translateY(-.55em) rotate(3deg); opacity: .4; }
.hw .hw-dcard[data-pos="2"] { z-index: 2; transform: translateY(-.55em) rotate(-3deg); opacity: .4; }
.hw .hw-dcard[data-pos="back"] { z-index: 1; transform: translateY(-.3em) scale(.96); opacity: 0; }
.hw .hw-dcard[data-pos="out"] { z-index: 5; transform: translate(4em, 16em) rotate(45deg); opacity: 0; transition-duration: .9s; }
.hw .hw-dcard:not([data-pos="0"]):not([data-pos="out"]) > * { opacity: 0; }
.hw .hw-dcard > * { transition: opacity .35s; }
.hw .hw-dcard.hw-snap { transition: none; }
.hw .hw-dcard-l { font: 500 .53em/1.4 var(--os-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hw .hw-dcard-t { margin-top: .55em; font: 300 1.55em/1.15 var(--os-sans); letter-spacing: -.02em; color: #FFFFFF; }
.hw .hw-dcard-p { margin-top: .6em; font: 300 .78em/1.45 var(--os-sans); color: rgba(255, 255, 255, .82); }
html:not(.os-js) .hw .hw-dcard:not(:first-child) { display: none; }

/* ---------------------------------------------------------------- intro panel
   Origin home "You shouldn't have to think about your money.": a 1376 x 497
   rounded dark panel, a 48/55.2 heading 634 wide, a light rising from the
   lower edge (Origin violet, here Forest). */
.hw .hw-intro-sec { padding-top: 16px; padding-bottom: 0; }
.hw .hw-intro { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 497px; padding: 80px 32px 70px; border-radius: 16px; text-align: center;
  background: radial-gradient(120% 70% at 50% 120%, rgba(135, 204, 170, .55) 0%, rgba(63, 147, 110, .38) 28%, rgba(22, 72, 50, .16) 52%, rgba(12, 14, 13, 0) 72%), linear-gradient(180deg, #121513 0%, #0F1211 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.hw .hw-h2m { max-width: 640px; font: 300 48px/55.2px var(--os-sans); letter-spacing: -.02em; color: #FAFAFA; text-wrap: balance; }
.hw .hw-h2m i { font-family: var(--os-serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; }
.hw .hw-intro .os-sub { margin-top: 24px; }
.hw .hw-intro .os-laurels { margin-top: 36px; }

/* ---------------------------------------------------------------- books row
   Origin home "Loved by these companies": 172 tall, a small label and one
   row of white marks. */
.hw .hw-books { padding: 48px 32px; text-align: center; }
.hw .hw-books-l { font: 300 12px/16px var(--os-sans); color: var(--os-fg-3); }
.hw .hw-books-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 64px; margin: 26px auto 0; padding: 0; list-style: none; max-width: 1200px; }
.hw .hw-books-row .os-bk { width: auto; height: 22px; background: rgba(255, 255, 255, .72); }
.hw .hw-books-row .os-bk.dk { height: 34px; margin: -6px 0; }
.hw .hw-books-note { margin-top: 22px; color: var(--os-fg-4); }

/* ---------------------------------------------------------------- step 1
   Origin Employers "How it works": three 448 x 700 art cards, a glass panel
   floating near the top, the caption at the bottom-left over the fade. */
.hw .hw-tri .hw-tcard { min-height: 700px; }
.hw .hw-float { position: absolute; left: 50%; top: 70px; width: min(320px, calc(100% - 64px)); padding: 22px; transform: translateX(-50%); text-align: left; border-radius: 16px; }
.hw .hw-float-big { margin-top: 10px; font: 300 34px/1.1 var(--os-sans); letter-spacing: -.03em; color: #FFFFFF; }
.hw .hw-float .os-small { margin-top: 10px; }
.hw .hw-float-btn { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 18px; border-radius: 8px; background: #FFFFFF; color: #000000; font: 500 11px/1 var(--os-sans); letter-spacing: .06em; text-transform: uppercase; }
.hw .hw-float-head { display: flex; justify-content: space-between; }
.hw .hw-float-head span { color: var(--os-mint); }
.hw .hw-books-pick { margin: 14px 0 0; padding: 0; list-style: none; }
.hw .hw-books-pick li { display: flex; align-items: center; gap: 12px; height: 56px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hw .hw-books-pick li:first-child { border-top: 0; }
.hw .hw-books-pick img { width: 32px; height: 32px; border-radius: 50%; }
.hw .hw-books-pick b { flex: 1; font: 400 15px/20px var(--os-sans); color: #FFFFFF; }
.hw .hw-books-pick svg { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: rgba(135, 204, 170, .22); fill: none; stroke: var(--os-glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw .hw-lock { display: flex; align-items: center; gap: 10px; font: 400 15px/20px var(--os-sans); color: #FFFFFF; }
.hw .hw-lock svg { width: 22px; height: 22px; fill: none; stroke: var(--os-glow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hw .hw-field { margin-top: 12px; height: 42px; padding: 0 14px; display: flex; align-items: center; border-radius: 8px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font: 300 14px/1 var(--os-sans); color: var(--os-fg-3); }
.hw .hw-lock + .hw-field { margin-top: 16px; }
.hw .hw-float-note { margin-top: 14px; }
.hw .hw-tri .os-card-copy { max-width: 340px; }

/* ---------------------------------------------------------------- step 2
   Origin home "Track your entire financial life.": the heading, a dark
   button, then a row of 420-wide cards that slides, with prev / pause /
   next under it (Origin's slick slider, 5s autoplay). */
.hw .hw-year { padding-left: 0; padding-right: 0; overflow: hidden; }
.hw .hw-year .os-head { padding: 0 32px; }
.hw .hw-rail { position: relative; }
.hw .hw-rail-track { display: flex; gap: 16px; margin: 0; padding: 0 32px; list-style: none; transition: transform .6s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.hw .hw-rc { flex: none; display: flex; flex-direction: column; width: 420px; min-height: 520px; padding: 32px; border-radius: 16px; background: var(--os-card); text-align: left; }
.hw .hw-rc-ui { flex: none; min-height: 250px; }
.hw .hw-rc-t { margin-top: auto; padding-top: 32px; font: 400 18px/24px var(--os-sans); color: #FFFFFF; }
.hw .hw-rc .os-p { margin-top: 6px; font-size: 15px; line-height: 22px; }
.hw .hw-guess { margin-top: 18px; font: 300 15px/22px var(--os-sans); color: var(--os-fg-2); }
.hw .hw-guess b { font-weight: 400; color: #FFFFFF; }
.hw .hw-hours { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; align-items: end; height: 110px; }
.hw .hw-hours i { display: block; height: var(--h); border-radius: 4px; background: rgba(255, 255, 255, .14); }
.hw .hw-hours i.on { background: linear-gradient(180deg, #EFC876, #C9965A); }
.hw .hw-hours-x { display: flex; justify-content: space-between; margin: 8px 0 12px; font: 500 9px/12px var(--os-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--os-fg-3); }
.hw .hw-split { margin-top: 16px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hw .hw-split i { display: block; width: var(--v); height: 100%; border-radius: 8px; background: linear-gradient(90deg, #3F936E, #87CCAA); }
.hw .hw-rc .os-ui-num { margin-top: 2px; }
.hw .hw-rc .os-small { margin-top: 8px; }
.hw .hw-bk p { display: flex; align-items: center; gap: 12px; height: 48px; font: 400 15px/20px var(--os-sans); color: #FFFFFF; }
.hw .hw-bk p + p { border-top: 1px solid rgba(255, 255, 255, .07); }
.hw .hw-bk img { width: 28px; height: 28px; border-radius: 50%; }
.hw .hw-bk span { flex: 1; }
.hw .hw-bk b { font-weight: 300; color: var(--os-fg-2); font-variant-numeric: tabular-nums; }
.hw .hw-rail-ctl { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.hw .hw-rb { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #FFFFFF; cursor: pointer; transition: background-color .2s; }
.hw .hw-rb:hover { background: rgba(255, 255, 255, .18); }
.hw .hw-rb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hw .hw-rb .pl { display: none; }
.hw .hw-rb[aria-pressed="true"] .pa { display: none; }
.hw .hw-rb[aria-pressed="true"] .pl { display: block; }

/* ---------------------------------------------------------------- step 3
   Origin Spending "Budgeting done for you": an 840-tall Forest pair. */
.hw .hw-gcard { min-height: 760px; }
.hw .hw-ring-ui { padding: 28px 24px 24px; text-align: center; }
.hw .hw-ring { position: relative; width: 200px; height: 200px; margin: 0 auto 16px; }
.hw .hw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hw .hw-ring circle { fill: none; stroke-width: 10; }
.hw .hw-ring .trk { stroke: rgba(255, 255, 255, .12); }
.hw .hw-ring .arc { stroke: #EFC876; stroke-linecap: round; stroke-dasharray: 20 100; filter: drop-shadow(0 0 6px rgba(239, 200, 118, .45)); }
.hw .hw-ring div { position: absolute; inset: 0; display: grid; place-content: center; }
.hw .hw-ring b { font: 300 48px/1 var(--os-sans); letter-spacing: -.04em; color: #FFFFFF; }
.hw .hw-ring small { margin-top: 8px; font: 300 14px/1 var(--os-sans); color: var(--os-fg-2); }
.hw .hw-days { margin: 26px 0 10px; font: 300 120px/1 var(--os-sans); letter-spacing: -.05em; color: #FFFFFF; }
.hw .hw-ring-ui .os-micro { color: rgba(255, 255, 255, .72); }
.hw .hw-ring-ui .os-small { color: rgba(255, 255, 255, .78); }
.hw .hw-gtag { justify-content: center; margin-top: 16px; display: flex; }
.hw .hw-switch { max-width: 520px; margin: 40px auto 0; }

/* ---------------------------------------------------------------- step 4
   Origin home "Receive always-on financial advice.": a 900-tall field of
   faint dots (here, the 168 hours of your week, the riskiest lit), a green
   dot over the heading, and the notification pill under it. */
.hw .hw-adv { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 900px; padding: 100px 32px; overflow: hidden; text-align: center; }
.hw .hw-adv-grid { position: absolute; left: 20px; right: 20px; top: 0; width: calc(100% - 40px); height: 100%; z-index: -1;
  -webkit-mask: radial-gradient(ellipse 78% 72% at 50% 45%, #000 35%, transparent 100%); mask: radial-gradient(ellipse 78% 72% at 50% 45%, #000 35%, transparent 100%); }
.hw .hw-adv-in { position: relative; width: 100%; max-width: 760px; }
.hw .hw-adv-dot { display: block; width: 10px; height: 10px; margin: 0 auto 36px; border-radius: 50%; background: #2FCB7E; box-shadow: 0 0 14px rgba(47, 203, 126, .9), 0 0 40px rgba(47, 203, 126, .45); }
.hw .hw-adv .os-sub { max-width: 460px; }
.hw .hw-toasts { position: relative; width: 600px; max-width: 100%; height: 96px; margin: 48px auto 0; }
.hw .hw-toast { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 24px 18px 18px; border-radius: 100px; text-align: left;
  background: linear-gradient(180deg, rgba(40, 44, 42, .92), rgba(24, 27, 26, .92)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -12px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s var(--os-out), transform .6s var(--os-out); }
.hw .hw-toast.on { opacity: 1; transform: none; }
.hw .hw-toast.off { opacity: 0; transform: translateY(-14px) scale(.98); }
html:not(.os-js) .hw .hw-toast:first-child, .hw .hw-toasts.hw-still .hw-toast:first-child { opacity: 1; transform: none; }
.hw .hw-toast-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(160deg, #164832, #3F936E 70%, #87CCAA); }
.hw .hw-toast-ic svg { width: 22px; height: 17px; fill: #FFFFFF; }
.hw .hw-toast-t { font: 300 15px/21px var(--os-sans); color: rgba(255, 255, 255, .86); }
.hw .hw-toast-t b { font-weight: 500; color: #FFFFFF; }
.hw .hw-toast-w { align-self: start; padding-top: 2px; font: 300 12px/16px var(--os-sans); color: var(--os-fg-3); white-space: nowrap; }
.hw .hw-adv-note { max-width: 520px; margin: 28px auto 0; }
.hw .hw-adv-note .os-tag { margin-left: 6px; }

/* ---------------------------------------------------------------- step 5
   Origin home "Your finances, understood.": a 1376-wide panel lit from the
   top right (Origin violet, here mint and Forest), the mark, a heading, and
   a phone whose chat plays as it comes into view. */
.hw .hw-und { position: relative; overflow: hidden; padding: 100px 32px 0; border-radius: 16px; text-align: center;
  background: radial-gradient(60% 55% at 100% 0%, rgba(135, 204, 170, .55) 0%, rgba(63, 147, 110, .3) 35%, rgba(12, 14, 13, 0) 72%), radial-gradient(45% 40% at 0% 100%, rgba(63, 147, 110, .45), rgba(12, 14, 13, 0) 75%), #0C0E0D; }
.hw .hw-und-head { max-width: 640px; margin: 0 auto; }
.hw .hw-und-head .os-sub { margin-top: 24px; }
.hw .hw-und-head .os-btn { margin-top: 24px; }
.hw .hw-und-phone { position: relative; width: 420px; max-width: 100%; height: 760px; margin: 60px auto 0; overflow: hidden; }
.hw .hw-und-phone .hw-cphone { --w: 400px; margin: 0 auto; }
.hw .hw-und-phone .hw-cap-tag { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; z-index: 3; }
.hw .hw-und-phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(12, 14, 13, 0), #0C0E0D 90%); pointer-events: none; z-index: 2; }
.hw .hw-chat-scr { background: #050706; }
.hw .hw-chat { position: absolute; inset: 4.6em 1.4em 1.4em; display: flex; flex-direction: column; gap: .9em; text-align: left; }
.hw .hw-chat-top { display: flex; flex-direction: column; align-items: center; gap: .2em; padding-bottom: .9em; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.hw .hw-chat-top b { font: 500 1.15em/1.3 var(--os-sans); color: #FFFFFF; }
.hw .hw-chat-top span { font: 300 .8em/1.3 var(--os-sans); color: var(--os-fg-3); }
.hw .hw-msg { max-width: 88%; font: 300 1.02em/1.45 var(--os-sans); color: #FFFFFF; transition: opacity .5s var(--os-out), transform .5s var(--os-out); }
.hw .hw-les { padding: 1em 1.1em; border-radius: 1.1em 1.1em 1.1em .35em; background: linear-gradient(180deg, #232624, #171918); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.hw .hw-les[data-s="1"] { box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .35), 0 0 2.4em -.6em rgba(135, 204, 170, .45); }
.hw .hw-me { align-self: flex-end; padding: .75em 1em; border-radius: 1.1em 1.1em .35em 1.1em; background: #FFFFFF; color: #0C0E0D; font-weight: 400; }
.hw .hw-msg-l { font: 500 .62em/1.4 var(--os-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--os-mint); }
.hw .hw-msg-l + p { margin-top: .35em; }
.hw .hw-msg-why { margin-top: .4em; font-size: .88em; color: var(--os-fg-2); }
.hw .hw-msg-btn { display: inline-flex; margin-top: .8em; padding: .55em .9em; border-radius: .5em; background: #FFFFFF; color: #000000; font: 500 .66em/1 var(--os-sans); letter-spacing: .06em; text-transform: uppercase; }
.hw .hw-ask { margin-top: auto; display: flex; align-items: center; gap: .8em; padding: .8em .8em .8em 1em; border-radius: 1.1em; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hw .hw-ask-f { flex: 1; font: 300 .95em/1.3 var(--os-sans); color: var(--os-fg-3); }
.hw .hw-ask-f .os-caret { margin: 0 .2em 0 0; background: #FFFFFF; }
.hw .hw-ask-s { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.hw .hw-ask-s svg { width: .9em; height: .9em; fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.os-js .hw [data-hw-chat] .hw-msg { opacity: 0; transform: translateY(12px); }
html.os-js .hw [data-hw-chat] .hw-msg.on { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- step 6
   Origin home bento: rows of a 680-wide photo card (an 80/80 title, a line
   at the bottom) beside a 680-wide dark card holding the working UI;
   the rows alternate sides. Row height 640 at 1440. */
.hw .hw-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hw .hw-cell { min-width: 0; }
.hw .hw-photo { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 640px; padding: 70px 48px 48px; border-radius: 16px; overflow: hidden; text-align: center; background: var(--img) center / cover no-repeat #101211; }
.hw .hw-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 14, 13, .05), rgba(12, 14, 13, .18) 60%, rgba(12, 14, 13, .55)); }
.hw .hw-photo h3 { max-width: 480px; font: 300 80px/80px var(--os-sans); letter-spacing: -.03em; color: #FAFAFA; text-wrap: balance; }
.hw .hw-photo h3 i { font-family: var(--os-serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; }
.hw .hw-photo p { max-width: 420px; font: 300 16px/24px var(--os-sans); color: rgba(255, 255, 255, .9); }
.hw .hw-ui { display: flex; align-items: center; justify-content: center; height: 640px; padding: 48px; border-radius: 16px; background: linear-gradient(180deg, #161918, #0F1110); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.hw .hw-ui-card { width: 100%; max-width: 420px; }
.hw .hw-meter { margin-top: 16px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hw .hw-meter i { display: block; width: var(--v); height: 100%; border-radius: 8px; background: linear-gradient(90deg, #3F936E, #87CCAA); }
.hw .hw-lockline { display: flex; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 12px; background: rgba(135, 204, 170, .08); box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .2); }
.hw .hw-lockline svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--os-glow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hw .hw-lockline p { font: 300 14px/20px var(--os-sans); color: rgba(255, 255, 255, .82); }
.hw .hw-ui .os-ui-row span { text-align: right; }

/* ---------------------------------------------------------------- step 7
   Origin home "Your financial life, together.": a 1376 x 720 rounded film,
   the people chip, a 96px title, the text, a dark button and a fine line. */
.hw .hw-tog { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 720px; padding: 80px 32px; border-radius: 16px; text-align: center; }
.hw .hw-tog .os-art::after { background: radial-gradient(70% 70% at 50% 50%, rgba(12, 14, 13, .35), rgba(12, 14, 13, .1) 70%); }
.hw .hw-tog-in { position: relative; z-index: 1; max-width: 760px; }
.hw .hw-tog-who { display: inline-flex; align-items: center; gap: 14px; height: 44px; margin-bottom: 26px; padding: 0 18px; border-radius: 100px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 500 12px/1 var(--os-sans); letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.hw .hw-tog-who svg { width: 20px; height: 20px; fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; }
.hw .hw-tog .hw-step-n { color: #FFFFFF; opacity: .8; }
.hw .hw-tog .os-h1 { line-height: .95; }
.hw .hw-tog .os-sub { margin-top: 24px; color: rgba(255, 255, 255, .86); }
.hw .hw-tog-btn { margin-top: 24px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgba(255, 255, 255, .16); }
.hw .hw-tog-fine { margin-top: 16px; font: 300 12px/16px var(--os-sans); color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- what Lessen can't do */
.hw .hw-lim .os-card--text { min-height: 220px; }
.hw .hw-lim .os-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hw .hw-lim a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 991px) {
  .hw .hw-tri { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .hw .hw-bento { grid-template-columns: minmax(0, 1fr); }
  .hw .hw-photo h3 { font-size: 64px; line-height: 64px; }
  .hw .hw-photo, .hw .hw-ui { height: 560px; }
}

/* ---------------------------------------------------------------- phones (Origin's 390 layout) */
@media (max-width: 767px) {
  .hw .hw-hero { min-height: 844px; padding: 100px 16px 0; }
  .hw .hw-hero .os-h1 { line-height: 1.1; }
  .hw .hw-hero-phone { width: 340px; height: 430px; margin-top: 36px; }
  .hw .hw-hero-phone .hw-phone { --w: 330px; }
  .hw .hw-deck-title { font-size: 2.6em; }
  .hw .hw-deck { left: 2.2em; right: 2.2em; top: 17.4em; }
  .hw .hw-dcard-t { font-size: 1.75em; }
  .hw .hw-dcard-p { font-size: .95em; }
  .hw .hw-dcard-l { font-size: .68em; }
  .hw .hw-intro-sec { padding-top: 16px; }
  .hw .hw-intro { min-height: 489px; padding: 60px 20px; }
  .hw .hw-h2m { font-size: 38px; line-height: 43.7px; }
  .hw .hw-books { padding: 24px 16px 40px; }
  .hw .hw-books-row { gap: 22px 34px; }
  .hw .hw-books-row .os-bk { height: 18px; }
  .hw .hw-books-row .os-bk.dk { height: 28px; }
  .hw .hw-tri .hw-tcard { min-height: 600px; }
  .hw .hw-tri .hw-tcard { justify-content: flex-start; }
  /* the words already come first in the page (Oct 23, 2026) */
  .hw .hw-tri .hw-tcard::before { background: linear-gradient(180deg, #0C0E0D 0%, rgba(12, 14, 13, .55) 30%, rgba(12, 14, 13, 0) 55%, rgba(12, 14, 13, .5) 100%); }
  .hw .hw-float { position: relative; left: auto; top: auto; transform: none; width: 100%; margin-top: 28px; }
  .hw .hw-year .os-head { padding: 0 16px; }
  .hw .hw-rail-track { padding: 0 16px; }
  .hw .hw-rc { width: 307px; min-height: 470px; padding: 24px; }
  .hw .hw-gcard { min-height: 600px; }
  .hw .hw-days { font-size: 96px; }
  .hw .hw-adv { min-height: 844px; padding: 70px 16px; }
  .hw .hw-adv-grid { left: 0; right: 0; width: 100%; }
  .hw .hw-toasts { height: 132px; }
  .hw .hw-toast { grid-template-columns: auto minmax(0, 1fr); border-radius: 20px; padding: 14px; gap: 12px; align-items: start; }
  .hw .hw-toast-w { grid-column: 2; grid-row: 1; justify-self: end; padding: 0; }
  .hw .hw-toast-t { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 20px; }
  .hw .hw-toast-ic { width: 32px; height: 32px; border-radius: 9px; }
  .hw .hw-toast-ic svg { width: 16px; height: 13px; }
  .hw .hw-und { padding: 70px 16px 0; }
  .hw .hw-und-phone { width: 320px; height: 600px; margin-top: 40px; }
  .hw .hw-und-phone .hw-cphone { --w: 310px; }
  .hw .hw-chat { font-size: 1.12em; }
  .hw .hw-photo { height: 420px; padding: 48px 24px 28px; }
  .hw .hw-photo h3 { font-size: 46px; line-height: 46px; }
  .hw .hw-ui { height: auto; min-height: 420px; padding: 24px 16px; }
  .hw .hw-tog { min-height: 680px; padding: 60px 20px; border-radius: 16px; }
  .hw .hw-tog .os-h1 { font-size: 46px; line-height: 46px; }
  .hw .hw-lim .os-card--text { min-height: 0; }
}

/* ---------------------------------------------------------------- reduced motion: everything still */
@media (prefers-reduced-motion: reduce) {
  .hw .hw-dcard, .hw .hw-toast, .hw .hw-rail-track, .hw .hw-msg { transition: none !important; }
}

/* (Oct 23, 2026) Step 6 pairs. Desktop: the middle row flips by grid
   placement. Below 992px each pair stacks words first, then its live card,
   then a clear gap; heights become minimums so wrapped words can grow. */
@media (min-width: 992px) {
  .hw .hw-bento > .hw-cell--flip { grid-column: 2; grid-row: 2; }
  .hw .hw-bento > .hw-cell--flip + .hw-cell { grid-column: 1; grid-row: 2; }
}
@media (max-width: 991px) {
  .hw .hw-bento { gap: 12px; }
  .hw .hw-bento > .hw-cell:nth-child(odd):not(:first-child) { margin-top: 40px; }
  .hw .hw-photo { height: auto; min-height: 420px; gap: 32px; }
  .hw .hw-ui { height: auto; min-height: 380px; }
}
@media (max-width: 767px) {
  .hw .hw-bento > .hw-cell:nth-child(odd):not(:first-child) { margin-top: 32px; }
  .hw .hw-photo { min-height: 360px; }
  .hw .hw-ui { min-height: 320px; }
}

/* (Oct 23, 2026) Step 1 cards: from 991px down the words lead and the glass
   panel follows in the flow, with the card only as tall as both and a clear
   gap between cards. */
@media (max-width: 991px) {
  .hw .hw-tri { gap: 28px; }
  .hw .hw-tri .hw-tcard { min-height: 0; justify-content: flex-start; padding: 36px 28px 32px; gap: 28px; }
  .hw .hw-tri .hw-tcard::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%); }
  .hw .hw-float { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 360px; margin: 0 auto; }
  .hw .hw-cap-tag { text-align: center; }
}

/* Oct 25: the "Where it went" card row must never widen the page */
.hw-rc { max-width: 100%; overflow-x: clip; }
main { overflow-x: clip; }

/* Oct 27: the short page. Link tiles ("What we do for you") and the price
   line under step 1. Same look as the text cards, no underline. */
.hw .hw-tile { min-height: 0; gap: 16px; text-decoration: none; transition: box-shadow .3s var(--os-io); }
.hw a.hw-tile:hover { box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .28); }
.hw .hw-tile .os-small { margin: 0; color: var(--os-fg-2); }
.hw .hw-price { margin-top: 14px; }
.hw .hw-price a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.hw .hw-modes .os-card--text { gap: 16px; }
.hw .hw-lim.os-grid-2 .os-card--text { min-height: 0; gap: 16px; }
@media (prefers-reduced-motion: reduce) { .hw .hw-tile { transition: none; } }