/* platform/assets/styles.css
   Matches the marketing site's actual (default, unmodified) theme —
   tenant-006 has no custom color/font overrides in site_settings, so these
   are the resolved defaults from the CMS's own assets/styles.css :root
   block, not a guess. Used by platform/lib/marketing-layout.php across the
   public signup funnel (pricing.php, free-signup.php, confirm-signup.php,
   success.php, cancel.php) so that flow reads as part of the same product
   instead of a bare, disconnected form — see infrastructure/decisions.md. */
:root {
    --color-bg: #121212;
    --color-accent: #0d6efd;
    --color-accent-hover: color-mix(in srgb, var(--color-accent) 80%, black);
    --color-text: #f5f5f5;
    --color-text-muted: #adb5bd;
    --color-heading: #ffffff;
    --color-nav-bg: #212529;
    --color-nav-text: #f8f9fa;
    --color-card-bg: color-mix(in srgb, var(--color-bg) 90%, white);
    --color-border: color-mix(in srgb, var(--color-bg) 72%, white);
    --font-heading: 'Bebas Neue', sans-serif;
    --font-body: 'Lato', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    padding-top: 56px;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--font-heading);
    color: var(--color-heading);
    letter-spacing: 1px;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

/* Marketing-funnel hero — same visual language as the marketing site's own
   hero (see platform/marketing-content/home.json), not the legacy
   .parallax/.hero-text classes, which are unused by current content. */
.mkt-hero {
    padding: 72px 0 40px;
    text-align: center;
}
.mkt-hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.38);
    margin-bottom: 20px;
}
.mkt-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.mkt-hero p.lead {
    color: rgba(255,255,255,0.7);
    max-width: 560px;
    margin: 0 auto;
}

.mkt-footer {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--color-border);
    margin-top: 3rem;
}
.mkt-footer a { color: var(--color-text-muted); }

/* Pricing table — identical classes/rules to the CMS's own pb-pricing-card
   (assets/styles.css) so a card here and a card on the marketing Pricing
   page are visually indistinguishable. Kept as a literal copy rather than a
   shared include since platform/ and the CMS core deploy as two entirely
   separate trees (see infrastructure/decisions.md). */
.pb-pricing-card {
    height: 100%;
    padding: 2rem 1.5rem;
    border-radius: .5rem;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}
.pb-pricing-card-highlighted {
    border-color: var(--color-accent);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--color-accent);
}
.pb-pricing-name {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}
.pb-pricing-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: .5rem;
}
.pb-pricing-period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: .15rem;
}
.pb-pricing-description {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.pb-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex-grow: 1;
}
.pb-pricing-features li {
    padding: .35rem 0;
    border-bottom: 1px solid var(--color-border);
}
.pb-pricing-features li:last-child {
    border-bottom: none;
}

/* Pricing card forms (email + slug) — this page's real job is collecting a
   signup, so each card embeds its own form rather than just linking out. */
.pb-pricing-card form {
    margin-top: auto;
}
.pb-pricing-card input[type=email],
.pb-pricing-card input[type=text] {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.pb-pricing-card input[type=email]:focus,
.pb-pricing-card input[type=text]:focus {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.pb-pricing-card .slug-suffix {
    color: var(--color-text-muted);
    white-space: nowrap;
}
.mkt-error {
    color: #f28b82;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* Generic centered content card — free-signup.php's "check your email"
   screen, confirm-signup.php, success.php, cancel.php. */
.mkt-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    text-align: center;
}