/* base + palette (from the client's Variant 2) */ html{scroll-behavior:smooth} body{margin:0;--g:#B8862B;--g2:#D3A94C;--gd:#8F6716;--gtint:rgba(184,134,43,.10);--ink:#1B160F;--ink2:rgba(27,22,15,.62);--ink3:rgba(27,22,15,.42);--line:rgba(27,22,15,.10);--paper:#F7F4ED;--card:#FFFFFF;background:radial-gradient(1000px 560px at 90% -8%, rgba(200,155,60,.13), transparent 62%),radial-gradient(760px 520px at -10% 24%, rgba(55,123,215,.06), transparent 55%),#F7F4ED;font-family:'Geist',sans-serif;color:#1B160F;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} a:hover{color:var(--gd)} ::selection{background:var(--g2);color:#1B160F} [data-hscroll]{scrollbar-width:none} [data-hscroll]::-webkit-scrollbar{display:none} @media (max-width:920px){ [data-mq-phone-sticky]{position:relative !important;top:auto !important;height:auto !important;padding:30px 0 6px !important} [data-sc-step]{min-height:0 !important;opacity:1 !important;padding:30px 0 !important} [data-mq-dots]{display:none !important} [data-mq-hero-right]{padding:16px 0 46px !important} } @media (max-width:660px){ [data-mq-navlinks]{display:none !important} } /* extracted-bitmap backgrounds */ /* Generated by fig_materialize — background/mask classes for extracted bitmaps. * One rule per line; url()s are relative to this file, so it must stay * next to the assets/ directory it references. */ .fig-asset-5e82de25d4cf2c82 { background: url("assets/2a627658-0626-4421-ba59-4e33d2a68f7c.jpg") center / cover no-repeat; } .fig-asset-ac3097d85855fb2e { background: url("assets/1d812f68-6d02-4eb3-a1f4-322d49c22005.png") center / cover no-repeat; } .fig-asset-b9e7a126698d494b-9d04c1a7 { background: url("assets/a1670fff-5909-4fe8-a5b7-bc868156aab6.png") 50% 0.232% / 100% 171.384% no-repeat; } .fig-asset-d4e73957eaeaaaec { background: url("assets/44510894-abb7-4ba7-b8ee-63b09a99465d.png") center / cover no-repeat; } .fig-asset-f53e1d24fbad79be { background: url("assets/a72fa9d4-7e86-443b-883d-34f3dd5d2b80.png") center / cover no-repeat; } /* hover states (hoisted from style-hover=) */ .hv-0:hover{color:var(--ink);background:var(--gtint)} .hv-1:hover{color:var(--ink);background:var(--gtint)} .hv-2:hover{color:var(--ink);background:var(--gtint)} .hv-3:hover{color:var(--ink);background:var(--gtint)} .hv-4:hover{color:var(--ink);background:var(--gtint)} .hv-5:hover{background:var(--gtint);border-color:var(--g)} .hv-6:hover{background:var(--gd)} .hv-7:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(23,18,12,.55)} .hv-8:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(23,18,12,.55)} .hv-9:hover{transform:translateY(-4px);box-shadow:0 34px 70px -30px rgba(46,34,12,.3)} .hv-10:hover{transform:translateY(-4px);box-shadow:0 34px 70px -30px rgba(46,34,12,.3)} .hv-11:hover{transform:translateY(-4px)} .hv-12:hover{transform:translateY(-4px)} .hv-13:hover{transform:translateY(-4px)} .hv-14:hover{transform:translateY(-4px)} .hv-15:hover{transform:translateY(-4px)} .hv-16:hover{transform:translateY(-4px)} .hv-17:hover{background:var(--gtint);border-color:var(--g)} .hv-18:hover{background:var(--gtint);border-color:var(--g)} .hv-19:hover{transform:translateY(-4px)} .hv-20:hover{transform:translateY(-4px)} .hv-21:hover{transform:translateY(-4px)} .hv-22:hover{transform:translateY(-2px)} .hv-23:hover{transform:translateY(-2px)} .hv-24:hover{background:var(--gtint);border-color:var(--g)} .hv-25:hover{background:var(--gtint);border-color:var(--g)} .hv-26:hover{background:var(--gtint);border-color:var(--g)} .hv-27:hover{background:var(--gtint);border-color:var(--g)} .hv-28:hover{color:var(--gd)} .hv-29:hover{color:var(--gd)} .hv-30:hover{color:var(--gd)} .hv-31:hover{color:var(--gd)} .hv-32:hover{color:var(--gd)} .hv-33:hover{color:var(--gd)} .hv-34:hover{color:var(--gd)} .hv-35:hover{color:var(--gd)} /* responsive overrides (also inlined in ; repeated here so they win over the source media queries above) */ /* stop the decorative radial-glow divs (inset:-40px -70px behind the phones) from widening the page on narrow screens. clip, not hidden, so position:sticky keeps working. */ html,body{overflow-x:clip} /* nav: this pill is position:fixed with an implicit width:auto (shrink-to-fit) - which, verified in Chrome, computes the wrong (too-narrow, by ~15-20px) width once the 5-link row is a visible flex child, spilling "Get the app" out past its own rounded background at the right edge (reported on a real phone, and reproduced at ~1080-1440px too). width:max-content sizes it correctly; the existing inline max-width:calc(100vw - 24px) still clamps it on very narrow screens. overflow:hidden is belt-and-braces against the separate, known Safari bug where backdrop-filter + border-radius on the same element can fail to clip a child's background to the curve. flex:none keeps the logo lockup and link row from being shrunk unnecessarily. */ [data-mq-nav]{overflow:hidden;width:max-content!important} [data-mq-nav] > a[href="#top"]{flex:none!important} [data-mq-navlinks]{flex:none!important} [data-mq-signin],[data-mq-cta]{flex-shrink:0!important} /* the 5 inline section links need ~1080px to sit beside the wordmark + Sign in + Get the app without colliding. Below that, drop them (every link is also in the footer and the page is one continuous scroll). */ @media (max-width:1080px){ [data-mq-navlinks]{display:none!important} } /* How it works: the scroll-pinned phone demo only has room for its choreography on wide desktop. At/below 1080 (incl. iPad landscape) hide it and show the 3 steps on their own - as a 3-up row on tablet, stacked on phones. */ @media (max-width:1080px){ [data-mq-phone-sticky]{display:none!important} [data-sc-step]{min-height:0!important;opacity:1!important} [data-mq-dots]{display:none!important} } @media (min-width:721px) and (max-width:1080px){ [data-mq-steps]{display:grid!important;grid-template-columns:repeat(3,1fr); gap:30px;padding:34px 0 60px!important} [data-mq-steps] [data-sc-step]{padding:0!important;cursor:default} [data-mq-steps] [data-sc-step] p{max-width:none!important} } @media (max-width:720px){ [data-sc-step]{padding:22px 0!important} [data-mq-hero-right]{padding:16px 0 46px!important} } /* tighten the nav on phones so Sign in + Get the app never clip at the edge. Drop the wordmark text (keep the mark). The mark's also needs flex:none / min-width or the global img{max-width:100%} lets it shrink to 0 once it is the flex row's only child. */ @media (max-width:440px){ [data-mq-nav]{padding:6px 8px 6px 10px!important;gap:6px!important} [data-mq-wordmark]{display:none!important} [data-mq-nav] a[href="#top"]{padding-right:0!important;flex:none!important} [data-mq-nav] a[href="#top"] img{width:24px!important;min-width:24px!important} [data-mq-signin]{padding:8px 13px!important;margin-left:4px!important} [data-mq-cta]{padding:9px 14px!important;margin-left:0!important} }