:root { --canvas: #F7F5F0; --surface: #EAE5DC; --surface-2: #EFEBE2; --border: #D6CFBF; --hairline: #E4DECF; --moss: #8FAF7E; --forest: #5C8A4A; --deep: #3A5C2E; --amber: #D4956A; --rose: #C97B7B; --ink: #2A2A27; --ink-2: #6B6B67; --ink-3: #A8A8A3; --ink-4: #C4C0BA; --green-tint: #EDF4EA; --green-line: #C9D9BE; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } html { scroll-behavior: smooth; scroll-padding-top: 67px; } body { padding-top: 67px; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--green-tint); color: var(--deep); } /* hide scrollbar inside phone frames */ .phone-body::-webkit-scrollbar { display: none; } .phone-body { -ms-overflow-style: none; scrollbar-width: none; } /* basic reduce-motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } /* responsive helpers */ .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .container { padding: 0 22px; } } /* APP_LIVE flag. "pre-launch" on = APP_LIVE false: the three App Store CTAs are hidden and the hero closed-beta note shows. Remove the "pre-launch" class from to go live (APP_LIVE true). Single point of change. */ .prelaunch-note { display: none; } .pre-launch .prelaunch-note { display: flex; flex-direction: column; gap: 4px; max-width: 230px; } .prelaunch-note .pl-line1 { font-size: 17px; font-weight: 700; color: rgb(247, 245, 240); letter-spacing: -0.01em; } .prelaunch-note .pl-line2 { font-size: 15px; font-weight: 400; color: rgba(247, 245, 240, 0.7); } .pre-launch .cta-appstore { display: none !important; } .pre-launch .nav-cta { display: none !important; } .pre-launch .cta-start { display: none !important; } @media (min-width: 881px) { .pre-launch nav .nav-right { display: none !important; } } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-toggle span { display: block; width: 21px; height: 2px; border-radius: 2px; background: rgb(58, 92, 46); transition: transform 220ms ease, opacity 140ms ease; } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; border-top: 0.5px solid rgb(228, 222, 207); background: rgb(247, 245, 240); padding: 6px 0 10px; } .mobile-menu.open { display: block; } .m-link { display: block; padding: 13px 32px; font-size: 16px; font-weight: 500; color: rgb(58, 92, 46); letter-spacing: -0.01em; text-decoration: none; } .m-link + .m-link { border-top: 0.5px solid rgb(228, 222, 207); } @media (max-width: 880px) { .nav-links { display: none !important; } .nav-toggle { display: flex !important; } } @media (min-width: 881px) { .mobile-menu { display: none !important; } } @media (max-width: 720px) { .m-link { padding-left: 22px; padding-right: 22px; } } @media (max-width: 720px) { .hero-bottom { grid-template-columns: 1fr !important; gap: 32px !important; } } @media (max-width: 880px) { .practice-grid { grid-template-columns: 1fr !important; gap: 48px !important; } } @media (max-width: 880px) { .synth-grid { grid-template-columns: 1fr !important; gap: 48px !important; } } @media (max-width: 720px) { .science-grid { grid-template-columns: 1fr !important; } } @media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr !important; } } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } } /* Hoisted from former inline style attributes (stage C). Appended last so the cascade matches the old inline-wins behaviour. */ .d0 { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 50; background: rgb(247, 245, 240); border-bottom: 0.5px solid rgb(228, 222, 207) } .d1 { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px } .d2 { display: flex; align-items: center; gap: 10px } .d3 { display: block; flex-shrink: 0 } .d4 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: rgb(58, 92, 46) } .d5 { display: flex; align-items: center; gap: 28px } .d6 { font-size: 13px; font-weight: 500; color: rgb(58, 92, 46); transition: color 160ms } .d7 { display: flex; align-items: center; gap: 14px } .d8 { font-size: 13px; font-weight: 600; color: rgb(247, 245, 240); background: rgb(58, 92, 46); padding: 9px 16px; border-radius: 99px; letter-spacing: -0.005em } .d9 { position: relative; background: rgb(58, 92, 46); color: rgb(247, 245, 240); min-height: calc(-67px + 100vh); display: flex; flex-direction: column; padding-top: 80px; padding-bottom: 80px; overflow: hidden } .d10 { position: absolute; right: -260px; bottom: -420px; opacity: 0.04; pointer-events: none } .d11 { display: inline-flex; flex-direction: column; gap: 104.923px } .d12 { height: 33.3846px; width: 248px; background: rgb(247, 245, 240); border-radius: 99px } .d13 { height: 33.3846px; width: 419.692px; background: rgb(247, 245, 240); border-radius: 99px } .d14 { height: 33.3846px; width: 620px; background: rgb(247, 245, 240); border-radius: 99px; position: relative } .d15 { position: absolute; top: 50%; left: 543.692px; transform: translateY(-50%); display: block; overflow: visible } .d16 { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; padding: 40px 32px 0px } .d17 { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: rgba(247, 245, 240, 0.55); text-transform: uppercase; font-variant-numeric: tabular-nums } .d18 { width: 6px; height: 6px; border-radius: 99px; background: rgb(143, 175, 126); display: inline-block } .d19 { font-size: clamp(44px, 7vw, 104px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: rgb(247, 245, 240); margin: 56px 0px; text-wrap: balance; max-width: 16ch } .d20 { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; padding-top: 40px; border-top: 0.5px solid rgba(247, 245, 240, 0.16) } .d21 { font-size: 17px; line-height: 1.6; color: rgba(247, 245, 240, 0.78); max-width: 480px; margin: 0px; text-wrap: pretty } .d22 { display: flex; align-items: center; gap: 20px; flex-wrap: wrap } .d23 { display: inline-flex; align-items: center; gap: 10px; background: rgb(0, 0, 0); color: rgb(255, 255, 255); padding: 0px 16.56px; height: 56.9524px; border-radius: 12.5295px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; transition: transform 160ms } .d24 { display: flex; flex-direction: column; line-height: 1; gap: 2px } .d25 { font-size: 10.2514px; font-weight: 400; opacity: 0.9 } .d26 { font-size: 20.5029px; font-weight: 600; letter-spacing: -0.01em } .d27 { display: flex; flex-direction: column; gap: 3px } .d28 { font-size: 13px; color: rgb(247, 245, 240); font-weight: 600 } .d29 { font-size: 12px; color: rgba(247, 245, 240, 0.6) } .d30 { background: transparent; color: rgb(42, 42, 39); padding: 120px 0px; border-top: 0.5px solid rgb(228, 222, 207) } .d31 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgb(92, 138, 74); text-transform: uppercase; margin-bottom: 18px } .d32 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: rgb(42, 42, 39); margin: 0px; max-width: 920px; text-wrap: balance } .d33 { font-size: 19px; line-height: 1.55; color: rgb(107, 107, 103); max-width: 720px; margin: 24px 0px 0px; text-wrap: pretty } .d34 { margin-top: 56px } .d35 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; margin-top: 24px } .d36 { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap } .d37 { display: flex; flex-direction: column; align-items: center; gap: 14px } .d38 { width: 260px; height: 562.987px; background: rgb(31, 31, 30); border-radius: 33.8px; padding: 9.1px; box-shadow: rgba(58, 92, 46, 0.28) 0px 40px 70px -30px, rgba(0, 0, 0, 0.18) 0px 14px 30px -14px } .d39 { width: 100%; height: 100%; background: rgb(247, 245, 240); border-radius: 27.3px; overflow: hidden; position: relative; display: flex; flex-direction: column } .d40 { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; background: rgb(247, 245, 240); font-family: -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; user-select: none } .d41 { display: flex; justify-content: space-between; align-items: center; padding: 9px 15px 0 } .d42 { font-size: 9.5px; font-weight: 700; color: rgb(42, 42, 39); font-variant-numeric: tabular-nums } .d43 { display: inline-flex; align-items: center; gap: 4px } .d44 { display: inline-flex; align-items: flex-end; gap: 1.2px } .d45 { width: 1.7px; height: 3px; background: rgb(42, 42, 39); border-radius: 0.5px } .d46 { width: 1.7px; height: 4.5px; background: rgb(42, 42, 39); border-radius: 0.5px } .d47 { width: 1.7px; height: 6px; background: rgb(42, 42, 39); border-radius: 0.5px } .d48 { width: 1.7px; height: 7.5px; background: rgb(42, 42, 39); border-radius: 0.5px } .d49 { display: inline-block; width: 16px; height: 8px; border: 1px solid rgba(42, 42, 39, 0.4); border-radius: 2.5px; position: relative } .d50 { position: absolute; top: 1.5px; left: 1.5px; bottom: 1.5px; width: 9px; background: rgb(42, 42, 39); border-radius: 1px } .d51 { display: flex; align-items: center; justify-content: space-between; padding: 9px 15px } .d52 { font-size: 12px; font-weight: 600; color: rgb(42, 42, 39); display: inline-flex; align-items: center; gap: 6px } .d53 { color: rgb(168, 168, 163); font-size: 13px; font-weight: 400 } .d54 { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2.6px } .d55 { width: 7.5px; height: 1.5px; background: rgb(107, 107, 103); border-radius: 9px } .d56 { width: 10.8px; height: 1.5px; background: rgb(107, 107, 103); border-radius: 9px } .d57 { width: 15px; height: 1.5px; background: rgb(107, 107, 103); border-radius: 9px } .d58 { height: 0.5px; background: rgb(228, 222, 207) } .d59 { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 7px } .d60 { border-radius: 9px; overflow: hidden; border: 0.5px solid rgb(201, 217, 190) } .d61 { background: rgb(92, 138, 74); padding: 1.5px 10px; line-height: 1 } .d62 { font-size: 6px; font-weight: 700; letter-spacing: 0.13em; color: rgb(247, 245, 240) } .d63 { background: rgb(237, 244, 234); padding: 9px 10px } .d64 { font-size: 6px; font-weight: 700; letter-spacing: 0.1em; color: rgb(92, 138, 74); margin-bottom: 4px } .d65 { font-size: 9.5px; font-weight: 600; line-height: 1.32; color: rgb(42, 42, 39) } .d66 { font-size: 7.5px; font-style: italic; color: rgb(143, 175, 126); margin-top: 4px } .d67 { font-size: 8px; line-height: 1.4; color: rgb(42, 42, 39); margin-top: 4px } .d68 { background: #ffffff; border: 0.5px solid rgb(228, 222, 207); border-radius: 9px; padding: 9px 10px } .d69 { font-size: 6px; font-weight: 700; letter-spacing: 0.1em; color: rgb(168, 168, 163); margin-bottom: 4px } .d70 { font-size: 7.5px; font-style: italic; color: rgb(168, 168, 163); margin-top: 4px } .d71 { background: rgb(237, 244, 234); border: 0.5px solid rgb(201, 217, 190); border-radius: 9px; padding: 9px 10px } .d72 { font-size: 6px; font-weight: 700; letter-spacing: 0.1em; color: rgb(92, 138, 74); margin-bottom: 5px } .d73 { font-size: 7.5px; font-style: italic; color: rgb(143, 175, 126); margin-bottom: 4px } .d74 { font-size: 8px; line-height: 1.42; color: rgb(42, 42, 39) } .d75 { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 0 0; font-size: 8px; font-weight: 600; letter-spacing: 0.05em; color: rgb(92, 138, 74) } .d76 { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 13px; display: flex; justify-content: center; align-items: center; pointer-events: none } .d77 { width: 83.2px; height: 3.12px; background: rgb(42, 42, 39); opacity: 0.85; border-radius: 99px } .d78 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(107, 107, 103) } .d79 { display: flex; flex-direction: column; gap: 36px } .d80 { display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: start } .d81 { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: rgb(92, 138, 74); letter-spacing: 0.02em; padding-top: 4px } .d82 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(168, 168, 163); margin-bottom: 8px } .d83 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 10px; color: rgb(42, 42, 39) } .d84 { font-size: 15px; line-height: 1.6; color: rgb(107, 107, 103); margin: 0px; text-wrap: pretty } .d85 { background: rgb(58, 92, 46); color: rgb(255, 255, 255); padding: 120px 0px; position: relative; overflow: hidden } .d86 { position: absolute; inset: 0px; opacity: 0.07; background: radial-gradient(60% 50% at 20% 100%, rgb(143, 175, 126) 0%, transparent 60%) } .d87 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative } .d88 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgb(143, 175, 126); text-transform: uppercase; margin-bottom: 18px } .d89 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; margin: 0px } .d90 { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); max-width: 540px; margin-top: 24px; text-wrap: pretty } .d91 { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 520px } .d92 { border-top: 0.5px solid rgba(255, 255, 255, 0.18); padding-top: 14px } .d93 { font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); margin-bottom: 4px } .d94 { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.5 } .d95 { display: flex; justify-content: center } .d96 { width: 300px; height: 649.6px; background: rgb(31, 31, 30); border-radius: 39px; padding: 10.5px; box-shadow: rgba(58, 92, 46, 0.28) 0px 40px 70px -30px, rgba(0, 0, 0, 0.18) 0px 14px 30px -14px } .d97 { width: 100%; height: 100%; background: rgb(247, 245, 240); border-radius: 31.5px; overflow: hidden; position: relative; display: flex; flex-direction: column } .d98 { display: flex; justify-content: space-between; align-items: center; padding: 10px 17px 0 } .d99 { display: flex; align-items: center; justify-content: space-between; padding: 11px 17px } .d100 { font-size: 14px; font-weight: 600; color: rgb(42, 42, 39); display: inline-flex; align-items: center; gap: 6px } .d101 { color: rgb(168, 168, 163); font-size: 15px; font-weight: 400 } .d102 { width: 8.5px; height: 1.5px; background: rgb(107, 107, 103); border-radius: 9px } .d103 { width: 12.2px; height: 1.5px; background: rgb(107, 107, 103); border-radius: 9px } .d104 { width: 17px; height: 1.5px; background: rgb(107, 107, 103); border-radius: 9px } .d105 { padding: 0 17px } .d106 { padding: 13px 0; border-bottom: 0.5px solid rgb(228, 222, 207) } .d107 { display: flex; justify-content: space-between; align-items: baseline } .d108 { font-size: 12.5px; font-weight: 600; color: rgb(92, 138, 74); letter-spacing: -0.01em } .d109 { font-size: 8px; color: rgb(168, 168, 163) } .d110 { font-size: 8.5px; color: rgb(107, 107, 103); margin-top: 3px } .d111 { height: 0.5px; background: rgb(228, 222, 207); margin: 9px 0 } .d112 { font-size: 7px; font-weight: 700; letter-spacing: 0.09em; color: rgb(168, 168, 163) } .d113 { font-size: 11.5px; font-weight: 600; line-height: 1.32; color: rgb(42, 42, 39); margin-top: 3px } .d114 { font-size: 7px; font-weight: 700; letter-spacing: 0.09em; color: rgb(92, 138, 74) } .d115 { font-size: 11.5px; font-weight: 400; line-height: 1.32; color: rgb(42, 42, 39); margin-top: 3px } .d116 { padding: 13px 0 } .d117 { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 15px; display: flex; justify-content: center; align-items: center; pointer-events: none } .d118 { width: 96px; height: 3.6px; background: rgb(42, 42, 39); opacity: 0.85; border-radius: 99px } .d119 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px } .d120 { background: rgb(255, 255, 255); border: 0.5px solid rgb(228, 222, 207); border-radius: 16px; padding: 28px 28px 26px } .d121 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; color: rgb(42, 42, 39) } .d122 { font-size: 12px; font-weight: 600; color: rgb(92, 138, 74); letter-spacing: 0.02em; margin-bottom: 14px; font-variant-numeric: tabular-nums } .d123 { font-size: 14.5px; line-height: 1.6; color: rgb(107, 107, 103); margin: 0px; text-wrap: pretty } .d124 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px } .d125 { background: rgb(255, 255, 255); color: rgb(42, 42, 39); border: 0.5px solid rgb(228, 222, 207); border-radius: 18px; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px } .d126 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: rgb(92, 138, 74) } .d127 { display: flex; align-items: baseline; gap: 6px } .d128 { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums } .d129 { font-size: 13px; color: rgb(107, 107, 103) } .d130 { list-style: none; padding: 0px; margin: 8px 0px 0px; display: flex; flex-direction: column; gap: 12px } .d131 { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: rgb(42, 42, 39) } .d132 { color: rgb(92, 138, 74); margin-top: 1px } .d133 { flex: 1 1 0% } .d134 { font-size: 13px; color: rgb(168, 168, 163); margin-top: 8px } .d135 { background: rgb(58, 92, 46); color: rgb(255, 255, 255); border: none; border-radius: 18px; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px } .d136 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: rgb(143, 175, 126) } .d137 { font-size: 16px; color: rgba(255, 255, 255, 0.6) } .d138 { font-size: 13px; color: rgba(255, 255, 255, 0.7) } .d139 { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.86) } .d140 { color: rgb(143, 175, 126); margin-top: 1px } .d141 { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 8px } .d142 { font-size: 13px; color: rgb(168, 168, 163); margin-top: 28px; max-width: 720px; line-height: 1.6 } .d143 { display: grid; grid-template-columns: 1fr; gap: 0px; margin-top: 8px; max-width: 920px } .d144 { display: grid; grid-template-columns: 44px 1fr 2fr; gap: 24px; padding: 28px 0px; border-top: 0.5px solid rgb(228, 222, 207); border-bottom: 0.5px solid rgb(228, 222, 207); align-items: baseline } .d145 { font-size: 13px; font-weight: 700; color: rgb(92, 138, 74); font-variant-numeric: tabular-nums; letter-spacing: 0.04em } .d146 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: rgb(42, 42, 39) } .d147 { display: grid; grid-template-columns: 44px 1fr 2fr; gap: 24px; padding: 28px 0px; border-top: none; border-bottom: 0.5px solid rgb(228, 222, 207); align-items: baseline } .d148 { max-width: 760px } .d149 { font-size: 19px; line-height: 1.6; color: rgb(42, 42, 39); margin: 0px 0px 22px; text-wrap: pretty; letter-spacing: -0.005em } .d150 { font-size: 17px; line-height: 1.65; color: rgb(107, 107, 103); margin: 0px 0px 22px; text-wrap: pretty } .d151 { font-size: 17px; line-height: 1.65; color: rgb(107, 107, 103); margin: 0px; text-wrap: pretty } .d152 { max-width: 880px; margin-top: 0px } .d153 { border-top: 0.5px solid rgb(228, 222, 207); border-bottom: 0.5px solid rgb(228, 222, 207) } .d154 { width: 100%; text-align: left; background: transparent; border: none; padding: 22px 0px; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: rgb(42, 42, 39) } .d155 { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance } .d156 { width: 28px; height: 28px; border-radius: 99px; background: transparent; border: 0.5px solid rgb(214, 207, 191); color: rgb(107, 107, 103); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; transition: 160ms; flex-shrink: 0 } .d157 { max-height: 0px; overflow: hidden; transition: max-height 280ms } .d158 { font-size: 15.5px; line-height: 1.65; color: rgb(107, 107, 103); margin: 0px 0px 22px; max-width: 720px; text-wrap: pretty } .d159 { border-top: none; border-bottom: 0.5px solid rgb(228, 222, 207) } .d160 { background: rgb(239, 235, 226); border-top: 0.5px solid rgb(228, 222, 207); padding: 120px 0px } .d161 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start } .d162 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; margin: 0px 0px 24px; text-wrap: balance } .d163 { font-size: 17px; line-height: 1.6; color: rgb(107, 107, 103); margin: 0px; max-width: 480px; text-wrap: pretty } .d164 { display: flex; flex-direction: column; gap: 14px } .d165 { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 22px 26px; background: rgb(255, 255, 255); border: 0.5px solid rgb(228, 222, 207); border-radius: 12px; transition: border-color 160ms, transform 160ms } .d166 { font-size: 20px; color: rgb(42, 42, 39); font-weight: 600; letter-spacing: -0.01em } .d167 { font-size: 18px; color: rgb(92, 138, 74) } .d168 { background: rgb(247, 245, 240); border-top: 0.5px solid rgb(228, 222, 207) } .d169 { padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap } .d170 { display: flex; align-items: center; gap: 12px } .d171 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: rgb(42, 42, 39) } .d172 { font-size: 13px; color: rgb(168, 168, 163); margin-left: 12px } .d173 { display: flex; gap: 24px } /* FAQ accordion open/close, class-based so it works under a strict style-src CSP (toggling classes is allowed; mutating element.style is not). The panel already has max-height:0; overflow:hidden; transition:max-height from its hoisted class, so opening just lifts the cap. The cap (30rem) clears the longest answer at mobile widths; answers never approach it. Placed after the hoisted rules so .open wins the cascade. */ .faq-panel.open { max-height: 30rem; } .icon-open { transform: rotate(45deg); background: rgb(92, 138, 74); border-color: rgb(92, 138, 74); color: rgb(247, 245, 240); } /* Site footer (public-launch content update). Existing footer palette; layout only. */ .np-footer { background: rgb(247, 245, 240); border-top: 0.5px solid rgb(228, 222, 207); } .np-footer__inner { max-width: 1240px; margin: 0 auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 6px; } .np-footer__brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgb(42, 42, 39); } .np-footer__line { font-size: 13px; line-height: 1.5; color: rgb(168, 168, 163); } .np-footer a { color: rgb(107, 107, 103); } @media (max-width: 720px) { .np-footer__inner { padding: 22px; } }