/* Goldsand teasers (freelance). Drawn at 600×600 inside .mock-c and scaled to fit (see gs.js).
   Y's version of the brand: deep finance green with warm grays and whites, sans only. Every rule is scoped under .gs. */
.gs { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; color: #10261F;
  --g9: #0A211B; --g8: #102D26; --g7: #1B4236; --g6: #2C5A4A; --cr: #F3F1EC; --cr2: #F1F0EC; --ink: #0E1D18; --mut: #5F6763; }

/* ---- 1. the homepage, scrolling in a flat browser ---- */
.gs-stage { background: linear-gradient(165deg, #EDECE8 0%, #DDDBD5 100%); }
.gs-win { position: absolute; left: 44px; top: 56px; width: 512px; height: 488px; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(10, 33, 27, .45), 0 0 0 1px rgba(10, 33, 27, .08); }
.gs-bar { position: relative; z-index: 2; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #fff; box-shadow: 0 1px 0 rgba(10, 33, 27, .07); }
.gs-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E4E1D8; }
.gs-bar span { position: absolute; left: 50%; translate: -50% 0; height: 20px; padding: 0 12px; border-radius: 10px; background: #F3F1EA; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #7C857F; }
.gs-bar span svg { width: 8px; height: 8px; }
.gs-vp { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; overflow: hidden; }
.gs-page { position: absolute; left: 0; top: 0; width: 1280px; transform-origin: 0 0; will-change: transform; }

/* the wordmark, recolored through a mask so it can sit on green or cream */
.gs-logo { display: block; height: 26px; aspect-ratio: 1216 / 225; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

.gs .gp { background: #fff; color: var(--ink); letter-spacing: -.01em; }
.gs .gp h1, .gs .gp h2 { font-weight: 500; letter-spacing: -.035em; margin: 0; }
.gs .btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.gs .btn svg { width: 15px; height: 15px; }
.gs .btn.cr { background: var(--cr); color: var(--g9); }
.gs .btn.gr { background: var(--g8); color: var(--cr2); }
.gs .btn.ol { box-shadow: inset 0 0 0 1px rgba(243, 241, 236, .35); color: var(--cr2); }
.gs .btn.sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }

/* hero: Y's skyline photo at dusk, settling into green */
.gs .gp-hero { position: relative; height: 820px; color: var(--cr2); text-align: center; background: var(--g8) url('goldsand/hero.jpg') center 35% / cover no-repeat; overflow: hidden; }
/* The dusk photo runs very orange: pull its saturation down and lay the brand green over it */
.gs .gp-hero::before { content: ''; position: absolute; inset: 0; -webkit-backdrop-filter: saturate(.45); backdrop-filter: saturate(.45);
  background: linear-gradient(180deg, rgba(10, 33, 27, .5) 0%, rgba(16, 45, 38, .38) 28%, rgba(16, 45, 38, .68) 58%, var(--g8) 86%); }
.gs .gp-nav { position: relative; z-index: 2; height: 88px; display: flex; align-items: center; padding: 0 52px; color: var(--cr2); }
.gs .gp-nav nav { display: flex; gap: 32px; margin: 0 auto; font-size: 15px; opacity: .75; }
.gs .gp-hero .in { position: relative; z-index: 2; padding-top: 96px; }
.gs .tagp { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 99px; background: rgba(243, 241, 236, .14); font-size: 13.5px; color: var(--cr); }
.gs .tagp i { width: 7px; height: 7px; border-radius: 50%; background: #9FE0B4; }
.gs .gp-hero h1 { margin: 22px 0 18px; font-size: 80px; line-height: 1; }
.gs .gp-hero p { margin: 0 auto 32px; max-width: 520px; font-size: 18px; line-height: 1.5; color: rgba(243, 241, 236, .78); }
.gs .gp-hero .btns { display: flex; justify-content: center; gap: 12px; }
.gs .gp-hero small { display: block; margin-top: 16px; font-size: 13px; color: rgba(243, 241, 236, .55); }
.gs .stats { position: relative; z-index: 2; display: flex; justify-content: center; gap: 96px; margin-top: 84px; }
.gs .stats b { display: block; font-size: 40px; font-weight: 500; letter-spacing: -.03em; }
.gs .stats span { font-size: 13px; color: rgba(243, 241, 236, .6); }

/* earn: comparison on the left, the app on the right */
.gs .gp-earn { position: relative; height: 760px; background: var(--g8); box-shadow: 0 -3px 0 var(--g8); color: var(--cr2); display: grid; grid-template-columns: 1fr 1fr; padding: 40px 100px 0; }
.gs .gp-earn h2 { font-size: 52px; line-height: 1.04; margin-top: 110px; }
.gs .gp-earn p { margin: 18px 0 40px; font-size: 17px; line-height: 1.55; color: rgba(243, 241, 236, .72); max-width: 440px; }
.gs .cmp { display: grid; gap: 14px; max-width: 470px; }
.gs .cmp .r { display: grid; grid-template-columns: 150px 1fr 72px; align-items: center; gap: 14px; font-size: 14px; color: rgba(243, 241, 236, .7); }
.gs .cmp .r i { height: 10px; border-radius: 5px; background: rgba(243, 241, 236, .1); position: relative; }
.gs .cmp .r i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: rgba(243, 241, 236, .38); }
.gs .cmp .r b { font-weight: 500; text-align: right; color: var(--cr2); }
.gs .cmp .r.me { color: var(--cr); }
.gs .cmp .r.me i::after { background: var(--cr); }
.gs .cmp .r.me b { color: var(--g9); background: var(--cr); border-radius: 6px; padding: 3px 0; text-align: center; font-size: 13px; }

.gs .phone { position: absolute; right: 150px; top: 70px; width: 330px; height: 660px; border-radius: 50px; background: #0C1E18; padding: 11px; transform: rotate(9deg); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gs .phone .scr { position: relative; width: 100%; height: 100%; border-radius: 40px; background: var(--g9); overflow: hidden; padding: 58px 22px 0; color: var(--cr2); text-align: left; }
.gs .phone .scr::before { content: ''; position: absolute; left: 50%; top: 12px; width: 92px; height: 26px; margin-left: -46px; border-radius: 14px; background: #000; }
.gs .bal { display: flex; justify-content: space-between; }
.gs .bal small { display: block; font-size: 11px; color: rgba(243, 241, 236, .55); }
.gs .bal b { display: block; margin-top: 4px; font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.gs .bal .up b { color: #9FE0B4; font-size: 22px; margin-top: 10px; }
.gs .spark { display: block; width: 100%; height: 110px; margin: 16px 0 6px; }
.gs .chips { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(243, 241, 236, .5); }
.gs .chips span.on { color: var(--cr); }
.gs .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 18px; }
.gs .acts span { height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 500; background: var(--cr); color: var(--g9); }
.gs .acts span + span { background: rgba(243, 241, 236, .12); color: var(--cr); }
.gs .tx-h { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.gs .tx-h span { font-size: 11px; color: rgba(243, 241, 236, .5); font-weight: 400; }
.gs .tx { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; font-size: 12.5px; border-top: 1px solid rgba(243, 241, 236, .07); }
.gs .tx i { width: 30px; height: 30px; border-radius: 50%; background: rgba(243, 241, 236, .1); display: grid; place-items: center; font-style: normal; font-size: 12px; color: var(--cr); }
.gs .tx small { display: block; font-size: 10.5px; color: rgba(243, 241, 236, .45); }
.gs .tx b { font-weight: 500; }

/* how it works: two cards straddling green and cream */
.gs .gp-how { position: relative; padding: 0 100px 90px; background: linear-gradient(180deg, var(--g8) 0 160px, var(--cr2) 160px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gs .card { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 30px 60px -40px rgba(10, 33, 27, .35); }
.gs .card h3 { margin: 0 0 14px; font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.12; }
.gs .card p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--mut); }
.gs .card p b { color: var(--ink); font-weight: 500; }
.gs .card .lnk { font-size: 14px; color: var(--g7); font-weight: 500; }
.gs .steps { display: grid; gap: 10px; margin-top: 20px; }
.gs .steps div { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 12px; background: var(--cr2); font-size: 15px; font-weight: 500; }
.gs .steps i { width: 26px; height: 26px; border-radius: 50%; background: var(--g8); color: var(--cr); display: grid; place-items: center; font-style: normal; font-size: 12px; }

/* inflation */
.gs .gp-infl { position: relative; background: var(--cr2); padding: 30px 100px 120px; text-align: center; }
.gs .gp-infl h2 { font-size: 52px; line-height: 1.04; }
.gs .gp-infl > p { margin: 16px 0 0; font-size: 17px; color: var(--mut); }
.gs .infl { position: relative; margin-top: 50px; height: 400px; }
.gs .infl-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs .vals { position: absolute; left: 0; top: 0; display: flex; gap: 12px; }
.gs .vals div { width: 210px; padding: 18px 20px; border-radius: 14px; text-align: left; font-size: 12.5px; background: #fff; color: var(--mut); box-shadow: 0 0 0 1px rgba(10, 33, 27, .08); }
.gs .vals div b { display: block; margin-bottom: 6px; font-size: 34px; font-weight: 500; letter-spacing: -.03em; color: #B2412F; }
.gs .vals div.up { background: var(--g8); color: rgba(243, 241, 236, .65); box-shadow: none; }
.gs .vals div.up b { color: var(--cr2); }
.gs .axis { position: absolute; left: 0; right: 0; bottom: -28px; display: flex; justify-content: space-between; font-size: 12px; color: #98A39D; }

/* quote, CTA, FAQ */
.gs .gp-quote { background: #fff; padding: 120px 180px; text-align: center; }
.gs .gp-quote .st { color: #C29A3A; letter-spacing: 4px; font-size: 14px; }
.gs .gp-quote blockquote { margin: 22px 0 28px; font-size: 34px; line-height: 1.3; font-weight: 400; letter-spacing: -.025em; }
.gs .gp-quote footer { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; text-align: left; }
.gs .gp-quote footer i { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #4B7E69, var(--g9)); }
.gs .gp-quote footer span { display: block; color: var(--mut); font-size: 13px; }
.gs .gp-cta { background: var(--g8); color: var(--cr2); text-align: center; padding: 110px 0; }
.gs .gp-cta h2 { font-size: 52px; line-height: 1.06; }
.gs .gp-cta p { margin: 18px 0 34px; font-size: 17px; color: rgba(243, 241, 236, .7); }
.gs .gp-faq { background: #fff; padding: 100px 220px 120px; }
.gs .gp-faq h2 { font-size: 40px; text-align: center; margin-bottom: 40px; }
.gs .gp-faq div { display: flex; justify-content: space-between; padding: 22px 0; border-top: 1px solid #E6E8E3; font-size: 17px; }
.gs .gp-faq div::after { content: '+'; color: var(--g7); font-size: 20px; }

/* ---- 2. close-up: earn more ---- */
.gs-earn2 { background: var(--g8); color: var(--cr2); padding: 52px 48px; }
.gs-earn2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 50% at 85% 0%, rgba(243, 241, 236, .12), transparent 70%); }
.gs-earn2 > * { position: relative; }
.gs-earn2 .gs-logo { position: absolute; right: 48px; top: 58px; height: 18px; color: var(--cr); opacity: .9; }
.gs-earn2 h3 { margin: 0; font-size: 42px; line-height: 1.04; font-weight: 500; letter-spacing: -.035em; }
.gs-earn2 .sub { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(243, 241, 236, .68); max-width: 360px; }
.gs-earn2 .rows { position: absolute; left: 48px; right: 48px; bottom: 52px; display: grid; gap: 22px; }
.gs-earn2 .rw { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 10px; font-size: 14px; color: rgba(243, 241, 236, .7); }
.gs-earn2 .rw b { font-weight: 500; font-size: 15px; color: var(--cr2); font-variant-numeric: tabular-nums; }
.gs-earn2 .rw i { grid-column: 1 / -1; height: 14px; border-radius: 7px; background: rgba(243, 241, 236, .09); position: relative; overflow: hidden; }
.gs-earn2 .rw i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 7px; background: rgba(243, 241, 236, .36); transition: width 1.3s cubic-bezier(.2, .8, .2, 1); }
.gs-earn2 .rw.me { color: var(--cr); }
.gs-earn2 .rw.me i { height: 44px; border-radius: 12px; }
.gs-earn2 .rw.me i::after { background: var(--cr); border-radius: 12px; }
.gs-earn2 .rw.me b { font-size: 28px; letter-spacing: -.03em; color: var(--cr); }
.gs-earn2 .rw.me b small { font-size: 13px; letter-spacing: 0; margin-left: 4px; opacity: .7; }
.gs-earn2 .rw.me em { position: absolute; z-index: 1; left: 16px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--g9); opacity: 0; transition: opacity .4s 1.1s; }
.gs-earn2.on .rw.me em { opacity: 1; }

.mock.static * { transition: none !important; }