/* Front page (WEB-32). Theme tokens only. */

.fp {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    color: var(--byw-text);
}

.fp p,
.fp li {
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Season's banner, shown whole: it carries its own lettering and art edge to edge. */
.fp-banner {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--byw-border);
    background-color: var(--byw-surface);
    margin-bottom: 1.25rem;
}

.fp-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1900 / 500;
}

/* Introduction and the world in numbers */

.fp-intro {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.fp-intro-text,
.fp-stats {
    background-color: var(--byw-surface-2);
    border: 1px solid var(--byw-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}

.fp .fp-title {
    display: block;
    float: none;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--byw-text);
}

.fp .fp-lede {
    font-size: 1.05rem;
    color: var(--byw-text-muted);
    margin: 0 0 1.25rem;
    max-width: 44rem;
}

.fp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.fp .fp-actions .btn-outline-light {
    border-color: var(--byw-border);
    color: var(--byw-text);
}

.fp-link {
    color: var(--byw-accent-text);
    font-weight: 600;
}

.fp-yours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

/* Taller than they were (Adrian, 2026-09-27): at 74px the three cards left the welcome panel
   half empty beside the stats card next to it. The picture moves above the text rather than
   beside it, so the extra height comes from showing the artwork at its own shape -- cropping it
   square instead lost most of what each card is a picture of. */
.fp-yours a {
    display: flex;
    flex-direction: column;
    width: 12rem;
    padding: 0.5rem 0.5rem 0.7rem;
    border: 1px solid var(--byw-border);
    border-radius: 10px;
    background-color: var(--byw-surface-3);
    color: var(--byw-text);
    text-decoration: none;
}

.fp-yours a:hover,
.fp-yours a:focus {
    border-color: var(--byw-accent);
}

.fp-yours img {
    width: 100%;
    height: auto;
    margin-bottom: 0.55rem;
    border-radius: 6px;
}

/* align-self mattered when these sat in a two-row grid beside the picture; stacked, they are
   simply one under the other. */
.fp-yours-name {
    font-weight: 700;
    line-height: 1.3;
}

.fp-yours-level {
    font-size: 0.85rem;
    color: var(--byw-text-muted);
}

.fp-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    margin: 0;
}

.fp-stats dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--byw-text-muted);
}

.fp-stats dd {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--byw-text);
    font-variant-numeric: tabular-nums;
}

.fp-stats dd a {
    color: inherit;
    text-decoration: none;
}

.fp-stats dd a:hover,
.fp-stats dd a:focus {
    color: var(--byw-accent-text);
}

/* Sections */

.fp-section {
    margin-bottom: 2rem;
}

.fp .fp-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--byw-text);
}

.fp-how {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    list-style: none;
    counter-reset: fp-step;
    padding: 0;
    margin: 0;
}

.fp-how li {
    counter-increment: fp-step;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--byw-surface-2);
    border: 1px solid var(--byw-border);
    border-top: 3px solid var(--byw-accent);
    border-radius: 10px;
    padding: 1.1rem 1.25rem 1.25rem;
}

.fp-how li::before {
    content: counter(fp-step);
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--byw-accent-text);
    margin-bottom: 0.25rem;
}

.fp .fp-how h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--byw-text);
}

.fp .fp-how p {
    color: var(--byw-text-muted);
    margin: 0 0 0.75rem;
    flex: 1 1 auto;
}

.fp-how a {
    font-weight: 600;
    color: var(--byw-accent-text);
}

/* Professions */

.fp-professions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-profession {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--byw-surface-3);
    border: 1px solid #3A4461;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: var(--byw-text);
    text-decoration: none;
}

.fp-profession:hover,
.fp-profession:focus {
    border-color: var(--byw-accent);
}

.fp-profession img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1500 / 918;
    object-fit: cover;
}

.fp-profession-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.7rem 0.9rem 0.15rem;
}

.fp-profession-line {
    font-size: 0.85rem;
    color: var(--byw-text-muted);
    padding: 0 0.9rem 0.9rem;
}

/* Help */

.fp-help-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fp-help-links a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 1rem 1.25rem;
    background-color: var(--byw-surface-2);
    border: 1px solid var(--byw-border);
    border-radius: 10px;
    color: var(--byw-text);
    text-decoration: none;
}

.fp-help-links a:hover,
.fp-help-links a:focus {
    border-color: var(--byw-accent);
}

.fp-help-links span {
    font-size: 0.85rem;
    color: var(--byw-text-muted);
}

@media (max-width: 991.98px) {
    .fp-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .fp-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* ─── What this world has done, and bringing somebody into it ──────────────
   The head count and the thirty-day active count were removed on beYouSales'
   word: players watch them, and a figure that dips reads as decline. What is
   here now only ever rises, and is rounded so there is nothing to track. */

/* Read before the figures, not after them: the top bar's "Markets (30 Days)" uses the same
   word "transactions" for a number three orders of magnitude smaller. */
.fp-stats-scope-second {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--byw-border);
    border-bottom: 0;
    padding-bottom: 0;
}

.fp-stats-scope {
    margin: 0 0 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--byw-border);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--byw-text-dim);
}

.fp-invite {
    background: linear-gradient(135deg, var(--byw-surface-2), var(--byw-surface));
    border: 1px solid var(--byw-accent);
    border-radius: 14px;
    padding: 1.75rem;
}

.fp-invite .fp-section-title {
    margin-top: 0;
}

.fp-invite-lede {
    max-width: 52ch;
    margin: 0 0 1.25rem;
    color: var(--byw-text-muted);
    line-height: 1.6;
}

.fp-invite-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fp-invite-done {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--byw-success);
}

/* Each lifetime figure states when its own record starts; they are not the same year. It sits
   beside the number rather than the label, so no label wraps and the three rows stay level. */
.fp-stat-since {
    margin-left: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--byw-text-dim);
    white-space: nowrap;
}