/*
  Owlnest typography layer.
  Keeps page-specific art direction, while reducing oversized headings,
  poster-like body copy, and heavy Traditional Chinese type.
*/

:root {
    --owl-type-hero: clamp(2.35rem, 5vw, 4rem);
    --owl-type-section: clamp(2rem, 3.7vw, 3.25rem);
    --owl-type-card: clamp(1.35rem, 2vw, 1.9rem);
    --owl-type-body: clamp(1rem, 1.05vw, 1.08rem);
    --owl-type-lead: clamp(1.05rem, 1.35vw, 1.25rem);
    --owl-type-small: clamp(0.84rem, 0.9vw, 0.95rem);
    --owl-leading-title: 1.08;
    --owl-leading-body: 1.64;
}

main h1.font-serif,
.owlnest-hero-title,
.home-hero-title,
.product-hero-title {
    font-size: var(--owl-type-hero) !important;
    line-height: var(--owl-leading-title) !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

main h2.font-serif,
.owlnest-section-title,
.section-heading {
    font-size: var(--owl-type-section) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

main h3.font-serif,
.owlnest-card-title {
    font-size: var(--owl-type-card) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

main p,
main li,
.owlnest-section-copy,
.owlnest-card-copy,
.body-copy {
    font-size: var(--owl-type-body);
    line-height: var(--owl-leading-body);
}

main .text-lg,
main .text-xl,
main .md\:text-xl,
main .md\:text-2xl,
.owlnest-hero-subtitle,
.product-hero-subhead {
    font-size: var(--owl-type-lead) !important;
    line-height: 1.55 !important;
}

main .text-sm,
main .text-xs,
.owlnest-small {
    line-height: 1.55;
}

.owlnest-eyebrow,
main .section-label,
main .uppercase.tracking-\[0\.16em\],
main .tracking-\[0\.16em\].uppercase {
    font-size: var(--owl-type-small) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.15em !important;
    font-weight: 800 !important;
}

main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > :is(h1, h2, .owlnest-eyebrow, .section-label):first-child,
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > p:first-child,
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > h1:first-of-type,
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > h2:first-of-type,
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl):first-child,
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl):first-child > :is(h1, h2, p, .owlnest-eyebrow, .section-label),
main > section > :is(.grid, .md\:grid, .lg\:grid, .xl\:grid) > div > :is(h1, h2, p, .owlnest-eyebrow, .section-label):first-child,
main > section > :is(.max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl).grid > div > :is(h1, h2, p, .owlnest-eyebrow, .section-label):first-child,
main > section > :is(.max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > .grid > div > :is(h1, h2, p, .owlnest-eyebrow, .section-label):first-child {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > :is(h1, h2, p) + p,
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl):first-child > p,
main > section > :is(.max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl).grid > div > :is(h1, h2) + p,
main > section > :is(.max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > .grid > div > :is(h1, h2) + p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > div:has(> :is(h1.font-serif, h2.font-serif)):not(:has(> img)):not(:has(> figure)):not(:has(> article)):not(:has(> form)) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > div:has(> :is(h1.font-serif, h2.font-serif)):not(:has(> img)):not(:has(> figure)):not(:has(> article)):not(:has(> form)) > :is(h1, h2, p, span, a),
main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > div:has(> :is(h1.font-serif, h2.font-serif)):not(:has(> img)):not(:has(> figure)):not(:has(> article)):not(:has(> form)) > div {
    margin-left: auto !important;
    margin-right: auto !important;
}

main > section > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .max-w-screen-xl) > div:has(> :is(h1.font-serif, h2.font-serif)):not(:has(> img)):not(:has(> figure)):not(:has(> article)):not(:has(> form)) > div[class*="flex"] {
    justify-content: center !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)),
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)),
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(2rem, 4vw, 3.5rem) !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div,
main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > figure,
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div,
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > figure,
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div,
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > figure {
    width: min(100%, 72rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)),
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)),
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) {
    order: -1 !important;
    width: min(100%, 58rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > :is(p, span, h1, h2),
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > :is(p, span, h1, h2),
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > :is(p, span, h1, h2) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > div,
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > div,
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > div {
    margin-left: auto !important;
    margin-right: auto !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > div[class*="flex"],
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > div[class*="flex"],
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:has(> :is(h1.font-serif, h2.font-serif)) > div[class*="flex"] {
    justify-content: center !important;
}

main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > p,
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > p,
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > p,
main > section > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:not(:has(> :is(h1.font-serif, h2.font-serif))) > :is(p, a),
main > section > [class*="max-w-"][class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:not(:has(> :is(h1.font-serif, h2.font-serif))) > :is(p, a),
main > section > [class*="max-w-"] > [class*="grid"][class*="lg:grid-cols-["]:has(> div > :is(h1.font-serif, h2.font-serif)) > div:not(:has(> :is(h1.font-serif, h2.font-serif))) > :is(p, a) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.product-snapshot-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(2rem, 4vw, 3.5rem) !important;
}

.product-snapshot-grid > .flex {
    order: -1 !important;
    width: min(100%, 58rem) !important;
}

.product-snapshot-grid .product-copy-panel {
    max-width: 58rem !important;
}

.product-snapshot-grid > figure {
    width: min(100%, 72rem) !important;
    margin-inline: auto !important;
}

main .text-5xl,
main .text-6xl,
main .md\:text-6xl,
main .md\:text-7xl,
main .lg\:text-7xl {
    line-height: 1.08 !important;
}

@media (max-width: 640px) {
    :root {
        --owl-type-hero: clamp(2.1rem, 10vw, 2.65rem);
        --owl-type-section: clamp(1.85rem, 8vw, 2.25rem);
        --owl-type-card: clamp(1.28rem, 6vw, 1.55rem);
        --owl-type-body: 1rem;
        --owl-type-lead: 1.04rem;
    }

    main h1.font-serif,
    .owlnest-hero-title,
    .home-hero-title,
    .product-hero-title,
    main h2.font-serif,
    .owlnest-section-title,
    .section-heading {
        text-wrap: balance;
    }
}

html[lang="zh-Hant"] {
    --owl-type-hero: clamp(2.15rem, 4.7vw, 3.6rem);
    --owl-type-section: clamp(1.9rem, 3.4vw, 3rem);
    --owl-type-card: clamp(1.28rem, 1.9vw, 1.68rem);
    --owl-type-body: clamp(1rem, 1vw, 1.06rem);
    --owl-type-lead: clamp(1.04rem, 1.25vw, 1.16rem);
}

html[lang="zh-Hant"] body,
html[lang="zh-Hant"] main {
    font-family: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
}

html[lang="zh-Hant"] main .font-serif {
    font-family: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
}

html[lang="zh-Hant"] main h1.font-serif,
html[lang="zh-Hant"] main h2.font-serif,
html[lang="zh-Hant"] main h3.font-serif,
html[lang="zh-Hant"] .section-heading {
    font-weight: 600 !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
}

html[lang="zh-Hant"] main p,
html[lang="zh-Hant"] main li {
    line-height: 1.72;
}

/* Campaign is a narrative landing page: preserve its intended split-screen flow. */
@media (min-width: 1024px) {
    body.campaign-page #hero > .max-w-7xl.grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) !important;
        align-items: center !important;
        gap: 4rem !important;
    }

    body.campaign-page #preorder > .max-w-7xl > .grid {
        display: grid !important;
        grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr) !important;
        align-items: start !important;
        gap: 3rem !important;
    }

    body.campaign-page #hero > .max-w-7xl.grid > *,
    body.campaign-page #preorder > .max-w-7xl > .grid > * {
        order: initial !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.campaign-page #hero > .max-w-7xl.grid > div:first-child,
    body.campaign-page #preorder > .max-w-7xl > .grid > div:first-child {
        max-width: none !important;
        text-align: left !important;
    }

    body.campaign-page #hero > .max-w-7xl.grid > div:first-child > :is(h1, h2, p, span, div),
    body.campaign-page #preorder > .max-w-7xl > .grid > div:first-child > :is(h1, h2, p, span, div) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    body.campaign-page #hero > .max-w-7xl.grid > div:first-child > div.flex {
        justify-content: flex-start !important;
    }
}

/* Shared readability safeguards for public marketing pages. */
:root {
    --owl-readable-amber-on-light: #8b4818;
    --owl-readable-amber-on-dark: #e6a64b;
    --owl-readable-text-on-light: #455169;
    --owl-readable-text-on-dark: #f5eedc;
    --owl-readable-amber-on-slate: #ffe0a3;
}

main :is(.bg-midnight, [class*="bg-[#0"], [class*="bg-[#1"]) .text-amber {
    color: var(--owl-readable-amber-on-dark) !important;
}

main :is(
    .section-light,
    .bg-warm,
    .bg-cream,
    .bg-white,
    [class*="bg-[#f"],
    .campaign-check-card
) :is(.text-amber, .section-label) {
    color: var(--owl-readable-amber-on-light) !important;
}

main :is(
    .section-light,
    .bg-warm,
    .bg-cream,
    .bg-white,
    [class*="bg-[#f"],
    .campaign-check-card
) [class*="text-midnight/"] {
    color: var(--owl-readable-text-on-light) !important;
}

main [class*="text-white/2"],
main [class*="text-white/3"],
main [class*="text-white/4"] {
    color: rgba(245, 238, 220, 0.72) !important;
}

main .bg-slateblue [class*="text-white/"] {
    color: var(--owl-readable-text-on-dark) !important;
}

main .bg-slateblue .text-amber {
    color: var(--owl-readable-amber-on-slate) !important;
}

main .bg-warm .bg-midnight .text-amber,
main .section-light .bg-midnight .text-amber,
main .faq-contact-card .text-amber,
main aside.bg-midnight .text-amber {
    color: var(--owl-readable-amber-on-dark) !important;
}

main :is(.section-light, .bg-warm, .bg-cream) .bg-midnight.text-white {
    color: var(--owl-readable-text-on-dark) !important;
}

main .dark-card.text-white {
    background-color: #182234 !important;
    color: var(--owl-readable-text-on-dark) !important;
}

main .evidence-step__number {
    color: rgba(245, 238, 220, 0.72) !important;
}

main :is(.bg-white, [class*="bg-[#f"]) .text-taupe {
    color: #6b5b4a !important;
}

#main-header .header-actions > a.bg-amber.text-midnight {
    color: #182234 !important;
}

footer [class*="text-white/3"],
footer [class*="text-white/4"] {
    color: rgba(245, 238, 220, 0.68) !important;
}