/* Contrast and focus for the public site.
   Brand fills stay. Text on those fills is black so it clears WCAG 2.1 AA (4.5:1).
   Colored text on cream uses darker blue, pink, and teal for the same reason. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 10000;
    padding: 10px 14px;
    background: #1a1a1a;
    color: #fdf5e6;
    font-weight: 800;
    border-radius: 999px;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 3px;
}

button.play-btn {
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.site-top-bar,
.site-top-tagline,
.site-top-tagline a,
.site-top-nav a {
    color: #1a1a1a !important;
}

.site-top-nav a.nav-privacy,
.site-top-nav a.nav-privacy:hover {
    color: #000 !important;
}

.site-top-nav a.nav-resources,
.site-top-nav a.nav-resources:hover {
    color: #0c6e8a !important;
}

.site-top-nav a.nav-interview,
.site-top-nav a.nav-interview:hover {
    color: #121212 !important;
}

/* Text sitting on teal, blue, or pink fills */
.policy-hero,
.policy-hero :is(h1, h2, p, a, li, strong),
.policy-tldr,
.policy-tldr :is(h2, p, a, li, strong),
.policy-section--blue,
.policy-section--blue :is(h2, p, a, li, strong),
.policy-section--pink,
.policy-section--pink :is(h2, p, a, li, strong),
.policy-section--green,
.policy-section--green :is(h2, p, a, li, strong),
.band--green,
.band--green :is(p, h1, h2, h3, a, li, span),
.band--blue,
.band--blue :is(p, h1, h2, h3, a, li, span),
.band--pink,
.band--pink :is(p, h1, h2, h3, a, li, span),
.social-row a,
.social-row a.tt,
.social-row a.ig,
.social-row a.li,
.checklist a,
.guest-outreach-sub a,
.hero h1,
.hero p,
.hero .lede,
.hero .wink,
.page-jump a,
.pill,
.pill:nth-child(2),
.pill:nth-child(3),
.card .tag,
.card a.btn,
.card a.btn.secondary,
.dl a,
.cute-link,
.journal-actions a,
.tip-actions a,
.btn-dl,
.btn-dl.ios,
.btn-dl.android,
ol.steps > li::before,
.how-list .num,
.badge,
.hero-cta,
.cta-block .hero-cta,
.legal-link,
.lang-recs-row a,
.quote-card__initial,
.platform-btn,
.android-form p,
.android-form button,
.success-msg,
.join-form h2,
.join-form button,
.multi-select .selected-items span,
.chat-message.user .bubble,
.duration,
.partner-invite-sheet,
.partner-invite-sheet :is(h1, h2, p, a, li),
.error-box,
.btn {
    color: #000 !important;
    opacity: 1;
}

.resource-links a:hover {
    color: #000 !important;
}

/* Brand color used as text on cream or white */
.foot-line a,
h1 .accent,
.money-box .founding,
.note a,
.foot a,
.date-stamp .year {
    color: #a80068 !important;
}

.money-box .rate,
.compare .us,
.punch,
.price-box .amount,
.ladder-n,
.micro.meaning .icon,
footer a,
.resource-links a,
.policy-section h2,
.policy-section--blue h2,
.policy-section--green h2 {
    color: #0c6e8a !important;
}

.policy-section--pink h2 {
    color: #a80068 !important;
}

.error-box {
    background: #fdf5e6 !important;
}

.band--cream .band-label {
    color: #0e6a58 !important;
}

/* Terms sections are full-bleed color, so those headings stay black. */
.policy-section--blue h2,
.policy-section--pink h2,
.policy-section--green h2 {
    color: #000 !important;
}

footer {
    opacity: 1 !important;
}

footer.site-footer a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

p a,
li a,
footer a,
.note a,
.foot a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.site-top-nav a,
.site-footer a,
.hero-cta,
.btn,
.legal-link,
.lang-recs-row a,
.store-btn,
.card a.btn,
.btn-dl,
.dl a,
.cute-link,
.journal-actions a,
.tip-actions a,
.platform-btn,
.open-btn,
.resource-links a,
.page-jump a,
.social-row a {
    text-decoration: none !important;
}