html, body { overflow-x: clip; } body { margin: 0; background: #FAF8EE; color: #1F3629; font-family: 'Figtree', 'Avenir Next', system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: #24513A; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: #123122; }
.serif { font-family: 'Young Serif', Georgia, 'Times New Roman', serif; font-weight: 400; }
@keyframes notifFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.story-notif:not(.flipped) .sn-inner { animation: notifFloat 5.5s ease-in-out infinite; }
.story-notif.flipped .sn-inner { animation: none; }
@media (prefers-reduced-motion: reduce) { .story-notif .sn-inner { animation: none !important; } }
@media (max-width: 960px) { .carousel-wrap { padding-top: 36px !important; } }
.section-pad.carousel-wrap { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 720px) { .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent) !important; mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent) !important; } }
@media (max-width: 900px) { .resetgrid { grid-template-columns: 1fr !important; padding: 34px 28px !important; } .storygrid { grid-template-columns: 1fr !important; padding: 48px 30px !important; gap: 36px !important; } }
.story-notif { perspective: 900px; outline: none !important; -webkit-tap-highlight-color: transparent; }
.story-notif:focus-visible .sn-inner { outline: none; }
.sn-inner { position: relative; transition: transform 0.9s cubic-bezier(0.4, 0.1, 0.2, 1); transform-style: preserve-3d; }
.story-notif.flipped .sn-inner { transform: rotateY(180deg); }
.sn-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sn-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
.sn-backcard { width: 86%; background: #FFFEF9; border-radius: 22px; padding: 34px 28px 30px 28px; text-align: center; box-shadow: 0 22px 60px rgba(0,0,0,0.34); }
.sn-front img { -webkit-user-drag: none; }
.story-notif:hover .sn-inner { transform: translateY(-3px); }
.story-notif.flipped:hover .sn-inner { transform: rotateY(180deg); }
.wtop { padding: 26px 34px 0 34px; }
.wbar { height: 7px; background: #F0EDDE; border-radius: 99px; overflow: hidden; }
.wbar span { display: block; height: 100%; background: #D9F76C; border-radius: 99px; transition: width 0.35s ease; }
.wmeta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: #9A917F; letter-spacing: 1px; }
.wback { background: none; border: none; color: #24513A; font: inherit; font-weight: 800; cursor: pointer; font-size: 13px; }
.wbody, .wres { padding: 26px 44px 44px 44px; text-align: center; }
.wicon { width: 56px; height: 56px; border-radius: 16px; background: #EFF5E4; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.wq { font-size: 30px; line-height: 1.15; letter-spacing: -0.6px; color: #16301F; margin: 10px 0 8px 0; }
.whelp { font-size: 14.5px; font-weight: 600; color: #6B6353; margin: 0 0 10px 0; line-height: 1.6; }
.wopts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
.wopt { font: inherit; font-size: 15.5px; font-weight: 700; color: #33493B; background: #FFFEF9; border: 2px solid #E7E3D2; border-radius: 16px; padding: 15px 20px; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; text-align: left; }
.wopt:hover { border-color: #24513A; transform: translateY(-1px); }
.wopt.selected { background: #24513A; border-color: #24513A; color: #FAF8EE; }
.wgauge { position: relative; display: inline-block; margin-top: 8px; }
.wnum { position: absolute; left: 0; right: 0; bottom: 4px; font-weight: 800; }
.wnum span { font-size: 54px; font-family: 'Young Serif', Georgia, serif; color: #16301F; }
.wnum em { font-style: normal; font-size: 16px; color: #9A917F; }
.wroutes { text-align: left; margin: 24px auto 8px auto; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.wrl { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #7BA98C; margin-bottom: 2px; }
.wroute { display: flex; gap: 14px; background: #FAF8EE; border-radius: 16px; padding: 14px 18px; align-items: flex-start; }
.wroute.dim { opacity: 0.55; }
.wricon { flex: none; margin-top: 2px; }
.wroute strong { display: block; font-size: 15px; color: #16301F; }
.wroute div span { font-size: 13.5px; font-weight: 600; color: #6B6353; line-height: 1.5; }
.wsmall { font-size: 13px; font-weight: 600; color: #9A917F; max-width: 460px; margin: 14px auto 18px auto; line-height: 1.6; }
.wrec { display: block; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #7BA98C; margin: 14px 0 0 0; }
.wletter { display: inline-flex; align-items: center; justify-content: center; margin: 22px auto 0 auto; background: transparent; border: 2px solid #24513A; border-radius: 999px; color: #16301F; font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: 0.4px; padding: 13px 24px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.wletter:hover { background: #16301F; color: #D9F76C; }
.limebtn.noarrow { padding: 15px 28px; justify-content: center; }
.wagain { display: block; margin: 22px auto 0 auto; background: none; border: none; font: inherit; font-size: 13px; font-weight: 800; color: #9A917F; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .wbody, .wres { padding: 22px 22px 34px 22px; } .wq { font-size: 24px; } }
.tiers > .card { box-shadow: 0 6px 26px rgba(27, 61, 44, 0.07); }
@media (min-width: 961px) {
.tiers { gap: 22px !important; }
.tiers > .card:nth-child(2) { transform: translateY(-10px) scale(1.02); }
.tiers > .card:nth-child(2):hover { transform: translateY(-14px) scale(1.02); }
}
#exitcap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
#exitcap .ec-back { position: absolute; inset: 0; background: rgba(22, 48, 31, 0.55); }
#exitcap .ec-card { position: relative; background: #FFFEF9; border-radius: 24px; padding: 32px 36px; max-width: 440px; width: 100%; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); animation: ecIn 0.35s cubic-bezier(0.3, 0.8, 0.3, 1); }
@keyframes ecIn { from { opacity: 0; transform: translateY(22px) scale(0.97); } }
#exitcap .ec-x { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 26px; line-height: 1; color: #9A917F; cursor: pointer; font-family: inherit; }
#exitcap .ec-x:hover { color: #16301F; }
@media (prefers-reduced-motion: reduce) { #exitcap .ec-card { animation: none; } }
html[lang="de"] .hero-h1, html[lang="fr"] .hero-h1, html[lang="es"] .hero-h1 { font-size: 56px !important; letter-spacing: -1.5px !important; }
/* Freedom spacing: top state = full-width bar, brand far left, links centred, CTA far right */
.navwrap:not(.scrolled) .navpill { max-width: none !important; padding: 10px 6% 10px 6% !important; }
.navwrap:not(.scrolled) .navlinks { gap: 46px; }
.navwrap-dark:not(.scrolled) .navlinks a { color: #FAF8EE; font-size: 15.5px; }
.navwrap.scrolled .navword { display: none !important; }
.navwrap.scrolled .navlinks { gap: 40px; }
.navwrap.scrolled .navpill { padding-left: 22px !important; }
.prose > div { margin: 0 0 30px 0; }
.prose > div + h2 { margin-top: 46px; }
.prose > div + blockquote, .prose > p + blockquote { margin-top: 28px; }
.prose table { margin-bottom: 4px; }
h1, h2, h3 { text-wrap: balance; }
.tick { display: flex; gap: 10px; align-items: flex-start; }
.tick > span:first-child { flex: none; }
.tiers .card > a.limebtn, .tiers .card > a[class*="btn"] { margin-top: 22px !important; }
select:invalid { color: #9A917F; }
.navlogin { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #16301F; text-decoration: none; padding: 12px 6px; transition: color 0.2s ease; }
.navlogin:hover { color: #24513A; text-decoration: underline; text-underline-offset: 5px; }
.navwrap-dark:not(.scrolled) .navlogin { color: #FAF8EE; }
.navwrap-dark:not(.scrolled) .navlogin:hover { color: #D9F76C; }
.navwrap:not(.scrolled) .navstart { display: none !important; }
.navwrap.scrolled .navlogin { display: none !important; }
/* Procedure steps as dropdowns */
.step { border-radius: 22px; overflow: hidden; }
.step summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 22px 28px 22px 30px; }
.step summary::-webkit-details-marker { display: none; }
.step .stepnum { font-size: 34px; line-height: 1; width: 34px; flex: none; text-align: center; }
.step summary h3 { flex: 1; font-size: 22px; line-height: 1.2; }
.step .stepchev, .rung .stepchev { flex: none; width: 34px; height: 34px; border-radius: 999px; background: #F0EDDE; position: relative; transition: transform 0.25s ease, background 0.15s ease; }
.step .stepchev::before, .rung .stepchev::before { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-right: 2.5px solid #16301F; border-bottom: 2.5px solid #16301F; transform: rotate(45deg); }
.step[open] .stepchev { transform: rotate(180deg); }
.step summary:hover .stepchev { background: #D9F76C; }
.step-dark .stepchev { background: #2E5540; }
.step-dark .stepchev::before { border-color: #D9F76C; }
.step-dark summary:hover .stepchev { background: #D9F76C; }
.step-dark summary:hover .stepchev::before { border-color: #16301F; }
.step .stepbody { padding: 0 30px 28px 80px; animation: stepIn 0.28s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step .stepbody { animation: none; } }
@media (max-width: 720px) { .step summary { padding: 18px 18px 18px 20px; gap: 12px; } .step summary h3 { font-size: 18px; } .step .stepnum { font-size: 28px; width: 28px; } .step .stepbody { padding: 0 20px 22px 20px; } }
.penline { font-size: 96px; }
@media (max-width: 1100px) { .penline { font-size: 74px !important; letter-spacing: -2px !important; } }
@media (max-width: 720px) { .penline { font-size: 44px !important; letter-spacing: -1.2px !important; } }
/* Guide ladder: collapsible rungs (same behaviour as the How-it-works steps) */
.rung { border-radius: 24px; overflow: hidden; }
.rung summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 26px 32px; }
.rung summary::-webkit-details-marker { display: none; }
.rung .rungnum { font-size: 46px; line-height: 1; flex: none; width: 46px; text-align: center; }
.rung .rungtitle { margin: 0; font-size: 28px; color: #16301F; flex: 1; line-height: 1.15; }
.rung .rungpill { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: #FAF8EE; color: #4A7A5D; border-radius: 999px; padding: 5px 12px; white-space: nowrap; flex: none; }
.rung .rungbody { padding: 0 32px 30px 96px; animation: stepIn 0.28s ease; }
.rung[open] .stepchev { transform: rotate(180deg); }
.rung summary:hover .stepchev { background: #D9F76C; }
.rung-dark .rungtitle { color: #FAF8EE; }
.rung-dark .rungpill { background: #2E5540; color: #BFD9C6; }
.rung-dark .stepchev { background: #2E5540; }
.rung-dark .stepchev::before { border-color: #D9F76C; }
@media (max-width: 720px) {
.rung summary { padding: 18px 18px; gap: 12px; flex-wrap: wrap; }
.rung .rungnum { font-size: 34px; width: 34px; }
.rung .rungtitle { font-size: 21px; flex: 1 1 0; min-width: 0; order: 1; }
.rung .stepchev { order: 2; margin-left: auto; }
.rung .rungpill { order: 3; flex-basis: 100%; width: max-content; font-size: 11px; margin-top: 2px; }
.rung .rungbody { padding: 0 18px 22px 18px; }
}
/* Case portal */
.pt-card { background: #FFFEF9; border-radius: 22px; padding: 26px 28px; }
.pt-input { width: 100%; box-sizing: border-box; border: 2px solid #E7E3D2; border-radius: 14px; padding: 14px 16px; font-size: 16px; font-weight: 600; font-family: inherit; background: #FAF8EE; color: #16301F; }
.pt-input:focus { border-color: #24513A; outline: none; }
.pt-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #6B6353; margin: 0 0 6px 2px; }
.pt-pill { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.pt-steps { display: flex; align-items: flex-start; }
.pt-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #9A917F; position: relative; }
.pt-step .dot { width: 28px; height: 28px; border-radius: 999px; background: #F0EDDE; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #16301F; position: relative; z-index: 1; }
.pt-step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2.5px; background: #E7E3D2; }
.pt-step:first-child::before { display: none; }
.pt-step.done .dot, .pt-step.done::before, .pt-step.now::before { background: #D9F76C; }
.pt-step.done { color: #33493B; }
.pt-step.now .dot { background: #16301F; color: #D9F76C; box-shadow: 0 0 0 5px rgba(217,247,108,0.45); }
.pt-step.now { color: #16301F; }
.pt-ev { display: flex; gap: 16px; }
.pt-ev .rail { display: flex; flex-direction: column; align-items: center; }
.pt-ev .rail > span:first-child { width: 26px; height: 26px; border-radius: 999px; background: #24513A; color: #D9F76C; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; }
.pt-ev .rail > span:last-child { width: 2.5px; flex: 1; background: #D9F76C; }
.pt-ev:last-child .rail > span:last-child { background: transparent; }
.pt-ev .body { padding-bottom: 22px; min-width: 0; }
.pt-ev strong { font-size: 15.5px; color: #16301F; display: block; }
.pt-ev .when { font-size: 13px; font-weight: 600; color: #9A917F; display: block; margin-top: 2px; }
.pt-ev .note { font-size: 14.5px; font-weight: 500; color: #33493B; margin: 6px 0 0 0; line-height: 1.5; }
.pt-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-route { background: #FAF8EE; border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: #16301F; }
.pt-route small { display: block; font-size: 12px; font-weight: 600; color: #9A917F; margin-top: 2px; }
.pt-btn { border: none; cursor: pointer; font-family: inherit; }
.pt-link { color: #24513A; font-weight: 700; }
@media (max-width: 720px) { .pt-routes { grid-template-columns: 1fr; } .pt-step { font-size: 10.5px; gap: 6px; } .pt-card { padding: 22px 18px; } .portalwrap { padding-left: 20px !important; padding-right: 20px !important; } .pt-h { font-size: 23px !important; } }
/* Case desk */
.ad-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .ad-grid { grid-template-columns: 1fr; } }
.ad-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.ad-list button { width: 100%; text-align: left; background: #FFFEF9; border: 2px solid transparent; border-radius: 14px; padding: 12px 14px; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 700; color: #16301F; }
.ad-list button.sel { border-color: #24513A; }
.ad-list button small { display: block; font-weight: 600; color: #9A917F; font-size: 12px; }
.ad-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ad-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ad-3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .ad-2, .ad-3 { grid-template-columns: 1fr; } .ad-route { grid-template-columns: 1fr 1fr; } .ad-route > div:first-child { grid-column: 1 / -1; } }
.ad-ev { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: start; background: #FAF8EE; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.ad-ev .x { background: none; border: none; cursor: pointer; color: #9A917F; font-size: 18px; line-height: 1; padding: 0 4px; }
.ad-ev .x:hover { color: #B4432F; }
.ad-route { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: center; }
.ad-msg { font-size: 13.5px; font-weight: 700; color: #24513A; min-height: 18px; }
.ad-msg.err { color: #B4432F; }
/* ===== Phone pass ===== */
.footer-shell [style*="color: #628E74"] { color: #8FB79E !important; }
.footer-shell p a { color: #BFD9C6; text-underline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: #24513A; flex: none; }
.navburger { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; }
.navburger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #16301F; transition: transform 0.2s ease, opacity 0.2s ease; }
.navwrap-dark:not(.scrolled) .navburger span { background: #FAF8EE; }
.navmenu { display: none; position: fixed; left: 20px; right: 20px; top: 104px; z-index: 62; background: #FFFEF9; border-radius: 22px; box-shadow: 0 16px 48px rgba(27,61,44,0.18); padding: 10px; flex-direction: column; }
.navmenu a { display: block; padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 800; color: #16301F; text-decoration: none; }
.navmenu a:active, .navmenu a:hover { background: #F0EDDE; }
.navmenu .navmenu-start { background: #D9F76C; text-align: center; margin-top: 6px; }
#exitcap .ec-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1080px) {
.navburger { display: inline-flex; }
.navpill { justify-content: flex-start !important; }
.navwrap:not(.scrolled) .navlogin, .navwrap.scrolled .navstart { margin-left: auto; }
.navwrap.menu-open .navmenu { display: flex; }
.navwrap.menu-open .navburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.navwrap.menu-open .navburger span:nth-child(2) { opacity: 0; }
.navwrap.menu-open .navburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
@media (max-width: 720px) {
/* less dead space top and bottom */
.navlogo-ink, .navlogo-cream { height: 56px !important; }
.navwrap { min-height: 98px; }
.heroband { margin-top: -98px !important; padding-top: 98px !important; }
.navwrap + .section-pad, .navwrap + div > .section-pad:first-child, .navwrap + div > div:first-child > .section-pad:first-child { padding-top: 28px !important; }
.heroband > .section-pad { padding-top: 20px !important; padding-bottom: 36px !important; }
.heroband .herogrid > div:not(.phones) { padding: 0 0 4px 0 !important; }
.pageroot > div:has(+ .sitefoot), .pageroot > div:has(+ .footer-shell) { padding-bottom: 28px !important; }
.pageroot > .section-pad:not(:has(+ .footer-shell)), .pageroot > div > .section-pad { padding-bottom: 44px !important; }
.footer-shell { padding-top: 32px !important; }
.footer-shell > div { padding-top: 52px !important; padding-bottom: 28px !important; }
/* footer: tappable rows, readable small print */
.footer-shell .fsmall { font-size: 13px; display: inline-block; padding: 10px 6px; }
.footer-shell .flink { display: inline-block; padding: 10px 4px; }
.footer-shell [style*="font-size: 12px"], .footer-shell [style*="font-size: 12.5px"] { font-size: 13px !important; line-height: 1.6 !important; }
/* muted sage is decorative on desktop; on a phone in daylight it is text */
.pageroot [style*="color: #7BA98C"]:not(.navword span):not([style*="background: #1B3D2C"] *):not([style*="background: #24513A"] *):not([style*="background: #16301F"] *):not([style*="background: #2A2420"] *):not(.heroband *):not(.storygrid *):not(.footer-shell *) { color: #4A7A5D !important; }
/* chips never split mid-phrase */
.hl { white-space: nowrap; }
h1:has(.hl), h2:has(.hl), h3:has(.hl), p:has(.hl) { line-height: 1.3 !important; }
/* buttons */
.hero-cta-row .ghostbtn { min-height: 50px; justify-content: center; }
.hero-cta-row .limebtn { justify-content: center; font-size: 14px !important; padding: 13px 8px 13px 22px !important; }
#calcbtn { width: 100%; justify-content: center; }
/* five ways: numeral beside the words */
.fiveways > a.card:not([style*="justify-content: flex-end"]) { display: grid !important; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; text-align: left !important; padding: 16px 20px !important; }
.fiveways > a.card:not([style*="justify-content: flex-end"]) > .serif:first-child { grid-row: 1 / 3; font-size: 48px !important; letter-spacing: -1px !important; line-height: 1 !important; text-align: center; }
.fiveways > a.card:not([style*="justify-content: flex-end"]) > div:nth-child(2), .fiveways > a.card:not([style*="justify-content: flex-end"]) > div:nth-child(3) { margin-top: 0 !important; }
.fiveways > a.card[style*="justify-content: flex-end"] { padding: 22px 24px !important; }
.fiveways > a.card[style*="justify-content: flex-end"] > .serif { font-size: 30px !important; }
/* guide rungs */
.rung-head { flex-wrap: wrap; align-items: center !important; gap: 8px 14px !important; }
.rung-head > h2.serif { flex: 1 1 200px; font-size: 26px !important; }
.rung-head > span { flex-basis: 100%; width: max-content; order: 3; white-space: nowrap; }
.rung-head > div.serif { font-size: 44px !important; }
/* photo bands */
[style*="height: 540px"] { height: 300px !important; }
[style*="height: 540px"] > div[style*="padding: 48px 52px"] { padding: 24px 24px !important; }
/* blog */
a.card > div[style*="padding: 40px 42px"] { padding: 24px 22px !important; }
ol[style*="gap: 6px"] li a { display: block; padding: 5px 0; }
a[href="/blog"][style*="font-weight: 800"], a[href="/blog/"][style*="font-weight: 800"] { display: inline-block; padding: 11px 0; }
.godeeper a { display: block; padding: 9px 0; }
.godeeper .sep { display: none; }
/* thanks timeline cards */
.card:has(> span[style*="min-width: 92px"]) { flex-direction: column; gap: 4px; }
/* forms */
textarea { resize: none !important; }
/* headings */
div.serif { text-wrap: pretty; } p.serif { text-wrap: balance; }
.prose > h2:first-child { margin-top: 10px !important; }
[style*="padding: 30px 34px"], [style*="padding: 34px 38px"], [style*="padding: 36px 40px"], [style*="padding: 34px 30px"], [style*="padding: 30px 32px"] { padding: 22px 20px !important; }
[style*="padding: 56px 56px"], [style*="padding: 56px 48px"] { padding: 40px 22px !important; }
.pageroot [style*="color: #9A917F"]:not(.footer-shell *) { color: #6B6353 !important; }
.pageroot p[style*="font-size: 12.5px"]:not(.footer-shell *), .pageroot p[style*="font-size: 13px"]:not(.footer-shell *) { font-size: 13.5px !important; }
[style*="font-size: 10.5px"] { font-size: 11.5px !important; }
.section-pad > img.anim-in { display: none; }
.card[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > span:first-child { flex-basis: 100%; }
/* tables: rows become cards, each cell labelled by its column */
table.stack { min-width: 0 !important; width: 100%; font-size: 15px !important; }
table.stack thead, table.stack tr:has(> th), table.stack th { display: none; }
table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; box-sizing: border-box; }
table.stack tr { padding: 12px 0 10px 0; border-bottom: 1px solid #E7E3D2; }
table.stack tr:last-child { border-bottom: 0; }
table.stack td { padding: 3px 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; }
table.stack td:first-child { font-weight: 800; color: #16301F; padding-bottom: 6px !important; }
table.stack td[data-th]:not(:first-child)::before { content: attr(data-th); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #6B6353; margin: 6px 0 1px 0; }
table.stack td:empty { display: none; }
table.matrix.stack td:not(:first-child) { display: inline-block; width: auto; margin: 4px 8px 0 0; padding: 5px 11px !important; border-radius: 999px; background: #F0EDDE; font-size: 13px !important; }
table.matrix.stack td:not(:first-child)::before { display: inline; margin: 0 5px 0 0; font-size: 10.5px; }
table.matrix.stack td:not(:first-child):empty { display: none; }
table.matrix.stack td span[style*="font-size:11px"], table.matrix.stack td span[style*="font-size: 11px"] { display: block; font-weight: 600; }
}
/* Dynamic nav: integrated at top, white pill drops in on scroll */
.navwrap { min-height: 114px; box-sizing: border-box; position: relative; z-index: 60; }
.navpill { transition: background 0.25s ease, box-shadow 0.25s ease; }
.navwrap:not(.scrolled) .navpill { background: transparent !important; box-shadow: none !important; }
.navwrap-dark:not(.scrolled) .navword { color: #FAF8EE !important; }
.navwrap-dark:not(.scrolled) .navword span { color: #BFD9C6 !important; }
.navlogo-cream { display: none !important; }
.navwrap-dark:not(.scrolled) .navlogo-cream { display: block !important; }
.navwrap-dark:not(.scrolled) .navlogo-ink { display: none !important; }
.navwrap.scrolled .navpill { position: fixed; top: 14px; left: 20px; right: 20px; max-width: 880px; margin: 0 auto; z-index: 61; animation: navDrop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes navDrop { from { transform: translateY(-130%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .navwrap.scrolled .navpill { animation: none; } }
.navlinks { display: flex; gap: 30px; align-items: center; }
.navlinks a { font-size: 14.5px; font-weight: 700; color: #33493B; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; }
.navlinks a:hover { color: #16301F; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.navwrap-dark:not(.scrolled) .navlinks a { color: #FAF8EE; }
.navwrap-dark:not(.scrolled) .navlinks a:hover { color: #FAF8EE; }
@media (max-width: 760px) { .navlinks { display: none !important; } }
/* The pill is centred on the page, but its children are laid out with space-between and the
logo is far wider than the login/CTA on the right - which pushed the links 79px right of
centre at rest and 62px left once scrolled. Take them out of the flow and centre them on
the pill itself. Only above 960px, which is where the links are visible at all. */
@media (min-width: 1081px) {
.navpill { position: relative; }
.navlinks { position: absolute; left: 50%; transform: translateX(-50%); }
}
.fsmall { font-size: 12px; font-weight: 600; color: #8FB79E; text-decoration: none; }
.fsmall:hover { color: #BFD9C6; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) { .navlinks { display: none !important; } }
.limebtn { background: #D9F76C; color: #16301F; text-decoration: none; font-weight: 800; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; padding: 14px 8px 14px 26px; display: inline-flex; align-items: center; gap: 14px; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.limebtn:hover { background: #16301F !important; color: #D9F76C !important; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(27,61,44,0.22); }
.limebtn:hover .arrow { background: #D9F76C !important; }
.limebtn:hover .arrow svg path { stroke: #16301F !important; }
.limebtn .arrow { width: 34px; height: 34px; border-radius: 999px; background: #24513A; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 4px; }
.ghostbtn { color: #24513A; text-decoration: none; font-weight: 700; font-size: 15px; border: 2px solid #24513A33; border-radius: 999px; padding: 14px 26px; display: inline-flex; align-items: center; transition: background 0.12s ease; }
/* !important because these buttons carry an inline light colour where they sit on a dark
ground; without it the hover turns the background white and leaves cream-on-white. */
.ghostbtn:hover { background: #FFFFFF; color: #123122 !important; border-color: #FFFFFF; }
.navlink { color: #1F3629; text-decoration: none; font-size: 15px; font-weight: 600; }
.navlink:hover { color: #24513A; }
.flink { color: #BFD9C6; text-decoration: none; font-size: 14.5px; font-weight: 500; }
.flink:hover { color: #FAF8EE; }
.card { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(27,61,44,0.10); }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: #24513A; }
.prose p { margin: 0 0 16px 0; color: #33493B; }
.prose h2 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 28px; margin: 34px 0 10px 0; color: #16301F; }
.prose ul { margin: 0 0 16px 0; padding-left: 22px; color: #33493B; }
.prose li { margin-bottom: 8px; }
.ph { background: #D9F76C; color: #16301F; padding: 1px 8px; border-radius: 6px; font-weight: 800; }
.hl { font-style: normal; display: inline-block; line-height: 1.02; color: #16301F; background: #D9F76C; border-radius: 0.22em; padding: 0.01em 0.22em 0.05em 0.2em; margin-left: 0.16em; vertical-align: baseline; }
h1:has(.hl), h2:has(.hl), h3:has(.hl), p:has(.hl) { line-height: 1.24 !important; }
.limebtn .arrow svg { transition: transform 0.18s ease; }
.limebtn .arrow { overflow: hidden; }
.limebtn .arrow svg { display: block; }
.limebtn:hover .arrow svg { animation: arrowOutIn 0.55s cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes arrowOutIn { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(20px); opacity: 0; } 50% { transform: translateX(-20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .limebtn:hover .arrow svg { animation: none; } .limebtn:hover { transform: none; } }
.disc { background: #F0EDDE; border-radius: 14px; padding: 14px 20px; font-size: 14px; font-weight: 700; color: #6B6353; text-align: center; }
.disc strong { color: #16301F; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-10deg) translateY(-10px); } }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.anim-in { animation: heroIn 0.8s ease both; }
.anim-in-2 { animation: heroIn 0.8s 0.15s ease both; }
.anim-in-3 { animation: heroIn 0.8s 0.3s ease both; }
@media (prefers-reduced-motion: reduce) { .anim-in, .anim-in-2, .anim-in-3 { animation: none; } }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #D9F76C; outline-offset: 2px; border-radius: 6px; }
.g3 > *:nth-child(2), .g4 > *:nth-child(2) { transition-delay: 0.08s; }
.g3 > *:nth-child(3), .g4 > *:nth-child(3) { transition-delay: 0.16s; }
.g4 > *:nth-child(4) { transition-delay: 0.24s; }
#sent:target, #sent.show { display: block !important; }
.limebtn { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1200px) {
img.phones { width: 560px !important; left: -120px !important; top: 110px !important; height: auto !important; }
.heroband { min-height: 620px !important; }
}
@media (max-width: 960px) {
.phones { display: none !important; }
.herogrid { grid-template-columns: 1fr !important; }
}
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent); }
.marquee-track { display: flex; align-items: flex-end; width: max-content; animation: marquee 150s linear infinite; padding-bottom: 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee .chip { display: inline-flex; align-items: center; margin-right: 110px; }
.marquee .chip img { width: auto; display: block; }
.marquee .chip img.boxed { border-radius: 8px; } /* marks that are a solid brand block, not a free-standing wordmark */
.marquee2 .marquee-track { animation: marquee 74s linear infinite reverse; }
.marquee2 .chip { background: #1B3D2C; border-radius: 22px; padding: 20px 32px; margin-right: 22px; gap: 13px; }
.marquee2 .chip span { font-size: 15.5px; font-weight: 800; color: #FAF8EE; letter-spacing: 0.2px; white-space: nowrap; }
.marquee2 .chip svg { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@media (max-width: 700px) { .marquee .chip { margin-right: 56px; } .marquee .chip img { height: 34px !important; } .marquee2 .chip { padding: 14px 22px; } .marquee2 .chip span { font-size: 14px; } }
@media (max-width: 460px) { .navword { display: none !important; } }
@media (max-width: 720px) {
.hero-h1 { font-size: 38px !important; letter-spacing: -1px !important; }
.appstrip { margin-left: 0 !important; font-size: 11px !important; letter-spacing: 1.4px !important; }
h1, h2 { overflow-wrap: break-word; }
.h2-lg { font-size: 34px !important; }
.statnum { font-size: 58px !important; }
.hero-cta-row { flex-direction: column !important; align-items: stretch !important; }
.section-pad { padding-left: 20px !important; padding-right: 20px !important; }
.g2, .g3, .g4 { grid-template-columns: 1fr !important; }
a.card[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.navword { font-size: 14px !important; }
.limebtn { font-size: 13px !important; padding: 11px 6px 11px 18px !important; gap: 8px !important; }
.limebtn .arrow { width: 28px !important; height: 28px !important; }
.heroband { min-height: 0 !important; }
.phones { display: none !important; }
.herogrid { grid-template-columns: 1fr !important; }
.footer-row { flex-wrap: wrap !important; }
}
/* ---- Site footer -------------------------------------------------------------------
Column groups on the cream ground, then a full-bleed green band carrying an oversized
wordmark as the sign-off. Written late in the sheet so it beats the older
.footer-shell rules, which were written for a dark card and would otherwise put
pale-green link colour on cream. */
/* Full-bleed green ground; the cream block sits on it and curves away at its bottom corners,
so the green fills the corners rather than the other way round. */
.sitefoot { background: #1B3D2C; padding: 0; }
.footcream { background: #FAF8EE; border-top: 1px solid #E7E3D2; border-radius: 0 0 46px 46px; padding: 88px 0 60px 0; }
.sitefoot-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.fgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 44px 26px; }
.fgrid h3 { margin: 0 0 17px 0; font-size: 12.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: #7B8F82; }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sitefoot .fgrid a { font-size: 15px; font-weight: 600; color: #33493B; text-decoration: none; line-height: 1.35; }
.sitefoot .fgrid a:hover { color: #16301F; text-decoration: underline; text-underline-offset: 4px; }
.frule { margin-top: 54px; border-top: 1px solid #E7E3D2; padding-top: 22px; display: flex; gap: 12px 34px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.flegal, .flangs { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.sitefoot .flegal a, .sitefoot .flangs a { font-size: 13.5px; font-weight: 700; color: #6B6353; text-decoration: none; }
.sitefoot .flegal a:hover, .sitefoot .flangs a:hover { color: #16301F; text-decoration: underline; text-underline-offset: 3px; }
.sitefoot .fnote { max-width: 820px; margin: 24px 0 0 0; font-size: 13px; line-height: 1.7; color: #6B6353; }
.sitefoot .fnote strong { color: #16301F; }
.sitefoot .fnote a { color: #24513A; text-underline-offset: 3px; }
.sitefoot .fcopy { margin-top: 12px; color: #9A917F; }
.fmark { background: #1B3D2C; overflow: hidden; }
/* One height drives both halves, so the mark and the wordmark are literally the same
size and sit centred as a single lockup. 12vw is the largest value that still fits
mark + gap + wordmark (together 6.7x the shared height) inside a 390px screen. */
.fmark-in { --sign: clamp(36px, 11vw, 184px); max-width: none; margin: 0 auto;
padding: clamp(38px, 5vw, 84px) 24px clamp(34px, 4.4vw, 76px) 24px;
display: flex; align-items: center; justify-content: center; gap: clamp(2px, 0.9vw, 14px); }
/* the mark is the sign-off - the wordmark just labels it */
/* The mark's artwork only fills 54.6% of its own height, the wordmark's glyphs fill 88.8%
of theirs - so equal boxes look unequal. 1.63 is the ratio that makes the INK match. */
.fmark img { height: calc(var(--sign) * 1.63); width: auto; display: block; flex: none; }
/* The wordmark is 7.888em wide, so any font-size big enough to feel like a sign-off overflows
the viewport. An SVG with a measured viewBox scales to whatever width is left instead, and
textLength keeps it exact even if Figtree has not loaded. */
.fword { flex: 0 0 auto; height: var(--sign); width: auto; display: block; }
@media (max-width: 1080px) { .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
.footcream { padding: 56px 0 40px 0; border-radius: 0 0 30px 30px; }
.sitefoot-inner { padding: 0 22px; }
.fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
.sitefoot .fgrid a { font-size: 15.5px; }
.frule { margin-top: 40px; }
.fmark { margin-top: 0; }
.fmark-in { padding-left: 22px; padding-right: 22px; }
/* the older mobile rules targeted a dark card that no longer exists */
.sitefoot > div { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 359px) { .fgrid { grid-template-columns: 1fr; } }
/* ---- One-shot rail ------------------------------------------------------------------
A drag/swipe rail rather than a static grid: there are more apps than fit a row, and a
continuously-scrolling marquee would be unreadable for cards carrying quotes. */
/* Full-bleed, continuously rotating, infinite. Each card carries its own right margin
rather than the track using gap, so translateX(-50%) lands the duplicate set exactly on
the original and the loop has no seam. */
.osrail-wrap { position: relative; max-width: none; overflow: hidden; padding: 6px 0 46px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent); }
.osrail { display: flex; width: max-content; animation: osmarquee 132s linear infinite; }
@keyframes osmarquee { to { transform: translateX(-50%); } }
.oscard { flex: 0 0 300px; margin-right: 16px; background: #FFFEF9; border-radius: 22px;
padding: 24px 26px 26px 26px; box-shadow: 0 3px 16px rgba(27,61,44,0.07); }
.oscard .osapp { font-weight: 800; font-size: 18px; color: #16301F; margin-bottom: 8px; }
.oscard p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: #33493B; }
@media (max-width: 720px) {
.oscard { flex-basis: 268px; margin-right: 12px; padding: 20px 22px 22px 22px; }
.osrail-wrap { -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
}
@media (prefers-reduced-motion: reduce) { .osrail { animation: none; } }
/* ---- Mobile folding (mobile.js) -----------------------------------------------------
Never applies above 760px; the script does not even run there. */
@media (max-width: 760px) {
.mfold { border-top: 1px solid #E7E3D2; }
.mfold:last-of-type { border-bottom: 1px solid #E7E3D2; }
.mfold-h { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 18px 2px; margin: 0;
background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mfold-h > .faq-q { margin: 0 !important; flex: 1 1 auto; font-size: 16.5px !important; font-weight: 800 !important; line-height: 1.35 !important; }
.mfold-h > h2, .mfold-h > h3 { margin: 0 !important; flex: 1 1 auto; font-size: 21px !important; line-height: 1.25 !important; letter-spacing: -0.3px !important; text-align: left !important; }
.mfold-i { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 999px; background: #EFEADB; position: relative; transition: transform 0.18s ease, background 0.18s ease; }
.mfold-i::before, .mfold-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: #16301F; }
.mfold-i::after { transform: rotate(90deg); transition: opacity 0.18s ease; }
.mfold.open .mfold-i { background: #D9F76C; }
.mfold.open .mfold-i::after { opacity: 0; }
.mfold-b { padding: 0 2px 22px 2px; }
.mfold-b > :first-child { margin-top: 0 !important; }
.mfold-h:focus-visible { outline: 2px solid #24513A; outline-offset: 2px; border-radius: 8px; }
/* the dark cards carry their own rules */
[style*="background: #1B3D2C"] .mfold, [style*="background: #2A2420"] .mfold { border-color: #3E5548; }
[style*="background: #1B3D2C"] .mfold-i, [style*="background: #2A2420"] .mfold-i { background: #2E5540; }
[style*="background: #1B3D2C"] .mfold-i::before, [style*="background: #1B3D2C"] .mfold-i::after,
[style*="background: #2A2420"] .mfold-i::before, [style*="background: #2A2420"] .mfold-i::after { background: #FAF8EE; }
/* Nothing under 13px on a phone. The site sets small sizes inline, so this has to be
specific enough to beat them. */
.pageroot [style*="font-size: 10"], .pageroot [style*="font-size: 11"],
.pageroot [style*="font-size: 12px"], .pageroot [style*="font-size: 12."] { font-size: 13px !important; line-height: 1.6 !important; }
.mfold-b > :last-child { margin-bottom: 0 !important; }
/* general mobile breathing: less padding, tighter type, no orphaned wide grids */
.section-pad { padding-left: 20px !important; padding-right: 20px !important; }
.prose h2 { font-size: 24px !important; line-height: 1.22 !important; }
.prose p, .prose li { font-size: 16px !important; line-height: 1.62 !important; }
}
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }