<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Army Builder — War Dungeon</title>
<link rel="preconnect" href="https://use.typekit.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://use.typekit.net/onl7dxx.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Literata:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ============================================================
Tokens — Frontier styleguide (SWD1), War Dungeon
============================================================ */
:root {
/* Chromatic identifiers (accents only — never used for backgrounds) */
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--brass: #B08D57;
--copper: #A35F3A;
--white: #FFFFFF;
--positive: #4A6E50;
--negative: #C8442D;
/* Brand-token semantics (aligned to styleguide table) */
--primary: var(--rodeo);
--secondary: var(--rodeo-light);
--tertiary: var(--bronze);
--dark: var(--liquourice);
--neutral: var(--cowboy);
--light: var(--white);
--text: var(--caput);
--accent: var(--sienna);
/* Surface semantics (use for `background` / `background-color`) */
--bg-primary: var(--rodeo);
--bg-secondary: var(--rodeo-light);
--bg-tertiary: var(--bronze);
--bg-dark: var(--liquourice);
--bg-neutral: var(--cowboy);
--bg-card-on-light: var(--rodeo-light);
--bg-card-on-dark: var(--liquourice);
--bg-panel-darker: var(--liquourice);
--bg-panel-stamp: var(--sienna);
/* Text per ground (always governed by ground) */
--text-on-light: var(--caput);
--text-on-dark: var(--white);
--text-on-card-light: var(--caput);
--text-on-card-dark: var(--white);
--text-on-stamp: var(--white);
--text-eyebrow: var(--sienna);
/* Type */
--font-display: "modesto-condensed", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-body: "Palatino Linotype", "Palatino", "EB Garamond", "Literata", Georgia, serif;
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 20px;
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--fs-micro: 12px;
--body-lg: var(--fs-body-lg);
--body: var(--fs-body);
--body-sm: var(--fs-body-sm);
--micro: var(--fs-micro);
/* Letter spacing */
--ls-tight: -0.01em;
--ls-heading: 0;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* Line height */
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
/* Spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* Radii */
--r-none: 0px;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* Shadows (hard-edged, no blur) */
--shadow-sm: 2px 2px 0 rgba(27, 19, 20, 0.85);
--shadow-md: 4px 4px 0 rgba(27, 19, 20, 0.9);
--shadow-lg: 6px 6px 0 rgba(27, 19, 20, 0.95);
--shadow-xl: 8px 8px 0 rgba(27, 19, 20, 1);
--shadow-stamp: 3px 3px 0 var(--caput);
/* Gear pattern ornament */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='none' stroke='%23F4A479' stroke-opacity='0.07' stroke-width='1'><circle cx='90' cy='90' r='24'/><circle cx='90' cy='90' r='40'/><circle cx='90' cy='90' r='56'/><path d='M90 4v18M90 158v18M4 90h18M158 90h18'/></g></svg>");
}
/* ============================================================
Base
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-primary);
color: var(--text-on-light);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container--wide { max-width: 1440px; }
/* ============================================================
Rivet utility (shared chrome — used by many blocks)
============================================================ */
.rivet-panel { position: relative; }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); border: 1px solid var(--caput); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); z-index: 2; }
.rivet--tl { top: 10px; left: 10px; }
.rivet--tr { top: 10px; right: 10px; }
.rivet--bl { bottom: 10px; left: 10px; }
.rivet--br { bottom: 10px; right: 10px; }
/* ============================================================
btn (REUSED verbatim from catalogue)
============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-family: var(--font-display); font-size: var(--fs-body-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--light); background: var(--sienna); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); text-decoration: none; cursor: pointer; transition: transform 120ms linear; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 1px var(--caput), 4px 4px 0 var(--caput); }
.btn--ghost { color: var(--bronze); background: transparent; }
.btn--lg { padding: 18px 36px; font-size: var(--fs-h4); }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 10px 18px; font-size: var(--fs-body-sm); }
/* ============================================================
eyebrow-stamp (REUSED verbatim from catalogue)
============================================================ */
.eyebrow-stamp { display: inline-block; padding: 6px 16px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--caput); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); }
/* ============================================================
stamped-roundel (REUSED verbatim from catalogue)
============================================================ */
.stamped-roundel { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 50%; background: var(--bronze); color: var(--liquourice); border: 4px solid var(--caput); border-style: ridge; text-align: center; box-shadow: var(--shadow-md); flex-shrink: 0; font-family: var(--font-display); letter-spacing: var(--ls-wide); text-transform: uppercase; position: relative; }
.stamped-roundel::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; pointer-events: none; }
.stamped-roundel--review { width: 86px; height: 86px; font-size: 13px; }
.stamped-roundel--review .stars { font-size: 22px; line-height: 1; }
.stamped-roundel--loyalty { width: 140px; height: 140px; }
.stamped-roundel--loyalty .num { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.stamped-roundel--loyalty .label { font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 4px; line-height: 1.1; }
.stamped-roundel--stat { width: 124px; height: 124px; }
.stamped-roundel--stat .num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--liquourice); }
.stamped-roundel--stat .label { font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 4px; line-height: 1.15; color: var(--liquourice); }
/* ============================================================
section-head (REUSED verbatim from catalogue)
============================================================ */
.section-head { text-align: center; margin-bottom: 64px; }
.section-head__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(40px, 6vw, var(--fs-h1)); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-on-dark); }
.section-head--on-light .section-head__title { color: var(--text-on-light); }
.section-head__rule { display: block; width: 120px; height: 4px; margin: 12px auto 16px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.section-head__lede { max-width: 640px; margin: 0 auto; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); }
.section-head--on-light .section-head__lede { color: var(--caput); }
/* ============================================================
plated-frame (REUSED verbatim from catalogue)
============================================================ */
.plated-frame { position: relative; padding: 8px; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); margin: 0; }
.plated-frame__media { position: relative; overflow: hidden; background: var(--cowboy); border: 1px solid var(--caput); }
.plated-frame__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ============================================================
gear-divider (REUSED verbatim from catalogue)
============================================================ */
.gear-divider { height: 36px; background-color: var(--liquourice); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'><g fill='none' stroke='%23F4A479' stroke-width='1.4'><line x1='0' y1='18' x2='200' y2='18'/><line x1='0' y1='14' x2='200' y2='14' stroke-opacity='0.35'/><line x1='0' y1='22' x2='200' y2='22' stroke-opacity='0.35'/><circle cx='50' cy='18' r='8'/><circle cx='50' cy='18' r='12'/><path d='M50 3v3M50 30v3M35 18h3M62 18h3'/><circle cx='50' cy='18' r='3' fill='%23F4A479'/><circle cx='150' cy='18' r='8'/><circle cx='150' cy='18' r='12'/><path d='M150 3v3M150 30v3M135 18h3M162 18h3'/><circle cx='150' cy='18' r='3' fill='%23F4A479'/></g></svg>"); background-repeat: repeat-x; border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); }
/* ============================================================
announcement-bar (REUSED verbatim from catalogue)
============================================================ */
.announcement-bar { background: var(--bg-panel-stamp); border-top: 2px ridge var(--bronze); border-bottom: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); color: var(--text-on-stamp); }
.announcement-bar__inner { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 44px; padding: 8px 40px; max-width: 1440px; margin: 0 auto; }
.announcement-bar__msg { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; }
.announcement-bar__msg::before, .announcement-bar__msg::after { content: ""; width: 28px; height: 6px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 6'><path d='M0 3h28' stroke='%23F4A479' stroke-width='1.2'/><circle cx='14' cy='3' r='2' fill='%23F4A479'/></svg>"); }
.announcement-bar__rotator { display: inline-flex; align-items: center; gap: 12px; }
.announcement-bar__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bronze); opacity: 0.4; }
.announcement-bar__dot--active { opacity: 1; box-shadow: 0 0 0 2px rgba(244,164,121,0.25); }
/* ============================================================
site-header (REUSED verbatim from catalogue)
============================================================ */
.site-header { background: var(--bg-panel-darker); border-bottom: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 16px 40px; max-width: 1440px; margin: 0 auto; }
.site-header__brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); background: var(--liquourice); text-decoration: none; }
.site-header__cog { width: 28px; height: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23F4A479' stroke-width='1.4'><circle cx='14' cy='14' r='5'/><circle cx='14' cy='14' r='9'/><path d='M14 1v4M14 23v4M1 14h4M23 14h4M5 5l3 3M20 20l3 3M23 5l-3 3M5 23l3-3'/></svg>"); }
.site-header__word { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); line-height: 1; }
.site-header__word small { display: block; font-size: 9px; color: var(--rodeo-light); margin-top: 2px; }
.site-header__nav { display: flex; gap: 0; justify-content: center; }
.site-header__nav-item { position: relative; padding: 12px 16px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--rodeo-light); text-decoration: none; }
.site-header__nav-item + .site-header__nav-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 999px; background: var(--bronze); transform: translate(-3px, -50%); }
.site-header__nav-item--has-mega::after { content: " ▾"; font-size: 10px; color: var(--bronze); }
.site-header__nav-item.is-active { color: var(--bronze); }
.site-header__tools { display: flex; gap: 12px; align-items: center; }
.site-header__tool { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); color: var(--bronze); text-decoration: none; }
.site-header__tool--basket { width: auto; padding: 0 12px; gap: 8px; font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.site-header__points { padding: 2px 6px; font-size: 10px; background: var(--bronze); color: var(--liquourice); border-radius: 999px; border: 1px solid var(--caput); }
/* ============================================================
breadcrumbs (REUSED verbatim from catalogue)
============================================================ */
.breadcrumbs { background: var(--rodeo); border-top: 1px solid var(--caput); border-bottom: 1px solid var(--caput); padding: var(--sp-4) 0; color: var(--caput); font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--ls-wider); }
.breadcrumbs__inner { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.breadcrumbs__sep { color: var(--sienna); margin: 0 var(--sp-1); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs__item--current { color: var(--sienna); }
/* ============================================================
tool-landing-hero (NEW — Gap #1 per brief)
Two-column hero: content LEFT, tool-UI preview RIGHT.
============================================================ */
.tool-landing-hero { background-color: var(--cowboy); background-image: var(--gear-pattern); color: var(--text-on-dark); padding: var(--sp-9) 0 var(--sp-10); position: relative; }
.tool-landing-hero__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.tool-landing-hero__content { display: flex; flex-direction: column; max-width: 560px; }
.tool-landing-hero__eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.tool-landing-hero__chapter-mark { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.tool-landing-hero__chapter-mark::before { content: "⚙"; color: var(--bronze); font-size: 12px; }
.tool-landing-hero__title { margin: 0; font-family: var(--font-display); font-size: clamp(56px, 8vw, var(--fs-display)); line-height: 0.92; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.tool-landing-hero__title em { font-style: normal; color: var(--bronze); display: block; }
.tool-landing-hero__rule { display: block; width: 220px; height: 6px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); margin: 28px 0 24px; }
.tool-landing-hero__lede { margin: 0 0 40px; font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); }
.tool-landing-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.tool-landing-hero__meta { margin-top: 40px; padding-top: 24px; border-top: 1px dashed var(--caput); display: flex; gap: 28px; flex-wrap: wrap; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.tool-landing-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.tool-landing-hero__meta span::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--bronze); border: 1px solid var(--caput); }
.tool-landing-hero__preview { position: relative; }
.tool-landing-hero__stat { position: absolute; left: -32px; top: -32px; z-index: 4; }
/* The faux tool UI mockup itself */
.tool-mock { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 6px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-xl); padding: 0; overflow: hidden; }
.tool-mock__chrome { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.tool-mock__chrome-left { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.tool-mock__chrome-dots { display: inline-flex; gap: 5px; }
.tool-mock__chrome-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--caput); border: 1px solid var(--bronze); }
.tool-mock__chrome-tab { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--bronze); color: var(--liquourice); border: 1px solid var(--caput); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; }
.tool-mock__body { display: grid; grid-template-columns: 180px 1fr 200px; gap: 0; min-height: 420px; }
/* Faction selector rail */
.tool-mock__rail { padding: 16px 14px; border-right: 1px dashed var(--caput); background: var(--liquourice); }
.tool-mock__rail-head { font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--caput); }
.tool-mock__faction { display: flex; align-items: center; gap: 10px; padding: 8px 6px; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--rodeo-light); border-bottom: 1px dashed rgba(97,63,52,0.6); cursor: default; }
.tool-mock__faction:last-child { border-bottom: 0; }
.tool-mock__faction.is-active { background: var(--cowboy); color: var(--bronze); border-left: 3px solid var(--bronze); padding-left: 9px; margin-left: -6px; margin-right: -6px; }
.tool-mock__faction-dot { display: inline-block; width: 10px; height: 10px; background: var(--caput); border: 1px solid var(--bronze); border-radius: 50%; flex-shrink: 0; }
.tool-mock__faction.is-active .tool-mock__faction-dot { background: var(--bronze); }
/* Unit cards (center) */
.tool-mock__roster { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--cowboy); }
.tool-mock__roster-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); padding-bottom: 8px; border-bottom: 1px solid var(--caput); }
.tool-mock__unit { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; padding: 10px; background: var(--liquourice); border: 1px solid var(--caput); border-left: 3px solid var(--bronze); border-radius: var(--r-sm); }
.tool-mock__unit-thumb { width: 50px; height: 50px; background: var(--cowboy); border: 1px solid var(--bronze); display: flex; align-items: center; justify-content: center; color: var(--bronze); font-family: var(--font-display); font-size: 18px; }
.tool-mock__unit-name { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); line-height: 1.1; }
.tool-mock__unit-sub { font-family: var(--font-body); font-style: italic; font-size: 11px; color: var(--rodeo-light); margin-top: 3px; }
.tool-mock__unit-stepper { display: inline-flex; align-items: center; border: 1px solid var(--bronze); background: var(--cowboy); }
.tool-mock__unit-stepper button { width: 24px; height: 24px; background: transparent; color: var(--bronze); border: 0; font-family: var(--font-display); font-size: 14px; }
.tool-mock__unit-stepper span { padding: 0 8px; font-family: var(--font-display); font-size: 12px; color: var(--white); border-left: 1px solid var(--bronze); border-right: 1px solid var(--bronze); }
.tool-mock__unit-cost { display: block; font-family: var(--font-display); font-size: 13px; color: var(--bronze); margin-top: 4px; text-align: right; letter-spacing: var(--ls-wide); }
.tool-mock__add-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; background: transparent; color: var(--bronze); border: 1px dashed var(--bronze); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; margin-top: 2px; }
/* Points panel (right) */
.tool-mock__panel { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; align-items: center; background: var(--liquourice); border-left: 1px dashed var(--caput); }
.tool-mock__panel-head { font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.tool-mock__points-ring { width: 130px; height: 130px; border-radius: 50%; background: var(--bronze); border: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--liquourice); text-align: center; }
.tool-mock__points-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; }
.tool-mock__points-current { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.tool-mock__points-of { font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); margin-top: 4px; opacity: 0.7; }
.tool-mock__points-bar { width: 100%; height: 6px; background: var(--cowboy); border: 1px solid var(--bronze); position: relative; overflow: hidden; }
.tool-mock__points-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 75%; background: var(--bronze); }
.tool-mock__playstyle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--cowboy); border: 1px solid var(--bronze); color: var(--bronze); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; }
.tool-mock__playstyle::before { content: "◆"; font-size: 9px; }
.tool-mock__save-btn { width: 100%; padding: 10px 12px; background: var(--sienna); color: var(--white); border: 2px ridge var(--bronze); font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wide); text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); text-align: center; }
.tool-mock__share-btn { width: 100%; padding: 8px 12px; background: transparent; color: var(--bronze); border: 1px solid var(--bronze); font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; text-align: center; }
/* ============================================================
sub-category-billboard (REUSED verbatim from catalogue)
============================================================ */
.sub-category-billboard { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; color: var(--text-on-card-dark); text-decoration: none; transition: transform 120ms linear; }
.sub-category-billboard:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1px var(--caput), 6px 6px 0 var(--caput); }
.sub-category-billboard .rivet { width: 9px; height: 9px; }
.sub-category-billboard__media { position: relative; aspect-ratio: 4 / 3; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); overflow: hidden; }
.sub-category-billboard__media img { width: 100%; height: 100%; object-fit: cover; }
.sub-category-billboard__count { position: absolute; top: 14px; right: 14px; padding: 4px 12px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--liquourice); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.sub-category-billboard__body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sub-category-billboard__plate { display: inline-block; align-self: flex-start; padding: 4px 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--cowboy); border: 1px solid var(--bronze); border-radius: var(--r-sm); margin-bottom: 4px; }
.sub-category-billboard__title { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.05; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.sub-category-billboard__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--rodeo-light); font-style: italic; }
.sub-category-billboard__cta { margin-top: auto; padding-top: 20px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 10px; border-top: 1px dashed var(--caput); width: 100%; }
.sub-category-billboard__cta::after { content: "→"; transition: transform 120ms linear; }
.sub-category-billboard:hover .sub-category-billboard__cta::after { transform: translateX(4px); }
/* ============================================================
starter-path (REUSED verbatim from catalogue)
============================================================ */
.starter-path { display: flex; flex-direction: column; height: 100%; }
.starter-path__head { margin-bottom: 32px; }
.starter-path__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(32px, 4vw, var(--fs-h2)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.starter-path__rule { display: block; width: 100px; height: 4px; background: var(--bronze); margin: 12px 0 16px; }
.starter-path__lede { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--rodeo-light); font-style: italic; max-width: 480px; }
.starter-path__steps { display: flex; flex-direction: column; gap: 0; flex: 1; counter-reset: starter-step; }
.starter-path__step { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding: 28px 0; border-top: 1px dashed var(--caput); align-items: flex-start; counter-increment: starter-step; }
.starter-path__step:last-child { border-bottom: 1px dashed var(--caput); }
.starter-path__num { width: 64px; height: 64px; border-radius: 50%; background: var(--bronze); border: 4px solid var(--caput); border-style: ridge; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; color: var(--liquourice); box-shadow: var(--shadow-sm); position: relative; }
.starter-path__num::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; }
.starter-path__num::after { content: counter(starter-step, decimal-leading-zero); }
.starter-path__step-body { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.starter-path__step-title { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); line-height: 1.1; }
.starter-path__step-copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--rodeo-light); }
.starter-path__step-link { margin-top: 6px; font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding-bottom: 3px; border-bottom: 1px dashed var(--bronze); text-decoration: none; }
.starter-path__step-link::after { content: "→"; }
/* ============================================================
feature-tile (NEW — small 2x2 tile, the brief's "smaller than tool-card" variant)
============================================================ */
.feature-tile { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; color: var(--text-on-card-dark); min-height: 192px; }
.feature-tile .rivet { width: 7px; height: 7px; }
.feature-tile__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--caput); color: var(--bronze); }
.feature-tile__icon svg { width: 26px; height: 26px; stroke: var(--bronze); fill: none; stroke-width: 1.5; }
.feature-tile__title { margin: 0; font-family: var(--font-display); font-size: 18px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--white); line-height: 1.15; }
.feature-tile__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.45; color: var(--rodeo-light); font-style: italic; }
/* ============================================================
community-army-card (NEW — 4-up community army showcase
Brief listed catalogue names painting-tile/showcase-tile that do
not exist; closest catalogue painting-showcase tile only carries
image+caption, missing required name/handle/points/tags/CTA. )
============================================================ */
.community-army-card { position: relative; display: flex; flex-direction: column; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-card-dark); overflow: hidden; text-decoration: none; transition: transform 120ms linear; }
.community-army-card:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1px var(--caput), 6px 6px 0 var(--caput); }
.community-army-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); overflow: hidden; }
.community-army-card__media img { width: 100%; height: 100%; object-fit: cover; }
.community-army-card__points { position: absolute; top: 12px; right: 12px; min-width: 56px; height: 56px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; font-family: var(--font-display); font-size: 11px; line-height: 1; color: var(--liquourice); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.community-army-card__points strong { font-size: 16px; line-height: 1; }
.community-army-card__points small { font-size: 8px; letter-spacing: var(--ls-widest); margin-top: 2px; }
.community-army-card__system-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); box-shadow: 1px 1px 0 var(--caput); }
.community-army-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.community-army-card__handle { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.community-army-card__title { margin: 0; font-family: var(--font-display); font-size: 22px; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.1; color: var(--white); }
.community-army-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.community-army-card__tag { padding: 3px 8px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--rodeo-light); background: var(--cowboy); border: 1px solid var(--caput); border-radius: var(--r-sm); }
.community-army-card__cta { margin-top: auto; padding-top: 14px; font-family: var(--font-display); font-size: var(--fs-body-sm); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 8px; border-top: 1px dashed var(--caput); }
.community-army-card__cta::after { content: "→"; transition: transform 120ms linear; }
.community-army-card:hover .community-army-card__cta::after { transform: translateX(4px); }
/* ============================================================
product-card (REUSED verbatim from catalogue)
============================================================ */
.product-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--bg-card-on-dark); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-card-dark); }
.product-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--light); border-bottom: 2px ridge var(--bronze); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__game-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); }
.product-card__loyalty { position: absolute; top: 12px; right: 12px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-family: var(--font-display); font-size: 11px; color: var(--liquourice); background: var(--bronze); border: 2px ridge var(--bronze); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.product-card__body { padding: 24px; display: grid; gap: 12px; }
.product-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-card-dark); }
.product-card__rating { display: inline-flex; align-items: center; gap: 8px; color: var(--bronze); font-size: var(--fs-body-sm); }
.product-card__rating em { font-style: normal; color: var(--rodeo-light); font-family: var(--font-body); }
.product-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.product-card__price { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--bronze); line-height: 1; }
.product-card__quickview { padding: 10px 14px; font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--light); background: var(--sienna); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); cursor: pointer; }
/* ============================================================
guide-card (REUSED verbatim from catalogue)
============================================================ */
.guide-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); color: var(--text-on-dark); overflow: hidden; text-decoration: none; }
.guide-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--cowboy); border-bottom: 2px ridge var(--bronze); }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__badges { position: absolute; left: 12px; top: 12px; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.guide-card__badge { padding: 4px 12px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; background: var(--bronze); color: var(--liquourice); border: 1px solid var(--caput); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--caput); }
.guide-card__badge--time { background: var(--liquourice); color: var(--bronze); border-color: var(--bronze); }
.guide-card__body { padding: 24px 24px 32px; display: grid; gap: 12px; }
.guide-card__kicker { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.guide-card__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--text-on-dark); }
.guide-card__copy { margin: 0; color: var(--rodeo-light); font-size: var(--fs-body-sm); }
.guide-card__cta { margin-top: 12px; font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--bronze); display: inline-flex; gap: 8px; }
.guide-card__cta::after { content: "→"; }
/* ============================================================
faq-pair (NEW — Gap #3 per brief)
============================================================ */
.faq-pair { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 32px 0; border-top: 1px dashed var(--caput); align-items: flex-start; }
.faq-pair:last-child { border-bottom: 1px dashed var(--caput); }
.faq-pair__num { width: 56px; height: 56px; border-radius: 50%; background: var(--bronze); border: 4px ridge var(--bronze); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; color: var(--liquourice); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); position: relative; flex-shrink: 0; }
.faq-pair__num::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--caput); opacity: 0.5; }
.faq-pair__body { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.faq-pair__question { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); line-height: 1.15; }
.faq-pair__answer { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--rodeo-light); }
.faq-pair__answer em { font-style: italic; color: var(--bronze); }
.faq-pair__answer a { color: var(--bronze); text-decoration: none; border-bottom: 1px dashed var(--bronze); }
/* ============================================================
loyalty-strip (REUSED verbatim from catalogue)
============================================================ */
.loyalty-strip { background-color: var(--bg-panel-stamp); border-top: 4px ridge var(--bronze); border-bottom: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); padding: 64px 0; color: var(--text-on-stamp); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='none' stroke='%23F4A479' stroke-opacity='0.12' stroke-width='1'><circle cx='90' cy='90' r='24'/><circle cx='90' cy='90' r='40'/></g></svg>"); }
.loyalty-strip__inner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.loyalty-strip__title { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--fs-h1); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); }
.loyalty-strip__title em { font-style: normal; color: var(--bronze); }
.loyalty-strip__copy { margin: 0 0 32px; font-size: var(--fs-body-lg); color: var(--rodeo-light); }
.loyalty-strip__brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.loyalty-strip__brand { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); }
.loyalty-strip__mark { width: 36px; height: 36px; background: var(--bronze); border: 1px solid var(--caput); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--liquourice); font-family: var(--font-display); font-size: 13px; letter-spacing: var(--ls-wider); font-weight: 700; }
.loyalty-strip__name { font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--bronze); line-height: 1.1; }
.loyalty-strip__role { display: block; font-size: 11px; letter-spacing: var(--ls-widest); color: var(--rodeo-light); margin-top: 2px; }
/* ============================================================
newsletter-garrison (REUSED verbatim from catalogue)
============================================================ */
.newsletter-garrison { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-7) 0; }
.newsletter-garrison__panel { position: relative; background: var(--liquourice); background-image: var(--gear-pattern); border: 4px solid var(--bronze); border-style: ridge; padding: var(--sp-6) var(--sp-7); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; color: var(--rodeo-light); }
.newsletter-garrison__copy h3 { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--white); margin: 0 0 var(--sp-2); }
.newsletter-garrison__copy p { font-family: var(--font-body); font-style: italic; font-size: var(--body); margin: 0; color: var(--rodeo-light); }
.newsletter-garrison__form { display: flex; gap: var(--sp-3); align-items: stretch; }
.newsletter-garrison__form input { background: var(--cowboy); color: var(--white); border: 2px solid var(--bronze); padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); font-size: var(--body); width: 280px; }
.newsletter-garrison__form input::placeholder { color: var(--rodeo-light); font-style: italic; }
.newsletter-garrison__form button { background: var(--sienna); color: var(--white); border: 2px solid var(--bronze); border-style: ridge; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--sp-3) var(--sp-5); box-shadow: 2px 2px 0 var(--caput); }
/* ============================================================
painting-showcase (REUSED verbatim from catalogue;
page assigns its own grid for the 3-tile compact slice variant)
============================================================ */
.painting-showcase__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 16px; }
.painting-showcase__tile { position: relative; background: var(--liquourice); border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); overflow: hidden; text-decoration: none; }
.painting-showcase__tile img { width: 100%; height: 100%; object-fit: cover; }
.painting-showcase__tile--lg { grid-column: span 3; grid-row: span 3; }
.painting-showcase__tile--md { grid-column: span 2; grid-row: span 2; }
.painting-showcase__tile--sm { grid-column: span 1; grid-row: span 2; }
.painting-showcase__tile--wide { grid-column: span 3; grid-row: span 2; }
.painting-showcase__tile--tall { grid-column: span 2; grid-row: span 3; }
.painting-showcase__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(27,19,20,0.85)); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.painting-showcase__caption span { color: var(--rodeo-light); }
.painting-showcase__submit { margin-top: 48px; text-align: center; }
/* ============================================================
site-footer (REUSED verbatim from catalogue)
============================================================ */
.site-footer { background: var(--bg-panel-darker); color: var(--text-on-dark); border-top: 4px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.site-footer__columns { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding: 96px 40px 48px; max-width: 1200px; margin: 0 auto; }
.site-footer__brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer__word { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__copy { margin: 0 0 24px; color: var(--rodeo-light); font-size: var(--fs-body-sm); }
.site-footer__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cowboy); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__col-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px ridge var(--bronze); font-family: var(--font-display); font-size: var(--fs-body); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__list a { color: var(--rodeo-light); font-size: var(--fs-body-sm); text-decoration: none; }
.site-footer__list a:hover { color: var(--bronze); }
.site-footer__baseline { border-top: 2px ridge var(--bronze); background: var(--cowboy); }
.site-footer__baseline-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 40px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.site-footer__pay span { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; background: var(--liquourice); border: 1px solid var(--bronze); border-radius: var(--r-sm); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--liquourice); border: 1px solid var(--bronze); color: var(--bronze); text-decoration: none; font-family: var(--font-display); font-size: 12px; }
.site-footer__legal { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--rodeo-light); }
/* ============================================================
Page-scope sections (band grounds, container widths, paired-row grids)
============================================================ */
.section { padding: var(--sp-9) 0; }
.section--on-light { background: var(--rodeo); color: var(--text-on-light); }
.section--on-dark { background-color: var(--cowboy); background-image: var(--gear-pattern); color: var(--text-on-dark); }
.section--game-systems .game-systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.section--how-it-works .how-it-works-frame { max-width: 760px; margin: 0 auto; }
.section--paired .paired-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.section--paired .paired-row--features-positioning { align-items: stretch; }
.section--paired .feature-tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.brand-positioning-stack { display: flex; flex-direction: column; gap: 20px; padding: 8px 0; }
.brand-positioning-stack__eyebrow { display: inline-block; align-self: flex-start; }
.brand-positioning-stack__title { margin: 16px 0 12px; font-family: var(--font-display); font-size: clamp(36px, 4.5vw, var(--fs-h2)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--caput); }
.brand-positioning-stack__rule { display: block; width: 100px; height: 4px; background: var(--sienna); margin: 4px 0 8px; }
.brand-positioning-stack__paragraph { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--caput); }
.brand-positioning-stack__paragraph em { font-style: italic; color: var(--sienna); }
.brand-positioning-stack__ornament { margin-top: 12px; display: flex; align-items: center; gap: 16px; }
.brand-positioning-stack__ornament-text { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--sienna); }
.section--community .community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.section--products-guides .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.section--products-guides .guides-stack { display: grid; grid-template-columns: 1fr; gap: 18px; }
.section--products-guides .pair-head { margin-bottom: 32px; }
.section--products-guides .pair-head h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 32px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--caput); }
.section--products-guides .pair-head p { margin: 0; font-family: var(--font-body); font-style: italic; color: var(--caput); font-size: var(--fs-body-sm); }
.section--faq .faq-stack { max-width: 820px; margin: 0 auto; padding: 0 8px; }
.section--newsletter-showcase .newsletter-garrison { padding: 0; background: none; }
.section--newsletter-showcase .paired-row { gap: 32px; align-items: stretch; }
.section--newsletter-showcase .painting-showcase__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 140px; gap: 12px; }
.section--newsletter-showcase .painting-showcase-compact { height: 100%; display: flex; flex-direction: column; gap: 16px; }
.section--newsletter-showcase .painting-showcase-compact .compact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section--newsletter-showcase .painting-showcase-compact .compact-head h3 { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); }
.section--newsletter-showcase .painting-showcase-compact .compact-head a { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); text-decoration: none; border-bottom: 1px dashed var(--bronze); padding-bottom: 2px; }
/* ============================================================
Responsive (graceful collapse — rivets + ornament stay)
============================================================ */
@media (max-width: 1100px) {
.tool-landing-hero__inner { grid-template-columns: 1fr; gap: 56px; }
.tool-landing-hero__preview { order: -1; }
.section--game-systems .game-systems-grid { grid-template-columns: 1fr; }
.section--community .community-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
.section--paired .paired-row { grid-template-columns: 1fr; gap: 48px; }
.section--products-guides .products-grid { grid-template-columns: repeat(2, 1fr); }
.site-header__inner { grid-template-columns: auto auto; }
.site-header__nav { display: none; }
.tool-mock__body { grid-template-columns: 1fr; min-height: auto; }
.tool-mock__rail { border-right: 0; border-bottom: 1px dashed var(--caput); }
.tool-mock__panel { border-left: 0; border-top: 1px dashed var(--caput); }
.loyalty-strip__inner { grid-template-columns: 1fr; gap: 40px; }
.site-footer__columns { grid-template-columns: repeat(2, 1fr); padding: 64px 40px 32px; }
.newsletter-garrison__panel { grid-template-columns: 1fr; padding: var(--sp-5); }
.newsletter-garrison__form { flex-direction: column; }
.newsletter-garrison__form input { width: 100%; }
}
@media (max-width: 640px) {
.tool-landing-hero__title { font-size: clamp(44px, 12vw, 64px); }
.tool-landing-hero__ctas .btn { flex: 1 1 100%; }
.section--community .community-grid { grid-template-columns: 1fr; }
.section--paired .feature-tiles-grid { grid-template-columns: 1fr; }
.section--products-guides .products-grid { grid-template-columns: 1fr; }
.site-footer__columns { grid-template-columns: 1fr; }
.section--newsletter-showcase .painting-showcase__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
}
</style>
</head>
<body>
<!-- ================================================
1. Announcement bar — REUSED verbatim
================================================ -->
<div class="announcement-bar" role="region" aria-label="Announcements">
<div class="announcement-bar__inner">
<span class="announcement-bar__msg">Army Builder is live for War Dungeon account holders — first muster on the house</span>
<span class="announcement-bar__rotator" aria-hidden="true">
<span class="announcement-bar__dot announcement-bar__dot--active"></span>
<span class="announcement-bar__dot"></span>
<span class="announcement-bar__dot"></span>
</span>
</div>
</div>
<!-- ================================================
2. Site header — REUSED verbatim
================================================ -->
<header class="site-header">
<div class="site-header__inner">
<a class="site-header__brand" href="/">
<span class="site-header__cog" aria-hidden="true"></span>
<span class="site-header__word">War Dungeon<small>The Workbench of Warriors</small></span>
</a>
<nav class="site-header__nav" aria-label="Primary">
<a class="site-header__nav-item site-header__nav-item--has-mega" href="#">Warhammer</a>
<a class="site-header__nav-item" href="#">Dungeons & Dragons</a>
<a class="site-header__nav-item is-active" href="#">Tools</a>
<a class="site-header__nav-item site-header__nav-item--has-mega" href="#">Learn</a>
<a class="site-header__nav-item" href="#">Creators</a>
</nav>
<div class="site-header__tools">
<a class="site-header__tool" href="#" aria-label="Search">⌕</a>
<a class="site-header__tool" href="#" aria-label="Account">☉</a>
<a class="site-header__tool" href="#" aria-label="Wishlist">♥</a>
<a class="site-header__tool site-header__tool--basket" href="#"><span>Basket · 0</span><span class="site-header__points">+0 PTS</span></a>
</div>
</div>
</header>
<!-- ================================================
3. Breadcrumbs — REUSED verbatim
================================================ -->
<nav class="breadcrumbs" aria-label="Breadcrumb">
<div class="container breadcrumbs__inner">
<a href="#">Home</a><span class="breadcrumbs__sep">/</span>
<a href="#">Tools</a><span class="breadcrumbs__sep">/</span>
<span class="breadcrumbs__item--current">Army Builder</span>
</div>
</nav>
<!-- ================================================
4. Tool-landing hero — NEW (Gap #1)
================================================ -->
<section class="tool-landing-hero rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="tool-landing-hero__inner">
<div class="tool-landing-hero__content">
<div class="tool-landing-hero__eyebrow-row">
<span class="eyebrow-stamp">Tools · Army Builder</span>
<span class="tool-landing-hero__chapter-mark">Phase 1 · Live</span>
</div>
<h1 class="tool-landing-hero__title">Outfit <em>Your Force.</em></h1>
<span class="tool-landing-hero__rule" aria-hidden="true"></span>
<p class="tool-landing-hero__lede">Pick your faction. Pick your fights. Outfit them by the rule and the points. We stock everything the Builder lists — and we'll paint a reference for every kit before it lands on the rack.</p>
<div class="tool-landing-hero__ctas">
<a class="btn btn--lg" href="/army-builder/">Open the Builder</a>
<a class="btn btn--ghost btn--lg" href="#">Browse Combat Patrols</a>
</div>
<div class="tool-landing-hero__meta">
<span>40K 10th Ed</span>
<span>Age of Sigmar</span>
<span>The Old World</span>
<span>Save & Share</span>
</div>
</div>
<div class="tool-landing-hero__preview">
<div class="tool-landing-hero__stat">
<div class="stamped-roundel stamped-roundel--stat"><div class="num">94</div><div class="label">Forces<br>Shared<br>This Month</div></div>
</div>
<div class="tool-mock rivet-panel" aria-hidden="true">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span>
<span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="tool-mock__chrome">
<div class="tool-mock__chrome-left">
<span class="tool-mock__chrome-dots"><span></span><span></span><span></span></span>
Army Builder
</div>
<div class="tool-mock__chrome-tab">40K · 10th Ed · Ultramarines</div>
</div>
<div class="tool-mock__body">
<div class="tool-mock__rail">
<div class="tool-mock__rail-head">Choose Faction</div>
<div class="tool-mock__faction"><span class="tool-mock__faction-dot"></span>Salamanders</div>
<div class="tool-mock__faction"><span class="tool-mock__faction-dot"></span>Imperial Fists</div>
<div class="tool-mock__faction is-active"><span class="tool-mock__faction-dot"></span>Ultramarines</div>
<div class="tool-mock__faction"><span class="tool-mock__faction-dot"></span>Raven Guard</div>
<div class="tool-mock__faction"><span class="tool-mock__faction-dot"></span>Iron Hands</div>
<div class="tool-mock__faction"><span class="tool-mock__faction-dot"></span>Blood Angels</div>
</div>
<div class="tool-mock__roster">
<div class="tool-mock__roster-head">
<span>Your Roster</span>
<span>4 Units</span>
</div>
<div class="tool-mock__unit">
<div class="tool-mock__unit-thumb">⚔</div>
<div>
<div class="tool-mock__unit-name">Intercessor Squad</div>
<div class="tool-mock__unit-sub">Battleline · 10 models</div>
</div>
<div>
<div class="tool-mock__unit-stepper"><button>−</button><span>1</span><button>+</button></div>
<span class="tool-mock__unit-cost">200 pts</span>
</div>
</div>
<div class="tool-mock__unit">
<div class="tool-mock__unit-thumb">✦</div>
<div>
<div class="tool-mock__unit-name">Captain in Gravis</div>
<div class="tool-mock__unit-sub">Character · 1 model</div>
</div>
<div>
<div class="tool-mock__unit-stepper"><button>−</button><span>1</span><button>+</button></div>
<span class="tool-mock__unit-cost">120 pts</span>
</div>
</div>
<div class="tool-mock__unit">
<div class="tool-mock__unit-thumb">⌂</div>
<div>
<div class="tool-mock__unit-name">Redemptor Dreadnought</div>
<div class="tool-mock__unit-sub">Vehicle · 1 model</div>
</div>
<div>
<div class="tool-mock__unit-stepper"><button>−</button><span>1</span><button>+</button></div>
<span class="tool-mock__unit-cost">210 pts</span>
</div>
</div>
<div class="tool-mock__unit">
<div class="tool-mock__unit-thumb">◇</div>
<div>
<div class="tool-mock__unit-name">Hellblaster Squad</div>
<div class="tool-mock__unit-sub">Battleline · 5 models</div>
</div>
<div>
<div class="tool-mock__unit-stepper"><button>−</button><span>3</span><button>+</button></div>
<span class="tool-mock__unit-cost">450 pts</span>
</div>
</div>
<div class="tool-mock__add-row">+ Add a unit</div>
</div>
<div class="tool-mock__panel">
<div class="tool-mock__panel-head">Points Tracker</div>
<div class="tool-mock__points-ring">
<div class="tool-mock__points-current">1,495</div>
<div class="tool-mock__points-of">of 2,000</div>
</div>
<div class="tool-mock__points-bar" aria-hidden="true"></div>
<div class="tool-mock__panel-head" style="margin-top:4px;">Playstyle</div>
<span class="tool-mock__playstyle">Vanguard</span>
<button class="tool-mock__save-btn" type="button">Save Army</button>
<button class="tool-mock__share-btn" type="button">Share Link</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================================================
5. Game systems supported — REUSED sub-category-billboard (3-up)
================================================ -->
<section class="section section--on-light section--game-systems">
<div class="container">
<div class="section-head section-head--on-light">
<span class="eyebrow-stamp">Three Game Systems · Live</span>
<h2 class="section-head__title">Pick Your Tabletop</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Every faction in every system the Builder supports, sat in stock on the workbench. Codex pages and reference paint schemes for the lot.</p>
</div>
<div class="game-systems-grid">
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://picsum.photos/seed/wd-40k/720/540" alt="">
<span class="sub-category-billboard__count">8 factions · in stock</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">10th Edition · Current</span>
<h3 class="sub-category-billboard__title">Warhammer 40,000</h3>
<p class="sub-category-billboard__copy">From the Adeptus Astartes to the awakening Necron dynasties — every detachment, points-honest, and ready to paint.</p>
<span class="sub-category-billboard__cta">Start a 40K Army</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://picsum.photos/seed/wd-aos/720/540" alt="">
<span class="sub-category-billboard__count">9 factions · in stock</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Current Edition</span>
<h3 class="sub-category-billboard__title">Age of Sigmar</h3>
<p class="sub-category-billboard__copy">Stormcast Eternals to Skaven warlord clans — the Mortal Realms drafted clean, with battle traits sat right where you'd want them.</p>
<span class="sub-category-billboard__cta">Start an AoS Army</span>
</div>
</a>
<a class="sub-category-billboard rivet-panel" href="#">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="sub-category-billboard__media">
<img src="https://picsum.photos/seed/wd-old-world/720/540" alt="">
<span class="sub-category-billboard__count">6 factions · in stock</span>
</div>
<div class="sub-category-billboard__body">
<span class="sub-category-billboard__plate">Relaunched</span>
<h3 class="sub-category-billboard__title">The Old World</h3>
<p class="sub-category-billboard__copy">The Empire, the Kingdom of Bretonnia, Tomb Kings of Khemri — rank-and-flank brought back proper. Reference rosters built clean.</p>
<span class="sub-category-billboard__cta">Start an Old World Army</span>
</div>
</a>
</div>
</div>
</section>
<!-- ================================================
6. How it works — REUSED starter-path (full-width band)
================================================ -->
<section class="section section--on-dark section--how-it-works">
<div class="container">
<div class="how-it-works-frame">
<div class="starter-path">
<div class="starter-path__head" style="text-align:center;">
<span class="eyebrow-stamp">How The Builder Works</span>
<h2 class="starter-path__title" style="margin-left:auto;margin-right:auto;">Three Moves to a Roster</h2>
<span class="starter-path__rule" aria-hidden="true" style="margin-left:auto;margin-right:auto;"></span>
<p class="starter-path__lede" style="margin-left:auto;margin-right:auto;text-align:center;">Pick the faction, draft the units, send the kits to the cart. Done before the kettle's cold.</p>
</div>
<div class="starter-path__steps">
<div class="starter-path__step">
<div class="starter-path__num" aria-hidden="true"></div>
<div class="starter-path__step-body">
<h3 class="starter-path__step-title">Pick Your Faction</h3>
<p class="starter-path__step-copy">Choose your tabletop, then your faction. Salamanders green, Ultramarines blue, Stormcast gold — whichever code of honour you fight under, the Builder loads the right codex pages and stat blocks.</p>
<a class="starter-path__step-link" href="#">Browse the Faction Guides</a>
</div>
</div>
<div class="starter-path__step">
<div class="starter-path__num" aria-hidden="true"></div>
<div class="starter-path__step-body">
<h3 class="starter-path__step-title">Build Your Force</h3>
<p class="starter-path__step-copy">Drag units onto the roster. The points tracker keeps you honest, the playstyle reader names what you've drafted (Vanguard, Castellan, Strike-the-Centre) and the Builder flags any unit that's out of stock with us before it lets you commit.</p>
<a class="starter-path__step-link" href="#">Read the Drafting Guide</a>
</div>
</div>
<div class="starter-path__step">
<div class="starter-path__num" aria-hidden="true"></div>
<div class="starter-path__step-body">
<h3 class="starter-path__step-title">Order the Kits</h3>
<p class="starter-path__step-copy">Save the roster to your account, share the link with the rest of your gaming group, and when you're ready — one click sends every kit on the list straight into the basket. No box-hunting, no missing characters.</p>
<a class="starter-path__step-link" href="/army-builder/">Open the Builder</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- divider -->
<div class="gear-divider" role="presentation" aria-hidden="true"></div>
<!-- ================================================
7. PAIRED ROW — Feature tiles (NEW) + Brand positioning stack
================================================ -->
<section class="section section--on-light section--paired">
<div class="container">
<div class="paired-row paired-row--features-positioning">
<!-- LEFT: 2x2 feature-tile grid -->
<div>
<div class="brand-positioning-stack__eyebrow" style="margin-bottom:24px;">
<span class="eyebrow-stamp">Built Into The Tool</span>
</div>
<div class="feature-tiles-grid">
<article class="feature-tile rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="feature-tile__icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
</span>
<h3 class="feature-tile__title">Live Points Tracker</h3>
<p class="feature-tile__copy">Drafts to 500, 1,000, 2,000 — the points tally moves with every unit you add or strip.</p>
</article>
<article class="feature-tile rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="feature-tile__icon">
<svg viewBox="0 0 24 24"><path d="M3 21h18"/><path d="M5 18l4-7 4 5 6-10"/></svg>
</span>
<h3 class="feature-tile__title">Playstyle Analysis</h3>
<p class="feature-tile__copy">Reads your roster and names what you've drafted — Vanguard, Castellan, Strike-the-Centre.</p>
</article>
<article class="feature-tile rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="feature-tile__icon">
<svg viewBox="0 0 24 24"><path d="M5 3h14v18l-7-4-7 4z"/></svg>
</span>
<h3 class="feature-tile__title">Save & Share Armies</h3>
<p class="feature-tile__copy">Unlimited saved rosters on your War Dungeon account. Share a link — the rest of the group sees the same list.</p>
</article>
<article class="feature-tile rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<span class="feature-tile__icon">
<svg viewBox="0 0 24 24"><circle cx="9" cy="20" r="1.6"/><circle cx="18" cy="20" r="1.6"/><path d="M3 4h3l2 11h11l2-7H7"/></svg>
</span>
<h3 class="feature-tile__title">Add All to Cart</h3>
<p class="feature-tile__copy">One click sends every kit on the list to your basket. No missing characters, no extra box-hunting.</p>
</article>
</div>
</div>
<!-- RIGHT: brand-positioning-stack (composed from primitives) -->
<div class="brand-positioning-stack">
<span class="eyebrow-stamp brand-positioning-stack__eyebrow">Why Ours, Not Theirs</span>
<h2 class="brand-positioning-stack__title">A Builder Built For The Forge.</h2>
<span class="brand-positioning-stack__rule" aria-hidden="true"></span>
<p class="brand-positioning-stack__paragraph">There's no shortage of army calculators on the web — Battlescribe, New Recruit, half a dozen forks of each. They'll do the maths. They'll show you the points. <em>They won't tell you whether the kit's in stock</em>, won't paint a reference for the unit, and won't drop the list into a cart when you're done drafting.</p>
<p class="brand-positioning-stack__paragraph">Our Builder does all three. Every unit's checked against the rack before it's offered. Every faction carries a reference paint scheme from the workbench. Every saved roster turns into a one-click order when you're ready to build the thing for real.</p>
<p class="brand-positioning-stack__paragraph">And it works across all three game systems we trade in — 40K, Age of Sigmar, The Old World — under the same chrome, with the same paint references, on the same account. <em>That's the difference a curated tool makes.</em></p>
<div class="brand-positioning-stack__ornament">
<div class="stamped-roundel stamped-roundel--review"><div class="stars">★ 4.8</div><div>by 312 drafters</div></div>
<span class="brand-positioning-stack__ornament-text">Operator-rated by War Dungeon account holders. Open-beta feedback, fortnight ending 12 June.</span>
</div>
</div>
</div>
</div>
</section>
<!-- ================================================
8. Community-built armies — NEW community-army-card (4-up)
================================================ -->
<section class="section section--on-dark section--community">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">Drafted On The Builder · Painted On The Bench</span>
<h2 class="section-head__title">Forces From The Garrison</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Lists drafted by War Dungeon account holders, painted in the rec room, shared with the rest of us. Crib the rosters, steal the colour schemes.</p>
</div>
<div class="community-grid">
<a class="community-army-card" href="/community/armies/iron-wolves-of-fenris/">
<div class="community-army-card__media">
<img src="https://picsum.photos/seed/army-1/720/540" alt="">
<span class="community-army-card__system-tag">40K · Space Wolves</span>
<div class="community-army-card__points"><strong>1,995</strong><small>PTS</small></div>
</div>
<div class="community-army-card__body">
<span class="community-army-card__handle">@brushhand_halloran</span>
<h3 class="community-army-card__title">The Iron Wolves of Fenris</h3>
<div class="community-army-card__tags">
<span class="community-army-card__tag">Vanguard</span>
<span class="community-army-card__tag">Tournament</span>
</div>
<span class="community-army-card__cta">View The Roster</span>
</div>
</a>
<a class="community-army-card" href="/community/armies/khornes-yawning-host/">
<div class="community-army-card__media">
<img src="https://picsum.photos/seed/army-2/720/540" alt="">
<span class="community-army-card__system-tag">AoS · Blades of Khorne</span>
<div class="community-army-card__points"><strong>1,750</strong><small>PTS</small></div>
</div>
<div class="community-army-card__body">
<span class="community-army-card__handle">@pelltheslow</span>
<h3 class="community-army-card__title">Khorne's Yawning Host</h3>
<div class="community-army-card__tags">
<span class="community-army-card__tag">Strike-Centre</span>
<span class="community-army-card__tag">Narrative</span>
</div>
<span class="community-army-card__cta">View The Roster</span>
</div>
</a>
<a class="community-army-card" href="/community/armies/the-quartermasters-rangers/">
<div class="community-army-card__media">
<img src="https://picsum.photos/seed/army-3/720/540" alt="">
<span class="community-army-card__system-tag">Old World · The Empire</span>
<div class="community-army-card__points"><strong>2,000</strong><small>PTS</small></div>
</div>
<div class="community-army-card__body">
<span class="community-army-card__handle">@quartermaster_eli</span>
<h3 class="community-army-card__title">The Quartermaster's Rangers</h3>
<div class="community-army-card__tags">
<span class="community-army-card__tag">Castellan</span>
<span class="community-army-card__tag">Rank-and-Flank</span>
</div>
<span class="community-army-card__cta">View The Roster</span>
</div>
</a>
<a class="community-army-card" href="/community/armies/the-amber-watch/">
<div class="community-army-card__media">
<img src="https://picsum.photos/seed/army-4/720/540" alt="">
<span class="community-army-card__system-tag">40K · Adeptus Custodes</span>
<div class="community-army-card__points"><strong>1,500</strong><small>PTS</small></div>
</div>
<div class="community-army-card__body">
<span class="community-army-card__handle">@vesper_thalo</span>
<h3 class="community-army-card__title">The Amber Watch</h3>
<div class="community-army-card__tags">
<span class="community-army-card__tag">Vanguard</span>
<span class="community-army-card__tag">Painted</span>
</div>
<span class="community-army-card__cta">View The Roster</span>
</div>
</a>
</div>
</div>
</section>
<!-- ================================================
9. PAIRED ROW — Combat Patrol products (product-card) + How-to guides (guide-card)
================================================ -->
<section class="section section--on-light section--paired section--products-guides">
<div class="container">
<div class="paired-row">
<!-- LEFT: Combat patrol products -->
<div>
<div class="pair-head">
<span class="eyebrow-stamp">For The Newcomer</span>
<h2>Don't Have A Force Yet? Start With A Combat Patrol.</h2>
<p>Ten plastic models, a transport, a character, a codex page — enough army in a box to play your first game.</p>
</div>
<div class="products-grid">
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+115 PTS</span>
<img src="https://picsum.photos/seed/cp-marines/480/480" alt="Combat Patrol: Space Marines">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Combat Patrol: Space Marines</h3>
<div class="product-card__rating">★★★★★ <em>(184)</em></div>
<div class="product-card__price-row"><span class="product-card__price">£115</span><button class="product-card__quickview">Quick View</button></div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+115 PTS</span>
<img src="https://picsum.photos/seed/cp-necrons/480/480" alt="Combat Patrol: Necrons">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Combat Patrol: Necrons</h3>
<div class="product-card__rating">★★★★★ <em>(112)</em></div>
<div class="product-card__price-row"><span class="product-card__price">£115</span><button class="product-card__quickview">Quick View</button></div>
</div>
</article>
<article class="product-card">
<div class="product-card__media">
<span class="product-card__game-tag">40K</span>
<span class="product-card__loyalty">+115 PTS</span>
<img src="https://picsum.photos/seed/cp-tau/480/480" alt="Combat Patrol: T'au Empire">
</div>
<div class="product-card__body">
<h3 class="product-card__title">Combat Patrol: T'au Empire</h3>
<div class="product-card__rating">★★★★★ <em>(96)</em></div>
<div class="product-card__price-row"><span class="product-card__price">£115</span><button class="product-card__quickview">Quick View</button></div>
</div>
</article>
</div>
</div>
<!-- RIGHT: How-to guides -->
<div>
<div class="pair-head">
<span class="eyebrow-stamp">For The Drafter</span>
<h2>How To Use The Builder.</h2>
<p>Three guides for getting the most out of your roster sessions — from cold start to painted force.</p>
</div>
<div class="guides-stack">
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/guide-1/720/450" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Beginner</span>
<span class="guide-card__badge guide-card__badge--time">8 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Tools · How-To</span>
<h3 class="guide-card__title">Getting Started With The Army Builder</h3>
<p class="guide-card__copy">From cold-start to your first 500-point list. Where the faction picker lives, how the points tracker reads the codex, what to do when a unit's flagged out of stock.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/guide-2/720/450" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">6 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Tools · How-To</span>
<h3 class="guide-card__title">Saving and Sharing Your Armies</h3>
<p class="guide-card__copy">How saved rosters work on your War Dungeon account, how to share a link with the rest of your gaming group, and the share-link permissions worth knowing.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
<article class="guide-card">
<div class="guide-card__media">
<img src="https://picsum.photos/seed/guide-3/720/450" alt="">
<div class="guide-card__badges">
<span class="guide-card__badge">Intermediate</span>
<span class="guide-card__badge guide-card__badge--time">14 min read</span>
</div>
</div>
<div class="guide-card__body">
<span class="guide-card__kicker">Tools · How-To</span>
<h3 class="guide-card__title">From Builder List To Painted Force</h3>
<p class="guide-card__copy">The end-to-end — clicking Add All to Cart, choosing your colour scheme from the reference, ordering paints and tools alongside the kits, and a rough timeline.</p>
<span class="guide-card__cta">Read Guide</span>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- ================================================
10. FAQ — NEW faq-pair block (Gap #3)
================================================ -->
<section class="section section--on-dark section--faq">
<div class="container">
<div class="section-head">
<span class="eyebrow-stamp">Questions From The Bench</span>
<h2 class="section-head__title">The Short Answers</h2>
<span class="section-head__rule" aria-hidden="true"></span>
<p class="section-head__lede">Saving, sharing, stock, systems — the things drafters ask before they open a roster.</p>
</div>
<div class="faq-stack">
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">Can I save my army?</h3>
<p class="faq-pair__answer">Yes — saved to your War Dungeon account, unlimited rosters, named however you like. <em>You'll need a free account first</em>, but registration takes a minute and earns you 500 loyalty points on the way in.</p>
</div>
</div>
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">Can I share my army with friends?</h3>
<p class="faq-pair__answer">Every saved roster has a share link. Send the link, your gaming group sees the same list — read-only by default, with an optional “let them edit” toggle for cooperative drafting. No account required to view a shared list.</p>
</div>
</div>
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">Do you stock everything the Builder suggests?</h3>
<p class="faq-pair__answer">Every unit's checked against the rack before the Builder offers it. If something's out of stock, it'll show with a low-stock flag and a back-in-stock estimate before you add it to the list — we don't quietly let you draft kits we can't ship.</p>
</div>
</div>
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">Which game systems does the Builder support?</h3>
<p class="faq-pair__answer">At launch: <em>Warhammer 40,000 (10th edition), Age of Sigmar (current edition), and The Old World</em>. D&D is its own animal and stays on the dice-and-rulebook side of the workbench. New 40K and AoS factions go in as they're released.</p>
</div>
</div>
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">Is there a free trial?</h3>
<p class="faq-pair__answer">It's free for everyone with a War Dungeon account — no trial cap, no paid tier above. The cost is the orders. <a href="/account/register/">Register an account</a>, open the Builder, draft as many rosters as you like.</p>
</div>
</div>
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">Can the Builder import a Battlescribe or New Recruit list?</h3>
<p class="faq-pair__answer">Importing a .ros (Battlescribe) or a New Recruit export is on the workbench for Phase 2 — not at launch, but the parser's been drafted. For now, the Builder reads the same codex pages and produces a clean roster from scratch in a few minutes.</p>
</div>
</div>
<div class="faq-pair">
<div class="faq-pair__num">Q</div>
<div class="faq-pair__body">
<h3 class="faq-pair__question">What if I want to keep building offline?</h3>
<p class="faq-pair__answer">Every saved roster prints clean on one A4 sheet — unit list, points, and a small reference image per kit. Hit Export from the Builder. Take it to the table, mark it up with a pen, bring the updated list back at the weekend.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ================================================
11. Cross-brand loyalty strip — REUSED verbatim
================================================ -->
<section class="loyalty-strip">
<div class="loyalty-strip__inner">
<div class="loyalty-strip__head">
<span class="eyebrow-stamp">Loyalty · Cross-Brand</span>
<h2 class="loyalty-strip__title">Earn Here. <em>Redeem Anywhere.</em></h2>
<p class="loyalty-strip__copy">Every kit you order through the Army Builder earns loyalty points — spend them here on paints and bases, or take them across to the sister-brands. Same wallet, four storefronts.</p>
<a class="btn" href="#">See Your Balance</a>
</div>
<div class="loyalty-strip__brands">
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">N</span><div><span class="loyalty-strip__name">Nerdworks</span><span class="loyalty-strip__role">TCG & Tabletop</span></div></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">A</span><div><span class="loyalty-strip__name">ArtSabers</span><span class="loyalty-strip__role">Helmets & Sabers</span></div></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">P</span><div><span class="loyalty-strip__name">Paragon</span><span class="loyalty-strip__role">Gaming Peripherals</span></div></div>
<div class="loyalty-strip__brand"><span class="loyalty-strip__mark">W</span><div><span class="loyalty-strip__name">War Dungeon</span><span class="loyalty-strip__role">Warhammer & D&D</span></div></div>
</div>
</div>
</section>
<!-- ================================================
12. PAIRED ROW — Newsletter (newsletter-garrison) + painting showcase compact slice
================================================ -->
<section class="section section--on-dark section--paired section--newsletter-showcase">
<div class="container">
<div class="paired-row">
<!-- LEFT: newsletter-garrison (REUSED verbatim) -->
<section class="newsletter-garrison">
<div class="newsletter-garrison__panel rivet-panel">
<span class="rivet rivet--tl"></span><span class="rivet rivet--tr"></span><span class="rivet rivet--bl"></span><span class="rivet rivet--br"></span>
<div class="newsletter-garrison__copy">
<h3>Join the Garrison</h3>
<p>New faction drops, Builder updates, paint-night invites. Sent when there's something worth sending — about every fortnight.</p>
</div>
<form class="newsletter-garrison__form" action="#" method="post">
<input type="email" placeholder="your.signal@dispatch.com" aria-label="Email">
<button type="submit">Enlist</button>
</form>
</div>
</section>
<!-- RIGHT: painting-showcase compact (3-tile slice) -->
<section class="painting-showcase-compact">
<div class="compact-head">
<h3>Painted From The Builder</h3>
<a href="#">Submit a paint</a>
</div>
<div class="painting-showcase__grid" style="grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px;">
<a class="painting-showcase__tile" href="#" style="grid-column: span 1; grid-row: span 2;">
<img src="https://picsum.photos/seed/paint-1/480/640" alt="">
<span class="painting-showcase__caption">Ultramarines Tactical <span>· @brushhand</span></span>
</a>
<a class="painting-showcase__tile" href="#" style="grid-column: span 1; grid-row: span 2;">
<img src="https://picsum.photos/seed/paint-2/480/640" alt="">
<span class="painting-showcase__caption">Stormcast Vanguard <span>· @pelltheslow</span></span>
</a>
<a class="painting-showcase__tile" href="#" style="grid-column: span 1; grid-row: span 2;">
<img src="https://picsum.photos/seed/paint-3/480/640" alt="">
<span class="painting-showcase__caption">Necron Phalanx <span>· @quartermaster</span></span>
</a>
</div>
</section>
</div>
</div>
</section>
<!-- ================================================
13. Site footer — REUSED verbatim
================================================ -->
<footer class="site-footer">
<div class="site-footer__columns">
<div class="site-footer__brand">
<div class="site-footer__brand-mark">
<span class="site-header__cog" aria-hidden="true"></span>
<span class="site-footer__word">War Dungeon</span>
</div>
<p class="site-footer__copy">The workbench of warriors. Painted minis, sharpened rulebooks, and a workbench worth of know-how.</p>
<span class="site-footer__badge">⬡ A Nerdworks Brand</span>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Shop</h4>
<ul class="site-footer__list">
<li><a href="#">Warhammer 40,000</a></li>
<li><a href="#">Age of Sigmar</a></li>
<li><a href="#">The Old World</a></li>
<li><a href="#">Dungeons & Dragons</a></li>
<li><a href="#">Paints & Hobby</a></li>
<li><a href="#">Combat Patrols</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Discover</h4>
<ul class="site-footer__list">
<li><a href="/army-builder/">Army Builder</a></li>
<li><a href="#">Battle Simulator</a></li>
<li><a href="#">How-To Guides</a></li>
<li><a href="#">Painting Showcase</a></li>
<li><a href="#">Creator Partners</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Help</h4>
<ul class="site-footer__list">
<li><a href="#">Contact</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Track Order</a></li>
</ul>
</div>
<div class="site-footer__col">
<h4 class="site-footer__col-title">Brand & Loyalty</h4>
<ul class="site-footer__list">
<li><a href="#">About War Dungeon</a></li>
<li><a href="#">Sister Brands</a></li>
<li><a href="#">Loyalty Programme</a></li>
<li><a href="#">Affiliate</a></li>
<li><a href="#">Account</a></li>
</ul>
</div>
</div>
<div class="site-footer__baseline">
<div class="site-footer__baseline-inner">
<div class="site-footer__pay">
<span>Visa</span><span>MC</span><span>Amex</span><span>PayPal</span><span>Klarna</span>
</div>
<div class="site-footer__social">
<a href="#" aria-label="Instagram">IG</a>
<a href="#" aria-label="YouTube">YT</a>
<a href="#" aria-label="TikTok">TT</a>
<a href="#" aria-label="Discord">DC</a>
</div>
<div class="site-footer__legal">© 2026 War Dungeon · A Nerdworks Brand · Privacy · Cookies · Terms</div>
</div>
</div>
</footer>
</body>
</html>