:root { --color-white: #FFFFFF; --color-ink: #010101; --color-surface: #F3F4F1; --color-dark: #10161B; --color-body: #585956; --color-muted: #858681; --color-accent: #CDF2FF; --color-border: #E7E8E4; --color-focus: #7B9199; --color-hover: #38302E; --color-hero-body: #E7E6DE; --color-dark-body: #BABDBB; }
:root { color-scheme: light; --background: var(--color-white); --foreground: var(--color-ink); --card: var(--color-surface); --card-foreground: var(--color-ink); --popover: var(--color-white); --popover-foreground: var(--color-ink); --primary: var(--color-ink); --primary-foreground: var(--color-white); --secondary: var(--color-surface); --secondary-foreground: var(--color-ink); --muted: var(--color-surface); --muted-foreground: var(--color-muted); --accent: var(--color-accent); --accent-foreground: var(--color-ink); --border: var(--color-border); --input: var(--color-surface); --ring: var(--color-focus); --radius: 12px; --body: var(--color-body); --dark: var(--color-dark); --unit: min(.0694444444vw,1.111111px); }
.frame { width: calc(100% - 80 * var(--unit)); max-width: 1511px; margin-inline: auto; }
.site-header { height: calc(96 * var(--unit)); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: Satoshi, Arial, sans-serif; font-size: calc(18 * var(--unit)); font-weight: 500; letter-spacing: 1px; }
.brand svg { width: calc(17 * var(--unit)); height: calc(17 * var(--unit)); stroke-width: 1; }
.brand i { font-weight: 400; font-style: italic; }
.desktop-nav { display: flex; align-items: center; gap: calc(32 * var(--unit)); margin-left: calc(52 * var(--unit)); }
.desktop-nav a { font-size: calc(14 * var(--unit)); color: var(--color-hover); transition: opacity .2s; }
.desktop-nav a:hover { opacity: 0.55; }
.header-actions { display: flex; gap: calc(12 * var(--unit)); align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--unit)); min-height: calc(48 * var(--unit)); padding: calc(13 * var(--unit)) calc(21 * var(--unit)); border: 1px solid transparent; border-radius: calc(12 * var(--unit)); font-family: Satoshi, Arial, sans-serif; font-size: calc(14 * var(--unit)); font-weight: 500; line-height: 1.3; white-space: nowrap; transition: background .2s,transform .2s; }
.button svg { width: calc(16 * var(--unit)); height: calc(16 * var(--unit)); stroke-width: 1.5; }
.header-actions .button { min-height: calc(40 * var(--unit)); padding: calc(10 * var(--unit)) calc(18 * var(--unit)); font-size: calc(13 * var(--unit)); }
.mobile-menu { display: none; }
.hero-note>.button { margin-top: calc(25 * var(--unit)); }
.how-copy>.button { margin-top: calc(24 * var(--unit)); }
.value-copy>.button { margin-top: calc(28 * var(--unit)); }
.email-field .button { font-size: calc(12 * var(--unit)); min-height: calc(48 * var(--unit)); padding: calc(12 * var(--unit)) calc(16 * var(--unit)); border-radius: calc(9 * var(--unit)); }
.site-footer { padding-top: calc(12 * var(--unit)); }
.footer-main { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: calc(46 * var(--unit)); padding-bottom: calc(52 * var(--unit)); }
.footer-brand .brand { font-size: calc(17 * var(--unit)); }
.footer-brand p { font-size: calc(14 * var(--unit)); color: var(--color-body); line-height: 1.9; margin-top: calc(12 * var(--unit)); }
.footer-column { display: flex; flex-direction: column; gap: calc(12 * var(--unit)); font-size: calc(14 * var(--unit)); line-height: 1.35; color: var(--color-body); }
.footer-column h3 { font-size: calc(15 * var(--unit)); font-weight: 500; margin-bottom: calc(4 * var(--unit)); color: var(--color-ink); }
.footer-column a:hover,.footer-brand p a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--color-border); padding: calc(22 * var(--unit)) 0 calc(60 * var(--unit)); font-size: calc(12 * var(--unit)); color: var(--color-body); }
.footer-bottom>div { display: flex; gap: calc(24 * var(--unit)); }
.footer-bottom button { border: 0px; background: none; padding: 0px; color: inherit; font-size: inherit; }
.footer-bottom button:hover { text-decoration: underline; }
.civic-dialog { max-width: 640px !important; border: 1px solid var(--color-border); border-radius: 24px !important; padding: 36px !important; background: var(--color-white); max-height: 85dvh; overflow-y: auto; }
.civic-dialog [data-slot=dialog-title] { font-size: 36px; font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; }
.civic-dialog [data-slot=dialog-description] { font-size: 15px; color: var(--color-body); line-height: 1.5; margin-top: 8px; }
.civic-dialog .button { font-size: 14px; padding: 14px 20px; min-height: 46px; border-radius: 10px; }
.civic-dialog .button svg { height: 16px; width: 16px; }
.dialog-prose .button { justify-self: start; margin-top: 6px; }
.brief-heading .brand { font-size: 12px; gap: 4px; }
.brief-heading .brand svg { width: 14px; height: 14px; }
.mobile-sheet .brand { font-size: 18px; }
.mobile-sheet .brand svg { width: 18px; height: 18px; }
@media (max-width:1000px) and (min-width:761px){.desktop-nav { gap: 16px; margin-left: 0px; }
.desktop-nav a { font-size: 12px; }
.site-header { gap: 16px; }
.header-actions .button { font-size: 11px; }
.footer-column,.footer-brand p { font-size: 12px; }
.footer-bottom { font-size: 11px; }
}
@media (max-width:760px){:root { --unit: 1px; }
.frame { width: calc(100% - 40px); }
.site-header { height: 78px; gap: 16px; }
.brand { font-size: 16px; letter-spacing: 0.7px; }
.brand svg { width: 17px; height: 17px; }
.desktop-nav,.header-actions { display: none; }
.mobile-menu { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-border); background: white; border-radius: 12px; }
.mobile-menu svg { width: 21px; height: 21px; }
.button { font-size: 14px; min-height: 46px; padding: 13px 20px; gap: 12px; border-radius: 10px; }
.button svg { width: 16px; height: 16px; }
.hero-note>.button { margin: 0px; }
.how-copy>.button { margin-top: 24px; }
.value-copy>.button { margin-top: 24px; }
.email-field .button { font-size: 11px; min-height: 44px; padding: 10px 11px; border-radius: 7px; }
.site-footer { padding-top: 40px; }
.footer-main { grid-template-columns: repeat(3,1fr); gap: 32px 18px; padding-bottom: 36px; }
.footer-brand { grid-column: 1/-1; }
.footer-brand .brand { font-size: 17px; }
.footer-brand p { font-size: 14px; line-height: 1.8; margin-top: 12px; }
.footer-column { font-size: 12px; gap: 13px; line-height: 1.45; }
.footer-column h3 { font-size: 14px; margin-bottom: 4px; }
.footer-bottom { padding: 24px 0px 36px; font-size: 11px; align-items: flex-start; flex-direction: column; gap: 18px; }
.footer-bottom>div { gap: 24px; }
.civic-dialog { padding: 28px 22px !important; max-width: calc(100% - 32px) !important; }
.civic-dialog [data-slot=dialog-title] { font-size: 31px; }
.mobile-sheet .button { justify-content: center; color: var(--color-white); padding: 14px 20px; font-size: 16px; }
}
@media (max-width:380px){.email-field .button { width: 100%; }
.footer-main { gap: 28px 12px; }
}
.site-footer { padding-top: calc(130 * var(--unit)); }
.footer-main { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: calc(46 * var(--unit)); padding-bottom: calc(90 * var(--unit)); }
.footer-wordmark { display: flex; align-items: center; gap: calc(28 * var(--unit)); width: 100%; padding-bottom: calc(24 * var(--unit)); color: rgb(21, 21, 21); }
.footer-wordmark > svg { width: 9%; height: auto; stroke-width: 0.8; flex-shrink: 0; }
.footer-wordmark-text { font-family: Satoshi, Arial, sans-serif; font-weight: 400; font-size: clamp(20px, 10.2vw, 163px); line-height: 1; letter-spacing: 0.2em; white-space: nowrap; }
.footer-bottom { padding-bottom: calc(22 * var(--unit)); }
.button:hover { transform: translateY(-2px); }
@media (max-width:760px){.site-footer { padding-top: 72px; }
.footer-main { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 18px; padding-bottom: 48px; }
.footer-wordmark { gap: 10px; padding-bottom: 22px; }
.footer-wordmark-text { font-size: 8.4vw; }
.footer-bottom { padding-bottom: 24px; }
}
@media (prefers-reduced-motion:reduce){.button:hover { transform: none; }
}
[hidden] { display: none !important; }
dialog { color: rgb(1, 1, 1); border: 0px; margin: auto; }
dialog::backdrop { background: rgba(16, 22, 27, 0.6); backdrop-filter: blur(4px); }
.modal-close { display: block; margin: 0px 0px 16px auto; border: 0px; background: rgb(243, 244, 241); padding: 8px 12px; border-radius: 8px; }