. Without this guard these rules leaked, unscoped, onto body.sk-page's redesigned sections too, double-padding some of them (see the explicit padding added to .sk-trust/.sk-integrations/.sk-collage/.sk-dark/.sk-pricing/ .sk-bottom-cta below) and silently cancelling .sk-bottom-cta's own border via higher specificity from :last-of-type. */ body:not(.sk-page) section { padding: 40px 0; border-bottom: 1px solid var(--border); } body:not(.sk-page) section:last-of-type { border-bottom: none; } h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 12px; } h2 { font-size: 1.4rem; margin: 0 0 12px; } p { margin: 0 0 14px; } .lede { font-size: 1.05rem; color: var(--muted); } .tagline { font-style: italic; color: var(--muted); } ul.feature-loop { list-style: none; margin: 0; padding: 0; } ul.feature-loop li { margin: 0 0 16px; padding-left: 0; } .faq dt { font-weight: 700; margin-top: 16px; } .faq dd { margin: 4px 0 0; color: var(--muted); } /* --- Signup form (posts directly to Buttondown -- see form action) --- */ form.signup { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } form.signup input[type="email"] { flex: 1 1 220px; padding: 12px 14px; font-size: 1rem; border: 1px solid var(--border); border-radius: 6px; } form.signup button { padding: 12px 20px; font-size: 1rem; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 6px; cursor: pointer; } form.signup button:hover { background: var(--accent-dark); } .checklist-steps li { margin-bottom: 18px; } .checklist-steps h3 { margin: 0 0 6px; } .cite { font-size: 0.85rem; color: var(--muted); } footer.site-footer { padding: 32px 0 48px; color: var(--muted); font-size: 0.85rem; } footer.site-footer a { color: var(--muted); } footer.site-footer .trademark { margin-top: 8px; } @media (min-width: 640px) { h1 { font-size: 2.4rem; } body:not(.sk-page) section { padding: 56px 0; } } /* ========================================================================= S2 landing-page redesign -- index.html-only rules under body.sk-page. Font: the native system-ui stack (2026-07-12 -- previously 3 separate self-hosted webfonts, which didn't match the 6 widget iframes below, each of which already renders in this exact stack. One shared stack everywhere means the page and its widgets finally look like one typeface instead of visibly different fonts sitting side by side. ========================================================================= */ body.sk-page { margin: 0; background: #faf9f4; color: #283618; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; } .sk-page * { box-sizing: border-box; } .sk-page a { color: #606c38; text-decoration: none; } .sk-page a:hover { color: #47542a; } .sk-page ::selection { background: #b7ba94; color: #283618; } @keyframes sk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } } @media (prefers-reduced-motion: reduce) { .sk-page * { animation: none !important; } } .sk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; } .sk-wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; } .sk-center { text-align: center; } .sk-center-text { text-align: center; } .sk-border-b { border-bottom: 1px solid #e6e8e2; } .sk-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #faf9f4; pointer-events: none; } .sk-bg-fine { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(19, 33, 27, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(19, 33, 27, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(125% 95% at 50% -5%, #000 42%, transparent 92%); mask-image: radial-gradient(125% 95% at 50% -5%, #000 42%, transparent 92%); } .sk-bg-wide { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(15, 122, 82, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 122, 82, .06) 1px, transparent 1px); background-size: 280px 280px; -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 85%); mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 85%); } .sk-announce { position: relative; background: #283618; color: #dfeee6; text-align: center; font-size: 13.5px; padding: 9px 20px; } .sk-announce-tag { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #dda15e; } .sk-announce-link { color: #dda15e !important; font-weight: 600; border-bottom: 1px solid rgba(221, 161, 94, .45); } .sk-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 249, 244, .82); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid #e6e8e2; } .sk-header-row { padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .sk-logo { display: flex; align-items: center; gap: 10px; color: #283618 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; } .sk-logo-mark { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: #606c38; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(96, 108, 56, .35); } .sk-logo-mark-sm { width: 24px; height: 24px; border-radius: 7px; } .sk-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .sk-nav a:not(.sk-btn) { color: #485339 !important; font-size: 15px; font-weight: 500; } .sk-btn { display: inline-flex; align-items: center; justify-content: center; background: #606c38; color: #fff !important; padding: 9px 17px; border: none; border-radius: 9px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; text-align: center; } .sk-btn:hover { background: #47542a; color: #fff !important; } .sk-btn-sm { padding: 9px 17px; } .sk-btn-block { display: flex; width: 100%; margin-top: 6px; padding: 14px; font-size: 16px; box-shadow: 0 2px 8px rgba(96, 108, 56, .28); } .sk-section { padding: 24px 0 32px; } .sk-hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 48px; align-items: center; padding-top: 24px; padding-bottom: 32px; } .sk-eyebrow-pill { display: inline-flex; align-items: center; gap: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #885920; background: #f1e5d7; border: 1px solid #e4c8ac; padding: 6px 12px; border-radius: 999px; } .sk-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #bc6c25; animation: sk-pulse 1.9s ease-in-out infinite; } .sk-days-left { color: #885920; } .sk-h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; margin: 22px 0 0; color: #283618; } .sk-lede { font-size: 19px; line-height: 1.55; color: #485339; margin: 20px 0 0; max-width: 520px; } .sk-lede strong { color: #283618; } .sk-form { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 0; max-width: 520px; } .sk-form-center { margin-left: auto; margin-right: auto; justify-content: center; } .sk-input { flex: 1 1 240px; padding: 14px 16px; font-size: 16px; font-family: inherit; color: #283618; background: #fff; border: 1px solid #d9dcd3; border-radius: 11px; outline: none; } .sk-input:focus { border-color: #606c38; box-shadow: 0 0 0 3px rgba(96, 108, 56, .14); } .sk-check-line { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #67715a; margin: 16px 0 0; } .sk-check-line strong { color: #283618; font-weight: 600; } .sk-hero-mock { position: relative; } .sk-hero-mock-backdrop { position: absolute; inset: 14px -10px -14px 24px; background: linear-gradient(160deg, #eaf4ee, #f5efe6); border-radius: 20px; transform: rotate(1.4deg); } .sk-widget-frame { position: relative; display: block; width: 100%; border: 0; background: transparent; z-index: 1; } .sk-widget-frame-narrow { max-width: 1120px; margin: 0 auto; } .sk-widget-frame-block { margin-top: 14px; } .sk-integrations { background: #fbfbf8; padding: 40px 0; } .sk-integ-list { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; font-size: 15px; font-weight: 600; color: #485339; } .sk-integ-list span { display: flex; align-items: center; gap: 9px; } .sk-integ-ic { flex: none; } @media (min-width: 860px) { .sk-integ-list { flex-wrap: nowrap; justify-content: space-between; gap: 24px; } } .sk-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #606c38; } .sk-eyebrow-rust { color: #885920; } .sk-h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -.025em; margin: 10px 0 0; color: #283618; } .sk-body { font-size: 16.5px; line-height: 1.6; color: #485339; margin: 8px 0 0; } .sk-body-narrow { max-width: 560px; } .sk-body-center { margin-left: auto; margin-right: auto; } .sk-urgency-card { background: #fff; border: 1px solid #e2e5dd; border-left: 4px solid #bc6c25; border-radius: 14px; max-width: 940px; margin: 26px auto 0; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; box-shadow: 0 10px 30px -20px rgba(19, 33, 27, .25); } .sk-urgency-card .sk-h2 { font-size: 24px; } .sk-checklist-link { margin: 12px 0 0; } .sk-checklist-link a { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; } .sk-urgency-widget { display: flex; justify-content: center; align-items: center; } .sk-loop-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; } .sk-loop-item { background: #fff; border: 1px solid #e2e5dd; border-radius: 14px; padding: 20px 22px; } .sk-loop-head { display: flex; align-items: center; gap: 12px; } .sk-loop-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .sk-loop-icon-po { background: #ddedf1; } .sk-loop-icon-rec { background: #f7e3d5; } .sk-loop-icon-lab { background: #e8e3f8; } .sk-loop-icon-cnt { background: #f5e9cd; } .sk-loop-h { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 17px; color: #283618; margin: 0; } .sk-loop-h-note { font-weight: 500; font-size: 13px; color: #67715a; } .sk-loop-p { font-size: 15px; line-height: 1.55; color: #485339; margin: 6px 0 0; } .sk-collage { background: #eef3ec; padding: 36px 0; } .sk-shop-grid { padding: 18px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .sk-shop-list { display: grid; gap: 12px; margin-top: 22px; } .sk-shop-item { display: flex; gap: 11px; font-size: 16px; color: #485339; } .sk-shop-item svg { flex: none; margin-top: 1px; } .sk-scene-wrap { position: relative; display: flex; justify-content: center; } .sk-pricing { background: #f4f2ea; padding: 56px 0; } .sk-price-card { max-width: 440px; margin: 16px auto 0; background: #fff; border: 1px solid #e2e5dd; border-radius: 18px; box-shadow: 0 20px 50px -28px rgba(19, 33, 27, .32); overflow: hidden; text-align: left; } .sk-price-card-top { padding: 30px 32px 26px; border-bottom: 1px solid #eef0ea; } .sk-price-card-amt { display: flex; align-items: baseline; gap: 4px; } .sk-price-card-amt span:first-child { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 44px; letter-spacing: -.03em; color: #283618; } .sk-price-card-per { font-size: 17px; color: #67715a; } .sk-price-card-note { font-size: 14.5px; color: #67715a; /* 5.14:1 on white, passes WCAG AA (4.5:1) for normal text. Matches .sk-footer-links. */ margin-top: 2px; } .sk-price-card-body { padding: 24px 32px 30px; display: grid; gap: 13px; } .sk-founding-callout { margin-top: 8px; padding: 15px 16px; background: #e8e8dd; border: 1px solid #cfd2bf; border-radius: 11px; font-size: 14.5px; line-height: 1.5; color: #4f5c2e; } .sk-faq-list { margin-top: 20px; display: grid; gap: 0; } .sk-faq-item { padding: 16px 0; } .sk-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 18px; color: #283618; } .sk-faq-q::-webkit-details-marker { display: none; } .sk-faq-chevron { flex: none; color: #67715a; transition: transform .2s; } .sk-faq-item[open] .sk-faq-chevron { transform: rotate(180deg); } .sk-faq-a { font-size: 16px; line-height: 1.6; color: #485339; margin-top: 10px; max-width: 720px; } .sk-bottom-cta { background: #eaf4ee; border-bottom: 1px solid #d4e4da; padding: 18px 0; } .sk-bottom-cta .sk-wrap-narrow { padding: 20px 28px; } .sk-footer { background: #faf9f4; } .sk-footer-row { padding: 26px 28px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .sk-footer-logo { display: flex; align-items: center; gap: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 18px; color: #283618; } .sk-footer-links { font-size: 14px; color: #67715a; display: flex; gap: 18px; } .sk-footer-links a { color: #67715a !important; } .sk-footer-trademark { font-size: 12.5px; color: #67715a; /* 5.14:1 on #faf9f4, passes WCAG AA (4.5:1) for normal text. */ margin: 0 0 32px; max-width: 640px; } @media (max-width: 640px) { .sk-header-row { flex-wrap: wrap; row-gap: 10px; } .sk-nav { width: 100%; justify-content: center; gap: 10px 20px; } } @media (max-width: 860px) { .sk-h1 { font-size: 32px; } .sk-hero-grid, .sk-shop-grid, .sk-urgency-card, .sk-loop-grid { grid-template-columns: 1fr; } .sk-urgency-widget { margin-top: 20px; } .sk-h2 { font-size: 26px; } }