.km-page { overflow: hidden; }
.km-page .section { position: relative; }
.km-page .eyebrow { margin-bottom: var(--space-2); }
.km-page a { font-weight: 700; }
.km-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: var(--space-5); }
.km-breadcrumb a { font-weight: 600; }
.km-hero { padding-top: var(--space-7); background: linear-gradient(120deg, var(--color-ice-white) 0%, var(--color-ice-white) 72%, var(--color-soft-lavender) 72%); }
.km-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: center; }
.km-hero__copy, .km-hero__media { min-width: 0; width: 100%; }
.km-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.km-hero__copy h1, .km-hero__copy p { margin: 0; }
.km-hero__copy h1 { max-width: 38rem; }
.km-hero__lead { max-width: 38rem; font-size: var(--text-lead); line-height: 1.4; }
.km-hero__cta { min-height: 3rem; }
.km-source-note { width: min(100%, 27.5rem); display: flex; flex-direction: column; gap: var(--space-3); border-top: 3px solid var(--color-electric-turquoise); padding-top: var(--space-3); }
.km-source-note p { font-size: var(--text-sm); line-height: 1.5; }
.km-hero__media { position: relative; overflow: hidden; border: 2px solid var(--color-royal-purple); border-radius: var(--radius-panel); aspect-ratio: 4 / 3; background: var(--color-royal-purple); }
.km-hero__media::after, .km-arena-image::after, .km-incursions__image::after { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .035; background-image: radial-gradient(var(--color-electric-turquoise) 1px, transparent 1px); background-size: 7px 7px; }
.km-hero__media img, .km-arena-image img, .km-incursions__image img { width: 100%; height: 100%; object-fit: cover; }
.km-media-tags { position: absolute; right: var(--space-4); bottom: var(--space-4); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.km-media-tags span, .km-group-tags span { border: 1px solid rgba(247,249,252,.7); background: rgba(32,35,43,.8); color: var(--color-ice-white); padding: .3rem .5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; }
.km-section-intro { width: min(100%, 42.5rem); margin-bottom: var(--space-6); }
.km-section-intro h2, .km-section-intro p { margin: 0; }
.km-section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.km-quest-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.km-knowledge-card, .km-alliance-step, .km-bg-panel, .km-mini-card, .km-growth-step, .km-next-card, .km-closing__action { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-line-silver); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); }
.km-knowledge-card > *, .km-alliance-step > *, .km-bg-panel > *, .km-mini-card > *, .km-growth-step > *, .km-next-card > *, .km-closing__action > * { margin: 0; }
.km-knowledge-card--mechanic { border-top: 3px solid var(--color-electric-turquoise); }
.km-knowledge-card--strategy { border-top: 3px solid var(--color-royal-purple); background: var(--color-soft-lavender); }
.km-card-number { color: var(--color-text-muted); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; }
.km-knowledge-card h3 { font-size: clamp(1.6rem, 2.5vw, 1.75rem); }
.km-knowledge-card a, .km-alliance-step a, .km-mini-card a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.km-arenas { background: linear-gradient(180deg, var(--color-paper-white), var(--color-ice-white)); }
.km-section-intro--arena { width: min(100%, 34.5rem); }
.km-arena-top, .km-arena-bottom { display: grid; gap: var(--space-5); align-items: center; }
.km-arena-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: var(--space-5); }
.km-arena-bottom { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.km-arena-image, .km-incursions__image { position: relative; min-width: 0; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--color-line-silver); border-radius: var(--radius-card); aspect-ratio: 16 / 10; background: var(--color-royal-purple); }
.km-arena-copy { min-width: 0; width: 100%; }
.km-arena-copy h3 { margin-bottom: var(--space-4); }
.km-arena-copy p { max-width: 34rem; }
.km-group-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.km-group-tags span { border-color: var(--color-line-silver); background: var(--color-paper-white); color: var(--color-graphite); }
.km-arena-callout { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-left: 4px solid var(--color-royal-purple); background: var(--color-soft-lavender); padding: var(--space-5); }
.km-arena-callout > * { margin: 0; }
.km-arena-callout p { max-width: 17.5rem; }
.km-arena-callout a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.km-alliance__layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); }
.km-alliance__path { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); position: relative; }
.km-section-intro--alliance { width: min(100%, 40rem); }
.km-alliance-step { width: min(100%, 42.5rem); margin-inline: auto; position: relative; }
.km-alliance-step::before { position: absolute; top: calc(-1 * var(--space-5)); left: 1.75rem; width: 2px; height: var(--space-5); background: var(--color-electric-turquoise); content: ""; }
.km-alliance-step--strategy { background: var(--color-soft-lavender); border-color: var(--color-royal-purple); }
.km-inline-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.km-inline-links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.km-alliance__aside { min-width: 0; width: 100%; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); color: var(--color-royal-purple); font-family: var(--font-heading); font-size: 2rem; font-weight: 800; letter-spacing: .04em; opacity: .3; }
.km-wars { background: var(--color-ice-white); }
.km-wars__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border: 1px solid rgba(247,249,252,.5); border-radius: var(--radius-panel); background: var(--color-royal-purple); color: var(--color-ice-white); }
.km-wars__copy { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-7); }
.km-wars__copy > * { margin: 0; }
.km-wars__copy h2, .km-wars__copy h3 { color: var(--color-ice-white); }
.km-wars__copy h2 { max-width: 40.625rem; }
.km-wars__copy > p { width: min(100%, 40.625rem); }
.km-badge-light { border-color: var(--color-electric-turquoise); background: var(--color-electric-turquoise); color: var(--color-graphite); }
.km-wars__note { width: min(100%, 40.625rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--color-soft-lavender); color: var(--color-graphite); padding: var(--space-5); }
.km-wars__note > * { margin: 0; }
.km-wars__note h3 { color: var(--color-royal-purple); }
.km-wars__note a { color: var(--color-royal-purple); }
.km-wars__texture { min-width: 0; width: 100%; background-image: radial-gradient(rgba(247,249,252,.34) 1px, transparent 1px), linear-gradient(135deg, transparent 42%, rgba(8,174,184,.4) 43%, transparent 44%); background-size: 8px 8px, 100% 100%; }
.km-section-intro--battlegrounds { width: min(100%, 40rem); }
.km-battlegrounds__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
.km-bg-panel { border-top: 3px solid var(--color-electric-turquoise); }
.km-bg-panel--strategy { margin-top: var(--space-7); border-color: var(--color-royal-purple); background: var(--color-soft-lavender); }
.km-bg-panel__lead { max-width: 35rem; font-size: var(--text-lead); line-height: 1.4; font-weight: 600; }
.km-bg-panel p:not(.km-bg-panel__lead) { max-width: 35rem; }
.km-section-intro--incursions { width: min(100%, 40rem); }
.km-incursions__feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: center; }
.km-incursions__image { aspect-ratio: 3 / 2; }
.km-incursions__copy { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.km-incursions__copy > * { margin: 0; }
.km-incursions__copy p { max-width: 32.5rem; }
.km-incursions__lead { font-size: var(--text-lead); line-height: 1.4; font-weight: 600; }
.km-incursions__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.km-mini-card--mechanic { border-color: var(--color-electric-turquoise); }
.km-section-intro--growth { width: min(100%, 40.625rem); }
.km-growth__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); position: relative; }
.km-growth-step { position: relative; border-top: 3px solid var(--color-electric-turquoise); }
.km-growth-step--accent { border-color: var(--color-royal-purple); background: var(--color-soft-lavender); }
.km-step-index { color: var(--color-flame-orange); font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.km-strategy-line { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); border-top: 1px solid var(--color-line-silver); padding-top: var(--space-3); }
.km-strategy-line p { font-size: var(--text-sm); }
.km-growth-step > a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.km-section-intro--next { width: min(100%, 37.5rem); }
.km-next__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.km-next-card { min-height: 100%; }
.km-next-card--orange { border-top: 4px solid var(--color-flame-orange); }
.km-next-card--purple { border-top: 4px solid var(--color-royal-purple); }
.km-next-card--turquoise { border-top: 4px solid var(--color-electric-turquoise); }
.km-next-card--dual { border-top: 4px solid var(--color-flame-orange); background-image: linear-gradient(to right, transparent 70%, var(--color-electric-turquoise) 70%); background-size: 100% 4px; background-repeat: no-repeat; }
.km-card-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }
.km-card-links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.km-closing { background: var(--color-ice-white); }
.km-closing .container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.km-closing__disclaimer { width: min(100%, 40.625rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-left: 4px solid var(--color-electric-turquoise); padding-left: var(--space-4); }
.km-closing__disclaimer > * { margin: 0; }
.km-closing__actions { width: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--space-5); }
.km-closing__action { grid-column: span 1; }
.km-closing__action > .button { margin-top: auto; }
@media (pointer: fine) and (hover: hover) { .km-knowledge-card, .km-next-card { transition: transform var(--transition-base), box-shadow var(--transition-base); } .km-knowledge-card:hover, .km-next-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); } .km-hero__media img, .km-arena-image img, .km-incursions__image img { transition: transform var(--transition-base); } .km-hero__media:hover img, .km-arena-image:hover img, .km-incursions__image:hover img { transform: scale(1.03); } }
@media (max-width: 63.75rem) { .km-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .km-hero__copy h1 { font-size: clamp(3.25rem, 6vw, 3.75rem); } }
@media (max-width: 61.25rem) { .km-quest-cards, .km-growth__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .km-quest-cards > :last-child, .km-growth__steps > :last-child { grid-column: span 1; } .km-wars__panel { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); } }
@media (max-width: 60rem) { .km-arena-top, .km-arena-bottom { grid-template-columns: 1fr; } .km-arena-copy p { max-width: 34rem; } .km-arena-callout { width: min(100%, 35rem); } .km-alliance__layout { grid-template-columns: minmax(0, 10fr) minmax(0, 2fr); } .km-incursions__feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56.25rem) { .km-alliance__layout { grid-template-columns: 1fr; } .km-alliance__aside { display: none; } .km-alliance-step { margin-inline: 0; } }
@media (max-width: 62.5rem) { .km-battlegrounds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .km-bg-panel--strategy { margin-top: 0; } }
@media (max-width: 50rem) { .km-wars__panel { grid-template-columns: 1fr; } .km-wars__texture { display: none; } .km-wars__copy { padding: var(--space-6); } .km-closing__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.5rem) { .km-hero { padding-top: var(--space-6); background: var(--color-ice-white); } .km-hero__grid, .km-battlegrounds__grid, .km-incursions__feature, .km-incursions__cards, .km-next__grid { grid-template-columns: 1fr; } .km-hero__copy { gap: var(--space-3); } .km-hero__copy h1 { font-size: 2.5rem; line-height: 1.05; } .km-hero__lead { font-size: 1.125rem; line-height: 1.55; } .km-hero__cta { width: 100%; } .km-hero__media { order: 2; } .km-quest-cards, .km-growth__steps { grid-template-columns: 1fr; gap: var(--space-4); } .km-section-intro { margin-bottom: var(--space-5); } .km-section-intro h2 { font-size: 2rem; line-height: 1.125; } .km-arena-top, .km-arena-bottom { gap: var(--space-4); } .km-alliance__path { gap: var(--space-4); } .km-alliance-step::before { top: calc(-1 * var(--space-4)); height: var(--space-4); } .km-bg-panel--strategy { margin-top: 0; } .km-incursions__feature { gap: var(--space-4); } .km-incursions__image { order: 0; } .km-incursions__copy { order: 1; } .km-closing__actions { grid-template-columns: 1fr; gap: var(--space-3); } .km-closing__action { width: 100%; } .km-card-links, .km-inline-links { width: 100%; flex-direction: column; gap: var(--space-2); } .km-card-links a, .km-inline-links a { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .km-knowledge-card, .km-next-card, .km-hero__media img, .km-arena-image img, .km-incursions__image img { transition: none; transform: none; } }