:root {
    --paper: #f7f9f8;
    --paper-deep: #e6eeeb;
    --teal: #06525c;
    --teal-soft: #2f737d;
    --coral: #ba3f38;
    --display: "Young Serif", "Noto Serif TC", serif;
    --text: "Source Serif 4", "Noto Serif TC", serif;
}

body.brand-page {
    color: var(--teal);
    background: var(--paper);
    font-family: var(--text);
    font-size: 18px;
}

.brand-page h1,
.brand-page h2,
.brand-page h3,
.brand-page .font-black,
.brand-page .font-extrabold {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--teal);
}

.brand-page nav {
    background: var(--teal) !important;
    color: var(--paper);
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.brand-page nav a,
.brand-page nav span,
.brand-page nav .font-black,
.brand-page nav .font-extrabold {
    color: var(--paper) !important;
}

.brand-page nav .ig-btn-secondary,
.brand-page nav [class*="bg-slate-100"] {
    background: var(--paper) !important;
    color: var(--teal) !important;
    border-radius: 0 !important;
}

.brand-page .brand-mark {
    background: transparent;
}

.brand-page main,
.brand-page section {
    background: transparent;
}

.brand-page .ig-card,
.brand-page main > .bg-white,
.brand-page main .rounded-2xl.bg-white {
    background: #fff;
    color: var(--teal);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.brand-page .text-slate-900,
.brand-page .text-slate-800,
.brand-page .text-slate-700 {
    color: var(--teal) !important;
}

.brand-page .text-slate-600,
.brand-page .text-slate-500,
.brand-page .text-slate-400 {
    color: var(--teal-soft) !important;
}

.brand-page .text-ig-blue,
.brand-page .text-blue-600,
.brand-page .text-amber-500,
.brand-page .text-amber-600,
.brand-page .text-amber-800 {
    color: var(--teal) !important;
}

.brand-page .bg-ig-blue,
.brand-page .bg-blue-50,
.brand-page [class*="bg-blue-50"],
.brand-page [class*="bg-amber-50"],
.brand-page [class*="bg-amber-100"],
.brand-page [class*="border-ig-blue"],
.brand-page [class*="border-amber-"] {
    background: var(--paper-deep) !important;
    border-color: transparent !important;
    color: var(--teal) !important;
}

.brand-page .bg-ig-blue,
.brand-page span.bg-ig-blue {
    background: var(--teal) !important;
    color: var(--paper) !important;
}

.brand-page .ig-btn-primary,
.brand-page a.ig-btn-primary {
    background: var(--coral) !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.brand-page [class*="bg-slate-900"] {
    background: var(--teal) !important;
    color: var(--paper) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.brand-page [class*="bg-slate-900"] h3,
.brand-page [class*="bg-slate-900"] p,
.brand-page [class*="bg-slate-900"] span {
    color: var(--paper) !important;
}

.brand-page footer,
.brand-page footer.bg-white {
    background: var(--teal) !important;
    color: var(--paper) !important;
    border: 0 !important;
}

.brand-page footer span,
.brand-page footer p {
    color: var(--paper) !important;
}

.brand-page :focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
}

.brand-page .bg-white,
.brand-page section.bg-white,
.brand-page .bg-slate-50,
.brand-page .bg-slate-200,
.brand-page [class*="bg-rose-"] {
    background: var(--paper-deep) !important;
    border-color: transparent !important;
}

.brand-page main > .bg-white,
.brand-page .ig-card {
    background: #fff !important;
}

.brand-page .rounded-lg,
.brand-page .rounded-xl,
.brand-page .rounded-2xl,
.brand-page .rounded-full {
    border-radius: 0 !important;
}

.brand-page .text-rose-900,
.brand-page .text-rose-700,
.brand-page a {
    color: var(--teal) !important;
}

.brand-page [class*="bg-slate-900"] .ig-btn-primary {
    background: var(--coral) !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    body.brand-page {
        overflow-x: hidden;
        font-size: 16px;
    }

    .brand-page nav .font-black {
        font-size: 14px !important;
    }

    .brand-page main,
    .brand-page section {
        max-width: 100%;
        padding-inline: 16px;
    }
}