/* Plus Jakarta Sans (display) and Inter (UI) are self-hosted
   via stylesheets/plus-jakarta.css (linked in each page <head>). */

:root {
  --color-background: #060606;
  --color-text-primary: #f7f6f9;
  /* AA contrast on #060606 (~7.1:1); prior #999 was ~2.8:1 */
  --color-text-secondary: #b0b0b0;
  --color-accent-primary: #8e23e2;
  --color-accent-secondary: #21bdb8;
  /* Soft aqua for body/content links (avoids browser default navy on dark) */
  --rt-link: #5eead4;

  /* Separated secondary accent colors for manual modification */
  /* AA contrast on black footer (~5.3:1); prior rgb(211,27,134) was ~4.27:1 */
  --footer-link-color: rgb(230, 70, 160);
  --h2-link-color: #ff5959;
  --h2-icon-hover-color: #c721ae;
  --nav-link-hover-color: #dc4760;
  --focus-ring-color: #21bdb8;
  --font-display: 'Plus Jakarta Sans';
  --font-primary: 'Plus Jakarta Sans';
  --font-secondary: 'Plus Jakarta Sans';
  --gradient-primary: linear-gradient(157deg, #8e23e2 0%, #cf2576 100%);
}

/* Skip link: visually hidden until keyboard focus */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--color-accent-secondary);
    color: #060606;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

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

/* Visible keyboard focus for interactive controls */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

body {
    font-family: var(--font-primary);
    font-synthesis: none;
    /* Dark UI: a little extra tracking so light glyphs do not bloom together. */
    letter-spacing: 0.01em;
    font-feature-settings: "kern" 1, "calt" 1;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    text-align: center;
    line-height: 1.6;
}
input,
select,
textarea {
    font-family: inherit;
}
a {
    color: var(--rt-link);
}
.site-logo {
    margin: 0;
}
.site-logo a,
header .site-logo a {
    display: inline-block;
    max-width: 100%;
}
.site-logo img,
header .site-logo img,
h1 img {
    width: 300px;
    max-width: min(300px, 100%);
    height: auto;
    margin: 0 auto;
    display: block;
}
footer {
    position: relative;
    padding: 40px 20px;
    background: #000000;
    color: #888;
    border-top: 1px solid #222;
}
footer a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: rgb(245, 110, 185);
    text-decoration: underline;
}
.footer-privacy-link {
    color: var(--footer-link-color);
    font-weight: inherit;
}
.footer-privacy-link:hover {
    color: rgb(245, 110, 185);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr 1fr;
    gap: 28px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}
.footer-col {
    min-width: 0;
}
footer nav.footer-col {
    padding: 0;
}
.footer-brand .footer-copy {
    margin: 0 0 16px;
    color: #888;
    font-size: 0.95rem;
    line-height: 1.5;
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
}
.footer-social .social-icon {
    margin: 0;
}
.footer-heading {
    margin: 0 0 14px;
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links a,
footer nav.footer-col a {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 400;
    border-radius: 0;
    background: none;
    color: var(--footer-link-color);
}
.footer-links a:hover,
footer nav.footer-col a:hover {
    color: rgb(245, 110, 185);
    background: none;
    text-decoration: underline;
}
@media (max-width: 1100px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 28px 24px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        text-align: center;
    }
    .footer-brand,
    .footer-col {
        text-align: center;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-links {
        align-items: center;
    }
    .footer-links a,
    footer nav.footer-col a {
        /* Allow long labels (e.g. Publishing Administration) to wrap in narrow columns */
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.pricing-compare-links {
    text-align: center;
    margin: -24px auto 48px;
    max-width: 1200px;
    color: var(--color-text-secondary, #c8c8c8);
    font-size: 0.95rem;
    line-height: 1.6;
}
.pricing-compare-links a {
    color: #ff2d55;
    text-decoration: none;
    font-weight: 600;
    margin: 0 6px;
}
.pricing-compare-links a:hover {
    text-decoration: underline;
}
h1,
h2 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h1 {
    font-weight: 800;
}
h2 {
    color: var(--color-text-primary);
    font-weight: 700;
}
table {
    font-feature-settings: "kern" 1, "calt" 1, "tnum" 1, "zero" 1, "ss02" 1, "cv11" 1, "cv05" 1;
}
h2 a{
    color: var(--h2-link-color);
}
h2 i:hover{
    color: var(--h2-icon-hover-color);
}
header .site-logo a,
header h1 a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
header .site-logo a:hover,
header h1 a:hover {
    opacity: 0.9;
}
header {
    padding: 32px 0 20px;
}
header .site-logo {
    margin: 0;
}
nav {
    padding: 20px 0;
}
header > nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
nav .nav-divider {
    color: var(--color-text-primary);
    margin: 0 4px;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -0.05em;
}
header > nav .nav-dropdown-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
header > nav .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 8.5rem;
    padding: 8px 0;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
    z-index: 80;
    text-align: center;
    white-space: nowrap;
}
header > nav .nav-dropdown-wrap:hover .nav-dropdown-menu,
header > nav .nav-dropdown-wrap:focus-within .nav-dropdown-menu,
header > nav .nav-dropdown-wrap.is-open > .nav-dropdown-menu {
    display: block;
}
/* Phones and tablets use the first tap to open a :hover menu and ignore the link.
   Login should follow the link on that tap. The Sign Up menu opens on the sign-in page. */
@media (hover: none), (pointer: coarse) {
    header > nav .nav-dropdown-wrap:has(> a[href*="signin"]):hover > .nav-dropdown-menu,
    header > nav .nav-dropdown-wrap:has(> a[href*="signin"]):focus-within > .nav-dropdown-menu {
        display: none;
    }
    header > nav .nav-dropdown-wrap:has(> a[href*="signin"]).is-open > .nav-dropdown-menu {
        display: block;
    }
}
header > nav .nav-dropdown-menu a {
    display: block;
    margin: 0;
    padding: 8px 14px;
    font-size: 0.95rem;
    border-radius: 0;
}
nav a {
    padding: 10px 20px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    border-radius: 4px;
}
header > nav a {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
nav a:hover {
    color: var(--nav-link-hover-color);
    background: rgba(255, 45, 85, 0.1);
}
section {
    position: relative;
}
button, .join-now-button {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 12px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    font-family: var(--font-primary);
}
a.join-now-button {
    display: inline-block;
    text-decoration: none;
    box-sizing: border-box;
}
button:hover, .join-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 45, 85, 0.4);
    filter: brightness(1.1);
}
.social-icon {
    display: inline-block;
    color: var(--footer-link-color);
    font-size: 28px;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}
.social-icon:hover {
    color: rgb(245, 110, 185);
    transform: scale(1.2);
}

@media (max-width: 480px) {
    .site-logo img,
    header .site-logo img,
    h1 img {
        width: 220px;
        max-width: 85vw;
    }
}