@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
    --tb-paper: #eeeee8;
    --tb-paper-soft: rgba(255, 255, 250, 0.72);
    --tb-paper-strong: rgba(255, 255, 250, 0.92);
    --tb-ink: #171913;
    --tb-muted: rgba(23, 25, 19, 0.6);
    --tb-line: rgba(23, 25, 19, 0.1);
    --tb-line-strong: rgba(33, 61, 43, 0.32);
    --tb-fern: #426c45;
    --tb-fern-deep: #213d2b;
    --tb-sage: #6f8f72;
    --tb-sun: #caa866;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        linear-gradient(90deg, rgba(238, 238, 232, 0.98) 0%, rgba(238, 238, 232, 0.9) 42%, rgba(238, 238, 232, 0.58) 100%),
        url("../img/truebloom-watercolor-hero.png"),
        var(--tb-paper) !important;
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--tb-ink) !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: 0;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 250, 0.74), transparent 280px),
        radial-gradient(circle at 82% 74%, rgba(66, 108, 69, 0.1), transparent 360px);
}

.font-serif,
h1,
h2.font-serif,
.text-2xl.font-serif,
.text-3xl.font-serif,
.text-4xl.font-serif,
.text-5xl.font-serif,
.text-6xl.font-serif {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

h1 {
    color: var(--tb-ink);
    line-height: 0.96 !important;
    text-wrap: balance;
}

h2,
h3,
h4 {
    color: var(--tb-ink);
    letter-spacing: 0;
}

p,
li {
    color: var(--tb-muted);
}

a {
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

body > header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid rgba(23, 25, 19, 0.08);
    background: rgba(238, 238, 232, 0.78);
    backdrop-filter: blur(18px);
}

body > header a {
    min-height: 44px;
    padding: 8px 14px !important;
    gap: 10px;
    border-radius: 8px;
    color: var(--tb-ink) !important;
    background: transparent !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

body > header a svg {
    display: block;
    flex: 0 0 16px;
}

body > header a:hover {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

section {
    position: relative;
}

section:first-of-type {
    padding-top: clamp(56px, 8vh, 96px) !important;
}

.text-gray-700,
.text-gray-600 {
    color: rgba(23, 25, 19, 0.74) !important;
}

.text-gray-500 {
    color: rgba(23, 25, 19, 0.58) !important;
}

.text-gray-400,
.text-gray-300 {
    color: rgba(23, 25, 19, 0.44) !important;
}

.text-dark {
    color: var(--tb-ink) !important;
}

.bg-light {
    background: transparent !important;
}

.bg-white,
.bg-gray-50,
.bg-gray-100,
.border,
.border-t,
.border-b {
    border-color: var(--tb-line) !important;
}

.bg-white,
.border.rounded-2xl,
.border.rounded-xl,
.rounded-2xl.border,
.rounded-xl.border {
    background: var(--tb-paper-soft) !important;
    box-shadow: none;
}

.rounded-2xl {
    border-radius: 8px !important;
}

.rounded-xl,
.rounded-lg {
    border-radius: 8px !important;
}

.shadow-xl,
.shadow-lg,
.shadow-md,
.screenshot {
    box-shadow: 0 18px 44px rgba(23, 25, 19, 0.1) !important;
}

.app-icon {
    border-radius: 8px !important;
    box-shadow: 0 18px 40px rgba(23, 25, 19, 0.1) !important;
}

.screenshot {
    border: 2px solid rgba(23, 25, 19, 0.08);
    border-radius: 8px !important;
}

.bg-dark,
.bg-gray-800 {
    background: var(--tb-fern-deep) !important;
}

.bg-emerald-600,
.bg-green-600 {
    background: var(--tb-fern) !important;
}

.text-green-600,
.text-emerald-600,
.text-blue-600,
.text-purple-600,
.text-orange-600 {
    color: var(--tb-fern) !important;
}

.bg-emerald-100,
.bg-green-100,
.bg-blue-100,
.bg-purple-100,
.bg-orange-100 {
    background: rgba(66, 108, 69, 0.1) !important;
}

.rounded-full {
    border-radius: 8px !important;
}

a.inline-flex,
button,
.hover\:bg-gray-800:hover,
.hover\:bg-gray-100:hover {
    transition:
        background 200ms ease,
        border-color 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease,
        transform 200ms ease;
}

a.inline-flex:hover,
button:hover,
.border:hover {
    border-color: var(--tb-line-strong) !important;
    box-shadow:
        0 14px 30px rgba(23, 25, 19, 0.09),
        0 0 0 2px rgba(66, 108, 69, 0.06);
    transform: translateY(-2px);
}

.grid > .border,
.space-y-6 > .border,
.space-y-8 > .border,
.space-y-10 > .border {
    border-width: 2px !important;
    background: var(--tb-paper-soft) !important;
}

footer {
    border-color: rgba(23, 25, 19, 0.1) !important;
}

@media (max-width: 760px) {
    body {
        background-attachment: scroll;
        background-size: auto 72vh;
    }

    body > header {
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    body > header a {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

body > header a.inline-flex:hover,
body > header a:hover {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.bg-dark.text-white.rounded-3xl {
    padding: clamp(30px, 5vw, 56px) 0 0 !important;
    border-top: 2px solid var(--tb-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tb-ink) !important;
}

.bg-dark.text-white.rounded-3xl h2 {
    max-width: 620px;
    color: var(--tb-ink) !important;
}

.bg-dark.text-white.rounded-3xl p {
    max-width: 620px;
    color: rgba(23, 25, 19, 0.62) !important;
}

.bg-dark.text-white.rounded-3xl a.inline-flex {
    border: 2px solid var(--tb-ink) !important;
    background: var(--tb-ink) !important;
    color: var(--tb-paper) !important;
    box-shadow: none !important;
}

.bg-dark.text-white.rounded-3xl a.inline-flex:hover {
    border-color: var(--tb-fern-deep) !important;
    background: var(--tb-fern-deep) !important;
    color: var(--tb-paper) !important;
}

.bg-dark.text-white.rounded-3xl a.inline-flex svg {
    color: currentColor !important;
}

@media (min-width: 768px) {
    .bg-dark.text-white.rounded-3xl {
        align-items: end !important;
    }