:root { --ink: #1b1b2b; --body: #4b4b5c; --muted: #757586; --cream: #fbf7ef; --cream-2: #f4eddf; --white: #fff; --green: #9cd95b; --green-deep: #5f942f; --mint: #e5f6d3; --peach: #ffe0d1; --butter: #ffedba; --sky: #d8ebff; --lilac: #ece1ff; --line: #ded7ca; --radius: 20px; --radius-lg: 34px; --max: 1200px; --shadow: 7px 7px 0 var(--ink); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: "Plus Jakarta Sans", system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } img, svg { max-width: 100%; } button, input { font: inherit; } .wrap { width: min(var(--max), calc(100% - 2.5rem)); margin-inline: auto; } .narrow { max-width: 850px; } .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--ink); color: white; padding: .8rem 1rem; border-radius: 8px; } .skip-link:focus { top: 1rem; } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,247,239,.94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(27,27,43,.12); } .nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-size: .97rem; font-weight: 600; letter-spacing: -.02em; } .brand strong { font-weight: 800; } .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--green); border: 2px solid var(--ink); border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; } .brand-mark img { width: 27px; height: 27px; object-fit: contain; } .site-nav { display: flex; align-items: center; gap: 1.35rem; } .site-nav a { text-decoration: none; font-size: .88rem; font-weight: 700; } .site-nav a:not(.nav-cta):hover { color: var(--green-deep); } .nav-cta { padding: .7rem 1.15rem; border-radius: 999px; background: var(--ink); color: white; } .nav-toggle { display: none; border: 2px solid var(--ink); background: white; border-radius: 999px; padding: .5rem .85rem; font-weight: 700; } .hero { overflow: hidden; } .home-hero { padding: clamp(4.5rem, 9vw, 8rem) 0; } .page-hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem); } .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; } h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(2.55rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -.055em; margin-bottom: 1.4rem; text-wrap: balance; } .page-hero h1 { font-size: clamp(2.45rem, 5vw, 4.35rem); } h2 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; } h3 { line-height: 1.25; letter-spacing: -.02em; } .lead { max-width: 670px; color: var(--body); font-size: clamp(1.08rem, 1.8vw, 1.28rem); font-weight: 500; line-height: 1.65; } .body-large { color: var(--body); font-size: 1.08rem; font-weight: 500; } .eyebrow { display: inline-flex; margin-bottom: 1rem; padding: .38rem .75rem; border: 2px solid var(--ink); border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; } .eyebrow.green { background: var(--green); } .eyebrow.peach { background: var(--peach); } .eyebrow.butter { background: var(--butter); } .eyebrow.sky { background: var(--sky); } .eyebrow.lilac { background: var(--lilac); } .eyebrow.dark-green { background: var(--green); color: var(--ink); } .cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; } .btn { display: inline-flex; justify-content: center; align-items: center; gap: .45rem; min-height: 50px; padding: .75rem 1.35rem; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none; font-size: .92rem; font-weight: 800; transition: transform .16s, box-shadow .16s; } .btn:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--ink); } .btn-dark { background: var(--ink); color: white; } .btn-ghost { background: white; color: var(--ink); } .chrome-icon { width: 1.22rem; height: 1.22rem; flex: 0 0 auto; } .nav-cta { display: inline-flex; align-items: center; gap: .45rem; } .microcopy { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; font-weight: 600; } .rating-badge { display: inline-flex; align-items: baseline; gap: .38rem; margin-top: 1.1rem; padding: .55rem .8rem; background: var(--butter); border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); } .rating-badge:hover { transform: translateY(-2px); } .rating-star { color: #d58b00; font-size: 1.05rem; } .rating-badge strong { font-size: 1rem; } .rating-badge > span:not(.rating-star) { font-size: .78rem; font-weight: 700; } .rating-badge small { padding-left: .45rem; border-left: 1px solid rgba(27, 27, 43, .25); color: var(--body); font-size: .68rem; font-weight: 700; } .hero-art { position: relative; padding: 1rem; } .blob { position: absolute; inset: -6% -8%; background: var(--green); opacity: .3; border-radius: 46% 54% 58% 42% / 60% 44% 56% 40%; transform: rotate(-4deg); } .browser-card { position: relative; z-index: 2; overflow: hidden; background: white; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 12px 12px 0 var(--ink); } .browser-top { display: flex; align-items: center; gap: .4rem; padding: .75rem .85rem; background: var(--cream-2); border-bottom: 2px solid var(--ink); } .browser-top i { width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; background: #ff6b5e; } .browser-top i:nth-child(2) { background: #ffce47; } .browser-top i:nth-child(3) { background: #4ccb6b; } .browser-top span { flex: 1; color: var(--muted); font-size: .68rem; text-align: center; font-weight: 700; } .browser-body { padding: clamp(1.25rem, 4vw, 2.25rem); } .source-card { display: grid; grid-template-columns: auto 1fr; gap: .4rem .7rem; padding: 1.15rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--sky); } .source-card strong { align-self: center; } .source-card small { grid-column: 2; color: var(--body); font-weight: 600; } .type { display: inline-flex; align-items: center; width: fit-content; padding: .22rem .5rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sky); font-size: .65rem; font-weight: 800; text-transform: uppercase; } .export-arrow { padding: 1rem 0; text-align: center; color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; } .format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; } .format-grid span { padding: .75rem .4rem; border: 2px solid var(--ink); border-radius: 11px; background: var(--mint); text-align: center; font-size: .78rem; font-weight: 800; } .format-grid span:nth-child(2n) { background: var(--butter); } .format-grid span:nth-child(3n) { background: var(--peach); } .sticker { position: absolute; z-index: 3; padding: .42rem .7rem; background: white; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); font-size: .72rem; font-weight: 800; } .sticker-top { top: -12px; left: -8px; transform: rotate(-5deg); } .sticker-bottom { right: -12px; bottom: -8px; transform: rotate(4deg); } .compact-art .mock-title { margin: 1rem 0 .5rem; color: var(--ink); font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 800; line-height: 1.05; } .mini-lines { display: grid; gap: .45rem; margin: 1.25rem 0; } .mini-lines i { width: 100%; height: 9px; background: var(--cream-2); border-radius: 99px; } .mini-lines i:nth-child(2) { width: 84%; } .mini-lines i:nth-child(3) { width: 63%; } .mock-button { display: inline-block; padding: .6rem 1.2rem; background: var(--green); border: 2px solid var(--ink); border-radius: 999px; font-size: .78rem; font-weight: 800; } .section { padding: clamp(4rem, 8vw, 7rem) 0; } .section-head { max-width: 720px; margin-bottom: 2.5rem; } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { color: var(--body); font-size: 1.05rem; } .dark-band { background: var(--ink); color: white; } .statement { max-width: 980px; text-align: center; } .statement h2 { color: white; } .statement > p { margin: 1.25rem auto 0; max-width: 800px; color: #cfcfdd; font-size: 1.08rem; } .mark { background: linear-gradient(transparent 60%, var(--green) 60%); } .split-statement { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: center; max-width: var(--max); text-align: left; } .split-statement p { margin: 0; font-size: 1.12rem; } .hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .hub-card { min-height: 270px; padding: 2rem; border: 2px solid var(--ink); border-radius: var(--radius); text-decoration: none; transition: transform .16s, box-shadow .16s; } .hub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .hub-card.mint { background: var(--mint); } .hub-card.sky { background: var(--sky); } .hub-card.peach { background: var(--peach); } .hub-card.butter { background: var(--butter); } .card-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 2rem; background: white; border: 2px solid var(--ink); border-radius: 13px; font-weight: 800; } .hub-card h3 { font-size: 1.45rem; } .hub-card p { color: var(--body); } .hub-card strong { font-size: .86rem; } .contrast-section { background: var(--cream-2); border-block: 1px solid var(--line); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; } .align-start { align-items: start; } .truth-card { padding: 2rem; background: white; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); } .truth-card h3 { font-size: 1.4rem; } .truth-card div { display: grid; gap: .2rem; padding: 1rem 0; border-top: 1px solid var(--line); } .truth-card span { color: var(--body); font-size: .9rem; } .benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .benefit { min-height: 130px; padding: 1.25rem; background: white; border: 2px solid var(--ink); border-radius: 16px; } .benefit:nth-child(2) { background: var(--peach); } .benefit:nth-child(3) { background: var(--sky); } .benefit:nth-child(4) { background: var(--butter); } .benefit span { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: .8rem; background: var(--green); border: 2px solid var(--ink); border-radius: 50%; font-weight: 800; } .benefit p { margin: 0; font-weight: 700; } .source-note { color: var(--muted); font-size: .8rem; font-weight: 600; } .answer-section { padding-top: 1rem; } .answer-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } .answer-copy { max-width: 760px; color: var(--body); font-size: clamp(1.05rem, 1.7vw, 1.22rem); font-weight: 500; line-height: 1.75; } .check-card { padding: 1.6rem; background: var(--sky); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); } .check-card h3 { margin-bottom: 1rem; } .check-card ul { display: grid; gap: .85rem; padding: 0; margin: 0; list-style: none; } .check-card li { display: grid; grid-template-columns: 28px 1fr; gap: .7rem; align-items: start; color: var(--body); font-size: .88rem; font-weight: 600; } .check-card li span { width: 28px; height: 28px; display: grid; place-items: center; background: var(--green); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font-size: .7rem; font-weight: 800; } .extension-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.25rem; } .extension-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 330px; padding: 2rem; background: white; border: 2px solid var(--ink); border-radius: var(--radius); } .extension-card:first-child { background: var(--mint); } .extension-card:nth-child(2) { background: var(--lilac); } .extension-card:nth-child(3) { background: var(--butter); } .extension-kicker { margin-bottom: 1.5rem; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; } .extension-card h3 { font-size: 1.3rem; } .extension-card p { color: var(--body); } .extension-card .btn { margin-top: auto; } .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .step { min-height: 170px; padding: 1.25rem; background: white; border: 2px solid var(--ink); border-radius: 16px; } .step:nth-child(2) { background: var(--butter); } .step:nth-child(3) { background: var(--peach); } .step:nth-child(4) { background: var(--sky); } .step:nth-child(5) { background: var(--lilac); } .step span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 1.4rem; background: var(--green); border: 2px solid var(--ink); border-radius: 50%; font-weight: 800; } .step h3 { font-size: .98rem; } .center-action { margin-top: 2rem; text-align: center; } .use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .use-grid > div { padding: 1.5rem; border-top: 3px solid var(--ink); } .use-grid span { color: var(--green-deep); font-size: .72rem; font-weight: 800; } .use-grid h3 { margin: .8rem 0 0; font-size: 1.1rem; } .details-section { background: var(--ink); color: white; } .detail-row { display: grid; grid-template-columns: 120px 1fr; gap: 2rem; max-width: 900px; padding: 3rem 0; border-top: 1px solid #454556; } .detail-row.flip { margin-left: auto; } .detail-number { color: var(--green); font-size: 3rem; font-weight: 800; line-height: 1; } .detail-row h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } .detail-row p { max-width: 720px; color: #cfcfdd; font-size: 1.05rem; } .related-section { background: var(--cream-2); } .query-section { background: var(--cream-2); border-block: 1px solid var(--line); } .query-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .query-grid article { padding: 1.5rem; background: white; border: 2px solid var(--ink); border-radius: 16px; } .query-grid article:nth-child(2) { background: var(--mint); } .query-grid article:nth-child(3) { background: var(--butter); } .query-grid h3 { font-size: 1.05rem; } .query-grid p { margin: 0; color: var(--body); font-size: .9rem; } .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .related-grid a { padding: 1.6rem; background: white; border: 2px solid var(--ink); border-radius: 16px; text-decoration: none; transition: transform .16s, box-shadow .16s; } .related-grid a:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .related-grid span { color: var(--green-deep); font-size: .68rem; font-weight: 800; text-transform: uppercase; } .related-grid h3 { margin: .7rem 0; font-size: 1.2rem; } .related-grid p { color: var(--body); font-size: .88rem; } .related-grid strong { font-size: .8rem; } .faq-section { background: var(--cream); } .faq-list { display: grid; gap: .8rem; } .faq-item { overflow: hidden; background: white; border: 2px solid var(--ink); border-radius: 16px; } .faq-item[open] { background: var(--mint); } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; cursor: pointer; list-style: none; font-weight: 800; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; background: white; border: 2px solid var(--ink); border-radius: 50%; font-size: 1.2rem; transition: transform .2s; } .faq-item[open] summary span { background: var(--green); transform: rotate(45deg); } .faq-item p { padding: 0 1.3rem 1.3rem; margin: 0; color: var(--body); } .sources-section { padding-top: 0; } .sources-section .narrow { padding-top: 2rem; border-top: 1px solid var(--line); } .sources-section h2 { font-size: 1.25rem; } .sources-section p, .sources-section li { color: var(--muted); font-size: .82rem; } .sources-section a { color: var(--green-deep); font-weight: 700; } .final-section { padding-top: 0; } .final-cta { padding: clamp(2.8rem, 6vw, 5rem); background: var(--green); border: 2px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 10px 10px 0 var(--ink); text-align: center; } .final-cta p { max-width: 700px; margin: 0 auto 1.8rem; color: #33411e; font-size: 1.05rem; font-weight: 600; } .error-page { min-height: 68vh; display: grid; align-items: center; padding: clamp(4rem, 9vw, 8rem) 0; } .error-layout { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(2rem, 7vw, 7rem); } .error-layout h1 { max-width: 780px; } .error-layout .lead { max-width: 720px; } .error-card { padding: clamp(2rem, 5vw, 4rem); background: var(--butter); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 12px 12px 0 var(--ink); transform: rotate(2deg); text-align: center; } .error-card span { display: block; color: var(--green-deep); font-size: clamp(4rem, 10vw, 8rem); font-weight: 800; line-height: 1; } .error-card strong { display: block; margin-top: 1rem; font-size: 1.35rem; } .error-card p { margin: .5rem 0 0; color: var(--body); } .trust-hero { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--cream-2); border-bottom: 2px solid var(--ink); } .trust-hero h1 { max-width: 850px; } .trust-updated { margin: 1.5rem 0 0; color: var(--muted); font-size: .8rem; font-weight: 700; } .trust-content { background: white; } .contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; padding: 1.5rem; background: var(--mint); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); } .contact-card span { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .contact-card a { color: var(--ink); font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 800; } .trust-section { display: grid; grid-template-columns: 70px 1fr; gap: 1.5rem; padding: 2.5rem 0; border-top: 2px solid var(--ink); } .trust-number { color: var(--green-deep); font-size: 1rem; font-weight: 800; } .trust-section h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); } .trust-section p, .trust-section li { color: var(--body); font-size: 1rem; line-height: 1.75; } .trust-section ul { display: grid; gap: .65rem; padding-left: 1.25rem; } .breadcrumb-wrap { padding-top: 1.5rem; } .breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; color: var(--muted); font-size: .78rem; font-weight: 700; } .breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .45rem; color: var(--ink); } .breadcrumb a { color: var(--green-deep); text-decoration: none; } .site-footer { padding: 5rem 0 1.5rem; background: var(--ink); color: white; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; } .footer-brand { margin-bottom: 1.2rem; color: white; } .footer-grid p { max-width: 460px; color: #c5c5d3; font-size: .86rem; } .footer-grid .disclaimer { color: #8f8fa0; font-size: .72rem; } .footer-grid h2 { margin-bottom: 1rem; color: var(--green); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .footer-grid > div > a:not(.brand) { display: block; margin-bottom: .7rem; color: #c5c5d3; text-decoration: none; font-size: .76rem; } .footer-grid > div > a:hover { color: white; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid #3b3b4c; color: #8f8fa0; font-size: .72rem; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; } .footer-bottom a { color: #c5c5d3; text-decoration: none; font-weight: 700; } .footer-bottom a:hover { color: white; } @media (max-width: 980px) { .hero-grid, .two-col, .split-statement, .answer-layout, .error-layout { grid-template-columns: 1fr; } .hero-grid { gap: 4rem; } .hero-art { max-width: 650px; margin-inline: auto; width: 100%; } .split-statement { gap: 1rem; } .steps { grid-template-columns: repeat(3, 1fr); } .extension-grid { grid-template-columns: 1fr 1fr; } .extension-card:first-child { grid-column: 1 / -1; } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } @media (max-width: 760px) { .nav-toggle { display: block; } .site-nav { position: absolute; inset: 72px 1rem auto; display: none; align-items: stretch; flex-direction: column; padding: 1rem; background: white; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); } .site-nav.is-open { display: flex; } .site-nav a { padding: .45rem; } .nav-cta { text-align: center; } .hub-grid, .related-grid, .benefit-grid, .query-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .use-grid { grid-template-columns: 1fr 1fr; } .extension-grid { grid-template-columns: 1fr; } .extension-card:first-child { grid-column: auto; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } .detail-row { grid-template-columns: 70px 1fr; } } @media (max-width: 480px) { .wrap { width: min(var(--max), calc(100% - 1.5rem)); } .steps, .use-grid, .footer-grid { grid-template-columns: 1fr; } .footer-grid > div:first-child { grid-column: auto; } .format-grid { grid-template-columns: 1fr 1fr; } .detail-row { grid-template-columns: 1fr; gap: 1rem; } .trust-section { grid-template-columns: 1fr; gap: .75rem; } .cta-row .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }