/* ==========================================================================
   LANDING / INTERIOR PAGE SHARED STYLES (lp- prefix)
   Shared visual system for the redesigned public pages: homepage, class
   pages (/classes/{slug}), and guide pages (/guide/*). Values come from
   design_handoff_homepage + design_handoff_interior_pages.
   The lp- prefix is load-bearing: it prevents collisions with the legacy
   global page stylesheets (landing-sections.css, splash-animations.css, ...).
   Used by Components/Landing/* and the page markup that composes them.
   ========================================================================== */

/* ---------- Page root ---------- */

.lp-home-root {
    background: #070b16;
    color: #c9d1e0;
    font-family: 'EB Garamond', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Zero-specificity default so per-class colors (.lp-btn-gold, .lp-nav-link, ...) always win. */
:where(.lp-home-root) :where(a) {
    color: #e8c352;
    text-decoration: none;
}

.lp-home-root ::selection {
    background: rgba(218, 165, 32, .35);
}

/* ---------- Buttons ---------- */

.lp-btn-gold {
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .12em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    transition: box-shadow .25s ease;
}

.lp-btn-lg {
    font-size: 15px;
    padding: 15px 34px;
    box-shadow: 0 0 26px rgba(218, 165, 32, .45);
}

.lp-btn-lg:hover {
    box-shadow: 0 0 40px rgba(255, 215, 0, .7);
}

.lp-btn-nav {
    font-size: 13px;
    padding: 10px 20px;
    box-shadow: 0 0 18px rgba(218, 165, 32, .35);
}

.lp-btn-nav:hover {
    box-shadow: 0 0 28px rgba(255, 215, 0, .6);
}

.lp-btn-outline-hero {
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .55);
    border-radius: 3px;
    background: rgba(11, 17, 32, .5);
    display: inline-block;
    transition: border-color .25s ease, color .25s ease;
}

.lp-btn-outline-hero.lp-btn-lg {
    box-shadow: none;
}

.lp-btn-outline-hero:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lp-btn-outline {
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .5);
    border-radius: 3px;
    padding: 14px 32px;
    display: inline-block;
    transition: border-color .25s ease, color .25s ease;
}

.lp-btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------- Fixed nav ---------- */

.lp-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 40px;
    background: rgba(7, 11, 22, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(218, 165, 32, .22);
}

.lp-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-nav-logo {
    height: 42px;
    width: auto;
    display: block;
}

.lp-nav-logo-mark {
    display: none;
}

.lp-nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: .14em;
    font-weight: 600;
}

.lp-nav-link {
    color: #c9d1e0;
    transition: color .2s ease;
}

.lp-nav-link:hover,
.lp-nav-link.lp-nav-link-active {
    color: var(--color-primary);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lp-alpha-badge {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--color-primary);
    border: 1px solid rgba(218, 165, 32, .5);
    padding: 5px 10px;
    border-radius: 3px;
}

.lp-nav-login {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #c9d1e0;
    padding: 9px 16px;
    transition: color .2s ease;
}

.lp-nav-login:hover {
    color: var(--color-primary);
}

/* ---------- Mobile nav drawer ----------
   Desktop-off by default; the max-width: 960px block below turns all three
   pieces on at the same width the centre links collapse. Open/closed is a
   class from LpNav.razor — visibility (not display) so the slide transition
   runs while still dropping the panel out of the tab order when closed. */

.lp-nav-toggle {
    display: none;
}

.lp-mobile-backdrop {
    display: none;
}

.lp-mobile-menu {
    display: none;
}

/* ---------- Section scaffolding + ornament ---------- */

.lp-section {
    padding: clamp(52px, 9vw, 100px) 24px;
    background: #070b16;
}

.lp-section-alt {
    background: var(--color-bg-base);
    border-top: 1px solid rgba(218, 165, 32, .14);
}

.lp-section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.lp-section-inner-wide {
    max-width: 1280px;
}

.lp-section-inner-narrow {
    max-width: 1000px;
}

.lp-section-header {
    text-align: center;
    margin-bottom: clamp(32px, 6vw, 56px);
}

.lp-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.lp-orn-line {
    width: 56px;
    height: 1px;
}

.lp-orn-left {
    background: linear-gradient(90deg, transparent, var(--color-primary-dark));
}

.lp-orn-right {
    background: linear-gradient(90deg, var(--color-primary-dark), transparent);
}

.lp-orn-diamond {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    transform: rotate(45deg);
}

.lp-section-kicker {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
    color: #e8c352;
}

.lp-section-title {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-section-sub {
    margin: 16px auto 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-section-sub a,
.lp-prose a {
    color: #e8c352;
}

.lp-section-sub a:hover,
.lp-prose a:hover {
    color: var(--color-primary);
}

.lp-section-cta {
    text-align: center;
    margin-top: 44px;
}

.lp-card-link {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #e8c352;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lp-link-arrow {
    font-size: 14px;
}

/* ---------- Plain (left-aligned) headings + prose ---------- */

.lp-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-prose {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-prose p {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.65;
    color: #aeb7c9;
}

.lp-prose strong {
    color: #f4ecd8;
}

.lp-prose code {
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 13.5px;
    color: var(--color-primary);
}

/* Two-column content split (overview + stats, hp + equipment, ...) */
.lp-cols-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 48px;
    align-items: start;
}

.lp-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Gold in-card labels ("STAT PRIORITY", "MANA REGENERATION", ...) */
.lp-gold-label {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #e8c352;
    text-transform: uppercase;
}

.lp-gold-label--lg {
    font-size: 16px;
    letter-spacing: .04em;
}

/* Standalone sub-section label above a grid (ZONE PASSIVES / ACTIVE ABILITIES) */
.lp-gold-label--block {
    margin: 0 0 18px;
}

/* Spacer between stacked grids inside one section */
.lp-mb-lg {
    margin-bottom: 44px;
}

/* Card tone variants (strengths vs weaknesses panels) */
.lp-card--strong {
    border-color: rgba(218, 165, 32, .35);
}

.lp-card--muted {
    background: rgba(13, 19, 34, .6);
    border-color: rgba(139, 147, 167, .25);
}

.lp-gold-label--bright {
    color: var(--color-primary);
}

.lp-gold-label--muted {
    color: #8b93a7;
}

/* Short prose intro inside a card, above a list */
.lp-card > .lp-prose {
    margin-bottom: 14px;
}

/* ---------- Breadcrumb ---------- */

.lp-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 600;
    text-transform: uppercase;
}

.lp-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lp-breadcrumb li + li::before {
    content: "/";
    color: #4a5268;
}

.lp-breadcrumb a {
    color: #8b93a7;
    transition: color .2s ease;
}

.lp-breadcrumb a:hover {
    color: var(--color-primary);
}

.lp-breadcrumb [aria-current] {
    color: #e8c352;
}

.lp-breadcrumb--center ol {
    justify-content: center;
}

/* ---------- Class page hero ---------- */

.lp-class-hero {
    position: relative;
    padding: clamp(110px, 14vw, 150px) 24px clamp(52px, 9vw, 90px);
    background: radial-gradient(ellipse 60% 55% at 70% 20%, rgba(30, 41, 59, .6), transparent), #070b16;
}

.lp-class-hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 48px;
    align-items: center;
}

.lp-portrait {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}

.lp-portrait-outline {
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(218, 165, 32, .4);
    border-radius: 8px;
    pointer-events: none;
}

.lp-portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: left top;
    border-radius: 6px;
    border: 1px solid rgba(218, 165, 32, .35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.lp-portrait-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 5px 12px;
    border-radius: 3px;
}

.lp-class-intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lp-class-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    color: #f4ecd8;
}

.lp-class-role {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .18em;
    color: #e8c352;
    text-transform: uppercase;
}

.lp-class-lead {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-class-lead a {
    color: #e8c352;
}

.lp-hero-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Quick-stat chips (class hero + guide hero) */
.lp-quickstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.lp-quickstat {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    background: #0d1322;
    padding: 14px 16px;
    text-align: center;
}

.lp-quickstat-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    color: #8b93a7;
    text-transform: uppercase;
}

.lp-quickstat-value {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 6px;
}

/* ---------- Guide page hero ---------- */

.lp-guide-hero {
    position: relative;
    padding: clamp(120px, 15vw, 170px) 24px clamp(52px, 9vw, 90px);
    background: radial-gradient(ellipse 55% 60% at 50% 15%, rgba(30, 41, 59, .65), transparent), #070b16;
    text-align: center;
}

.lp-guide-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.lp-guide-hero .lp-ornament {
    margin-bottom: 0;
}

.lp-guide-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    color: #f4ecd8;
}

.lp-guide-lead {
    margin: 0;
    max-width: 680px;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-guide-quickstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 760px;
    margin-top: 10px;
}

.lp-guide-quickstats .lp-quickstat {
    text-align: left;
    padding: 14px 12px;
}

.lp-guide-quickstats .lp-quickstat-value {
    font-size: 15px;
}

/* ---------- Framed panel (key/value tables, formula lists) ---------- */

.lp-panel {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    background: #0d1322;
    overflow: hidden;
}

.lp-panel-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #e8c352;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    text-transform: uppercase;
}

.lp-panel-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-panel-row:last-child {
    border-bottom: none;
}

.lp-panel-key {
    font-size: 16px;
    color: #8b93a7;
}

.lp-panel-val {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
    text-align: right;
}

/* Key/value <table> inside a panel (preserves existing table semantics) */
.lp-panel .lp-kv-table {
    width: 100%;
    border-collapse: collapse;
}

.lp-panel .lp-kv-table th,
.lp-panel .lp-kv-table td {
    padding: 13px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-panel .lp-kv-table tr:last-child th,
.lp-panel .lp-kv-table tr:last-child td {
    border-bottom: none;
}

.lp-panel .lp-kv-table th {
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    color: #8b93a7;
}

.lp-panel .lp-kv-table td {
    text-align: right;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
}

/* Formula rows inside a panel */
.lp-panel-formula {
    padding: 14px 22px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
}

.lp-panel-formula:last-child {
    border-bottom: none;
}

.lp-panel-formula-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-panel-formula code,
.lp-panel-formula-code {
    display: block;
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 13.5px;
    color: var(--color-primary);
    margin-top: 5px;
}

/* ---------- Generic data table (multi-column guide tables) ---------- */

.lp-table-wrap {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    background: #0d1322;
    overflow-x: auto;
}

.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15.5px;
    color: #98a1b5;
}

.lp-table thead th {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e8c352;
    text-align: left;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    white-space: nowrap;
}

.lp-table tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(139, 147, 167, .12);
    line-height: 1.5;
    vertical-align: top;
}

.lp-table tbody tr:last-child td {
    border-bottom: none;
}

.lp-table td strong {
    color: #f4ecd8;
}

/* ---------- Badges + chips ---------- */

.lp-badge {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.lp-badge--tag {
    font-size: 13px;
    padding: 6px 12px;
    letter-spacing: 0;
    text-transform: none;
}

.lp-chip {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .4);
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.lp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Cards ---------- */

/* Basic dark card */
.lp-card {
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 26px 24px;
    background: #0d1322;
}

/* Diamond-marker card (homepage "more features", class strengths, kv strips) */
.lp-more-card {
    display: flex;
    gap: 16px;
    border: 1px solid rgba(139, 147, 167, .18);
    border-radius: 6px;
    padding: 24px;
    background: rgba(13, 19, 34, .5);
    transition: border-color .25s ease;
}

.lp-more-card:hover {
    border-color: rgba(218, 165, 32, .45);
}

.lp-more-card--gold {
    border-color: rgba(218, 165, 32, .2);
    background: #0d1322;
}

.lp-more-card--gold:hover {
    border-color: rgba(255, 215, 0, .55);
}

.lp-more-diamond {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: 6px;
}

.lp-more-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-more-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #e8c352;
}

.lp-more-body {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-more-body strong {
    color: #f4ecd8;
}

/* Gold-top-border feature card (fighting styles, spell types, class features) */
.lp-goldtop-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(218, 165, 32, .25);
    border-top: 2px solid rgba(218, 165, 32, .55);
    border-radius: 6px;
    padding: 26px 24px;
    background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(218, 165, 32, .1), transparent), #0d1322;
    transition: transform .25s ease, box-shadow .25s ease;
}

.lp-goldtop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(218, 165, 32, .18);
}

.lp-goldtop-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-card-examples {
    font-size: 14px;
    line-height: 1.5;
    color: #7b8499;
    margin-top: auto;
}

.lp-card-examples-label {
    color: #e8c352;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* Ability card (active abilities grid) */
.lp-ability-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 24px;
    background: #0d1322;
    transition: border-color .25s ease;
}

.lp-ability-card:hover {
    border-color: rgba(255, 215, 0, .55);
}

.lp-ability-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
}

.lp-ability-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-ability-unlock {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8b93a7;
    white-space: nowrap;
    text-transform: uppercase;
}

.lp-effect {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
}

.lp-ability-body {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-ability-body strong {
    color: #f4ecd8;
}

/* Wide gradient passive card */
.lp-passive-card {
    border: 1px solid rgba(218, 165, 32, .25);
    border-radius: 6px;
    padding: 24px;
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
}

.lp-passive-card .lp-effect {
    margin-top: 10px;
}

.lp-passive-card .lp-ability-body {
    margin-top: 8px;
}

/* Equipment row: gold tag badge + name/description */
.lp-equip-row {
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 18px 20px;
    background: #0d1322;
}

.lp-equip-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-equip-desc {
    font-size: 15px;
    color: #98a1b5;
    margin-top: 2px;
}

/* Linked entity card (image-topped: caster classes, pets, related classes) */
.lp-entity-card {
    display: flex;
    flex-direction: column;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.lp-entity-card:hover {
    border-color: rgba(255, 215, 0, .65);
    transform: translateY(-3px);
}

.lp-entity-art {
    position: relative;
}

.lp-entity-art img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center top;
    background: #0b1120;
}

.lp-entity-art .lp-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    letter-spacing: .16em;
    padding: 4px 9px;
}

.lp-entity-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 20px;
}

.lp-entity-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.lp-entity-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #f4ecd8;
    text-transform: uppercase;
}

.lp-entity-stat {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-primary);
    white-space: nowrap;
}

.lp-entity-desc {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-entity-meta {
    font-size: 14px;
    color: #7b8499;
}

.lp-entity-meta .lp-entity-meta-key {
    color: #e8c352;
}

/* Related class card (16:15 portrait) */
.lp-related-card .lp-entity-art img {
    aspect-ratio: 16 / 15;
}

/* ---------- Diamond bullet lists ---------- */

.lp-dlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-dlist > li,
.lp-dlist-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-dlist--lg > li,
.lp-dlist--lg .lp-dlist-item {
    font-size: 16px;
    color: #aeb7c9;
}

.lp-dlist strong {
    color: #f4ecd8;
}

.lp-dlist-diamond {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-darker));
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: 7px;
}

.lp-dlist-diamond--hollow {
    background: none;
    border: 1px solid #8b93a7;
}

/* Numbered gold circle rows (stat priority, process steps) */
.lp-num-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-num-row strong {
    color: #f4ecd8;
}

.lp-num-circle {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Gold LVL label rows (ability priority by level) */
.lp-lvl-row {
    display: flex;
    gap: 14px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #98a1b5;
}

.lp-lvl-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
    width: 74px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---------- Progress / percentage bars ---------- */

.lp-bar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lp-bar-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #8b93a7;
    width: 64px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.lp-bar-track {
    flex: 1;
    height: 22px;
    background: rgba(13, 19, 34, .8);
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 3px;
    overflow: hidden;
}

.lp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-darker), var(--color-primary));
}

.lp-bar-value {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--color-primary);
    width: 70px;
    text-align: right;
    flex-shrink: 0;
}

.lp-bar-row--slim .lp-bar-track {
    height: 18px;
}

.lp-bar-row--slim .lp-bar-label {
    width: 104px;
    font-size: 15px;
    font-weight: 800;
    color: #f4ecd8;
    letter-spacing: 0;
}

.lp-bar-row--slim .lp-bar-value {
    font-size: 14px;
    width: 48px;
}

/* ---------- Formula box + monospace ---------- */

.lp-formula-box {
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 13px;
    color: var(--color-primary);
    background: rgba(11, 17, 32, .8);
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 4px;
    padding: 10px 14px;
}

.lp-formula-box code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---------- Key/value cooldown-style rows ---------- */

.lp-cd-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(11, 17, 32, .7);
    border: 1px solid rgba(139, 147, 167, .12);
    border-radius: 4px;
}

.lp-cd-name {
    font-size: 15.5px;
    color: #aeb7c9;
}

.lp-cd-value {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* ---------- Callout panel (PRIORITY RULE style) ---------- */

.lp-callout {
    border: 1px solid rgba(218, 165, 32, .4);
    border-radius: 6px;
    padding: 24px 26px;
    background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(218, 165, 32, .12), transparent), #0d1322;
}

.lp-callout-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2em;
    color: var(--color-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.lp-callout-label .material-icons {
    font-size: 15px;
}

.lp-callout-body {
    font-size: 17px;
    line-height: 1.6;
    color: #c9d1e0;
}

.lp-callout-body strong {
    color: #f4ecd8;
}

/* ---------- Spell list panels (class spell lists with avatar headers) ---------- */

.lp-avatar-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(218, 165, 32, .2);
    background: linear-gradient(90deg, rgba(30, 41, 59, .5), rgba(13, 19, 34, .4));
}

.lp-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: #0b1120;
    border: 1px solid rgba(218, 165, 32, .5);
    display: block;
}

.lp-avatar-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lp-avatar-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #f4ecd8;
}

.lp-avatar-tagline {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #e8c352;
    margin-top: 3px;
    text-transform: uppercase;
}

.lp-spell-row {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(139, 147, 167, .1);
}

.lp-spell-row:last-child {
    border-bottom: none;
}

.lp-spell-name {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: #e8c352;
}

.lp-spell-desc {
    font-size: 14.5px;
    line-height: 1.45;
    color: #98a1b5;
    margin-top: 3px;
}

/* ---------- Screen-reader-only utility ---------- */

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

/* ---------- Larger ornament variant (index hero) ---------- */

.lp-ornament--lg .lp-orn-line {
    width: 72px;
}

.lp-ornament--lg .lp-orn-diamond {
    width: 9px;
    height: 9px;
}

/* ---------- Filter tab buttons (/classes) ---------- */

.lp-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 6vw, 52px);
}

.lp-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 11px 24px;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
    background: transparent;
    color: #c9d1e0;
    border: 1px solid rgba(218, 165, 32, .35);
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.lp-filter-btn .material-icons {
    font-size: 14px;
}

.lp-filter-btn--active,
.lp-filter-btn--active:hover {
    color: #0b1120;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: 1px solid transparent;
    box-shadow: 0 0 18px rgba(218, 165, 32, .4);
}

/* ---------- Classes index cards ---------- */

.lp-index-hero {
    background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(30, 41, 59, .7), transparent), #070b16;
    padding-bottom: clamp(48px, 8vw, 80px);
}

.lp-index-grid-section {
    padding: 0 24px clamp(56px, 9vw, 100px);
    background: #070b16;
}

.lp-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 22px;
}

.lp-index-card-slot {
    display: flex;
}

.lp-index-card-slot .lp-index-card {
    flex: 1;
}

.lp-index-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #0d1322;
    border: 1px solid rgba(218, 165, 32, .22);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.lp-index-card:hover {
    border-color: rgba(255, 215, 0, .6);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(218, 165, 32, .15);
}

.lp-index-card .lp-entity-art img {
    object-position: left top;
    background: var(--color-bg-base);
}

.lp-index-card .lp-badge--art {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    letter-spacing: .18em;
    padding: 5px 11px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.lp-index-card .lp-badge--art .material-icons {
    font-size: 12px;
}

.lp-index-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 24px;
    flex: 1;
}

.lp-index-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.lp-index-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #f4ecd8;
}

.lp-role-chip {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #e8c352;
    border: 1px solid rgba(218, 165, 32, .4);
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.lp-index-desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: #98a1b5;
}

.lp-ministats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    border-top: 1px solid rgba(139, 147, 167, .14);
    border-bottom: 1px solid rgba(139, 147, 167, .14);
    padding: 12px 0;
}

.lp-ministat-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #8b93a7;
    text-transform: uppercase;
}

.lp-ministat-value {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: #f4ecd8;
    margin-top: 4px;
}

.lp-ministat-value--gold {
    color: var(--color-primary);
}

.lp-index-card .lp-card-link {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
}

/* ---------- Guide link cards (homepage guides section + related-guides blocks) ---------- */

.lp-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.lp-guide-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(218, 165, 32, .2);
    border-radius: 6px;
    padding: 24px 22px;
    background: #0d1322;
    transition: border-color .25s ease, background .25s ease;
}

.lp-guide-card:hover {
    border-color: rgba(255, 215, 0, .6);
    background: #101830;
}

.lp-guide-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #f4ecd8;
}

.lp-guide-body {
    font-size: 15px;
    line-height: 1.5;
    color: #98a1b5;
}

/* ---------- Shared grids ---------- */

.lp-grid {
    display: grid;
    gap: 18px;
}

.lp-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-grid--250 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.lp-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.lp-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.lp-grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.lp-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-stack--sm {
    gap: 8px;
}

.lp-stack--lg {
    gap: 14px;
}

/* ---------- Final CTA ---------- */

.lp-final-cta {
    position: relative;
    padding: clamp(64px, 12vw, 140px) 24px;
    background: url('/images/splash/hero-bg-1080p.webp') center / cover no-repeat;
    border-top: 1px solid rgba(218, 165, 32, .14);
    text-align: center;
}

.lp-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(7, 11, 22, .85), rgba(7, 11, 22, .62) 50%, rgba(7, 11, 22, .9));
}

.lp-final-cta-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lp-final-cta-logo {
    height: 64px;
    width: auto;
}

.lp-final-cta-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    color: #f4ecd8;
}

.lp-final-cta-sub {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: #aeb7c9;
}

.lp-final-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

.lp-final-cta .lp-btn-outline-hero {
    background: transparent;
}

/* ---------- Footer ---------- */

.lp-home-footer {
    border-top: 1px solid rgba(218, 165, 32, .18);
    background: var(--color-bg-base);
    padding: 40px 24px;
}

.lp-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.lp-footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lp-footer-logo {
    height: 34px;
    width: auto;
}

.lp-footer-copyright {
    font-size: 14.5px;
    color: #7b8499;
}

.lp-footer-links {
    display: flex;
    gap: 26px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
}

.lp-footer-links a {
    color: #98a1b5;
    transition: color .2s ease;
}

.lp-footer-links a:hover {
    color: var(--color-primary);
}

/* ---------- Responsive (canonical breakpoints only) ---------- */

@media (max-width: 960px) {
    .lp-nav-links {
        display: none;
    }

    .lp-top-nav {
        padding: 12px 16px;
    }

    /* LOGIN and the ALPHA badge move into the drawer; the gold CTA stays in the
       bar so the primary action survives without opening the menu. */
    .lp-nav-actions .lp-nav-login,
    .lp-nav-actions .lp-alpha-badge {
        display: none;
    }

    .lp-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 1px solid rgba(218, 165, 32, .35);
        border-radius: 3px;
        color: var(--color-primary);
        cursor: pointer;
        transition: border-color .2s ease, background .2s ease;
    }

    .lp-nav-toggle:hover {
        border-color: var(--color-primary);
        background: rgba(218, 165, 32, .1);
    }

    .lp-nav-toggle .material-icons {
        font-size: 24px;
    }

    .lp-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(3, 6, 14, .72);
        opacity: 0;
        visibility: hidden;
        touch-action: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    .lp-mobile-backdrop-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s;
    }

    .lp-mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        width: min(320px, 86vw);
        padding: 12px 22px 28px;
        background: linear-gradient(180deg, #0b1120 0%, #070b16 100%);
        border-left: 1px solid rgba(218, 165, 32, .28);
        box-shadow: -18px 0 46px rgba(0, 0, 0, .55);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s ease, visibility 0s linear .28s;
    }

    .lp-mobile-menu-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s ease, visibility 0s;
    }

    .lp-mobile-menu-head {
        display: flex;
        justify-content: flex-end;
    }

    .lp-mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        color: #c9d1e0;
        cursor: pointer;
        transition: color .2s ease;
    }

    .lp-mobile-close:hover {
        color: var(--color-primary);
    }

    .lp-mobile-links {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
    }

    .lp-mobile-link {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .14em;
        color: #c9d1e0;
        padding: 16px 2px;
        border-bottom: 1px solid rgba(218, 165, 32, .14);
        transition: color .2s ease;
    }

    .lp-mobile-link:hover,
    .lp-mobile-link.lp-mobile-link-active {
        color: var(--color-primary);
    }

    .lp-mobile-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: auto;
        padding-top: 28px;
    }

    .lp-mobile-alpha {
        align-self: flex-start;
    }

    .lp-mobile-login {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .12em;
        text-align: center;
        color: #c9d1e0;
        padding: 13px 16px;
        border: 1px solid rgba(218, 165, 32, .5);
        border-radius: 3px;
        transition: color .2s ease, border-color .2s ease;
    }

    .lp-mobile-login:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .lp-mobile-cta {
        text-align: center;
        padding: 14px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-mobile-menu,
    .lp-mobile-menu-open,
    .lp-mobile-backdrop,
    .lp-mobile-backdrop-open {
        transition: none;
    }
}

@media (max-width: 768px) {
    /* Class hero: text column first, portrait below at reduced size */
    .lp-portrait {
        order: 2;
        max-width: 320px;
    }

    .lp-class-intro {
        order: 1;
    }
}

@media (max-width: 480px) {
    /* Square mark instead of the wordmark lockup: the bar has to hold the CTA
       and the menu toggle at 360px without wrapping. */
    .lp-nav-logo {
        display: none;
    }

    .lp-nav-logo-mark {
        display: block;
        width: 34px;
        height: 34px;
    }

    .lp-top-nav {
        gap: 12px;
    }

    .lp-nav-actions {
        gap: 10px;
    }

    .lp-btn-nav {
        font-size: 11px;
        padding: 8px 12px;
    }

    .lp-mobile-menu {
        width: min(300px, 88vw);
    }
}