<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Battle Simulator — On the Bench | War Dungeon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English+SC&family=Courier+Prime&display=swap" rel="stylesheet">
<style>
/* =================== TOKENS =================== */
:root {
/* Chromatic identifiers */
--primary: #C5A688;
--secondary: #D8C3B1;
--tertiary: #F4A479;
--accent: #832D15;
--dark: #1B1314;
--neutral: #2B1B1C;
--rodeo: #C5A688;
--rodeo-light: #D8C3B1;
--bronze: #F4A479;
--caput: #613F34;
--sienna: #832D15;
--cowboy: #2B1B1C;
--liquourice: #1B1314;
--white: #FFFFFF;
--light: #FFFFFF;
--black: #000000;
--positive: #4A6E50;
--negative: #C8442D;
/* Surface semantics — 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-dark: var(--liquourice);
--bg-card-on-light: var(--rodeo-light);
--bg-panel-stamp: var(--sienna);
--bg-panel-darker: var(--liquourice);
--bg-filter-group: var(--cowboy);
--bg-elevated: var(--liquourice);
/* Text-on-ground roles */
--text-primary: var(--caput);
--text-on-light: var(--caput);
--text-on-dark: var(--white);
--text-on-neutral: var(--white);
--text-on-accent: var(--white);
--text-on-stamp: var(--white);
--text-on-card-dark: var(--white);
--text-on-card-light: var(--caput);
--text-eyebrow: var(--sienna);
/* Buttons */
--btn-primary-bg: var(--sienna);
--btn-primary-text: var(--white);
--btn-secondary-bg: var(--liquourice);
--btn-secondary-text: var(--white);
/* Borders */
--border: var(--caput);
--divider: var(--caput);
--rivet: var(--caput);
/* Type */
--font-display: "Cinzel", "Modesto Condensed", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-body: "Literata", "Palatino Linotype", "EB Garamond", Georgia, serif;
--font-mono: "Courier Prime", "Courier New", monospace;
--fs-display: 96px;
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 36px;
--fs-h4: 24px;
--fs-body-lg: 22px;
--fs-body: 18px;
--fs-body-sm: 16px;
--fs-eyebrow: 13px;
--micro: 12px;
/* aliases used inside some catalogue blocks */
--body-lg: var(--fs-body-lg);
--body: var(--fs-body);
--body-sm: var(--fs-body-sm);
--h1: var(--fs-h1);
--h2: var(--fs-h2);
--h3: var(--fs-h3);
/* Line heights */
--lh-tight: 1.2;
--lh-heading: 1.35;
--lh-body: 1.5;
--lh-card: 1.35;
--lh-ui: 1.2;
/* Letter spacing */
--ls-tight: -0.01em;
--ls-heading: 0;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
--ls-widest: 0.16em;
/* 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: 0;
--r-sm: 4px;
--r-md: 7px;
--r-lg: 14px;
--r-xl: 21px;
/* Shadows — hard-edged offset, 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: 2px 2px 0 var(--caput);
/* Engraved gear pattern — used as low-opacity background fill on dark panels */
--gear-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23F4A479' stroke-opacity='0.06' stroke-width='1'><circle cx='60' cy='60' r='22'/><circle cx='60' cy='60' r='32'/><path d='M60 22v6M60 92v6M22 60h6M92 60h6M33 33l4 4M83 83l4 4M87 33l-4 4M33 87l4-4'/><circle cx='180' cy='180' r='22'/><circle cx='180' cy='180' r='32'/><path d='M180 142v6M180 212v6M142 180h6M212 180h6M153 153l4 4M203 203l4 4M207 153l-4 4M153 207l4-4'/><circle cx='180' cy='60' r='12'/><circle cx='60' cy='180' r='12'/></g></svg>");
}
/* =================== RESET / CHROME =================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); font-size: 20px; line-height: var(--lh-body); color: var(--text-on-light); background: var(--liquourice); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
input, button { font: inherit; }
input { color: inherit; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
/* Rivets — global helper used by many blocks */
.rivet-panel { position: relative; }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); border: 2px solid var(--caput); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); z-index: 3; pointer-events: none; }
.rivet--tl { top: 8px; left: 8px; }
.rivet--tr { top: 8px; right: 8px; }
.rivet--bl { bottom: 8px; left: 8px; }
.rivet--br { bottom: 8px; right: 8px; }
/* =================== CATALOGUE BLOCKS (REUSED VERBATIM) =================== */
/* === eyebrow-stamp === */
.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); }
/* === btn === */
.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), 3px 3px 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%; }
/* === stamped-roundel === */
.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; }
/* === plated-frame === */
.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; }
/* === announcement-bar === */
.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 === */
.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); }
.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>"); background-size: contain; background-repeat: no-repeat; }
.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 === */
.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__item--current { color: var(--sienna); }
/* === starter-path === */
.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); }
.starter-path__step-link::after { content: "→"; }
/* === tool-card === */
.tool-card { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 32px; 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-lg); color: var(--text-on-card-dark); }
.tool-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--caput); margin-bottom: 24px; }
.tool-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tool-card__cog { position: absolute; right: -20px; bottom: -20px; width: 120px; height: 120px; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23F4A479' stroke-width='2'><circle cx='60' cy='60' r='28'/><circle cx='60' cy='60' r='42'/><circle cx='60' cy='60' r='6' fill='%23F4A479'/></svg>"); opacity: 0.5; }
.tool-card__status { display: inline-block; margin-left: 8px; padding: 4px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--liquourice); background: var(--rodeo-light); border: 1px solid var(--caput); border-radius: 999px; }
.tool-card__title { margin: 0 0 12px; 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-card-dark); }
.tool-card__copy { margin: 0 0 24px; color: var(--secondary); }
.tool-card__features { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 8px; }
.tool-card__features li { font-size: var(--fs-body-sm); color: var(--rodeo-light); display: flex; align-items: center; gap: 12px; }
.tool-card__features li::before { content: ""; width: 10px; height: 10px; background: var(--bronze); border: 1px solid var(--caput); flex-shrink: 0; transform: rotate(45deg); }
/* === painting-showcase === */
.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.92)); 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; }
/* === newsletter-garrison === */
.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); }
@media (max-width: 880px) { .newsletter-garrison__panel { grid-template-columns: 1fr; padding: var(--sp-5); } .newsletter-garrison__form { flex-direction: column; } .newsletter-garrison__form input { width: 100%; } }
/* === loyalty-strip === */
.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; }
/* === site-footer === */
.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__legal { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); color: var(--rodeo-light); }
/* =================== NEW BLOCKS =================== */
/* === tool-landing-hero (NEW) === */
.tool-landing-hero { background-color: var(--cowboy); background-image: var(--gear-pattern); color: var(--rodeo-light); padding: var(--sp-9) 0 var(--sp-10); position: relative; overflow: hidden; }
.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; gap: var(--sp-4); max-width: 560px; }
.tool-landing-hero__eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tool-landing-hero__eyebrow-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--micro); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--rodeo-light); }
.tool-landing-hero__eyebrow-meta::before { content: ""; width: 16px; height: 1px; background: var(--bronze); }
.tool-landing-hero__status-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-5); margin: var(--sp-3) 0 var(--sp-2); }
.tool-landing-hero__seal-wrap { transform: rotate(-7deg); transform-origin: center; display: inline-block; filter: drop-shadow(0 4px 0 rgba(27,19,20,0.45)); }
.tool-landing-hero__seal { width: 156px; height: 156px; padding: 0 16px; background: radial-gradient(circle at 30% 30%, rgba(255,235,210,0.5), transparent 65%), var(--bronze); }
.tool-landing-hero__seal .num { font-size: 26px; letter-spacing: var(--ls-wide); line-height: 1; }
.tool-landing-hero__seal .label { font-size: 10px; line-height: 1.2; letter-spacing: var(--ls-widest); margin-top: 6px; }
.tool-landing-hero__seal-band { display: block; font-family: var(--font-display); font-size: 8px; letter-spacing: var(--ls-widest); margin-top: 3px; color: var(--caput); opacity: 0.85; }
.tool-landing-hero__status-meta { display: flex; flex-direction: column; gap: 6px; color: var(--rodeo-light); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; }
.tool-landing-hero__status-meta-label { font-size: 11px; color: var(--bronze); display: inline-flex; align-items: center; gap: 8px; }
.tool-landing-hero__status-meta-label::after { content: ""; flex: 1; height: 1px; background-image: linear-gradient(to right, var(--bronze) 0, var(--bronze) 6px, transparent 6px, transparent 12px); background-size: 12px 1px; background-repeat: repeat-x; opacity: 0.6; }
.tool-landing-hero__status-meta strong { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--white); font-weight: 500; letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1; }
.tool-landing-hero__status-meta em { font-family: var(--font-body); font-style: italic; color: var(--rodeo-light); font-size: var(--fs-body-sm); letter-spacing: 0; text-transform: none; }
.tool-landing-hero__title { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-size: clamp(56px, 7.5vw, 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: 200px; height: 6px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); margin: var(--sp-5) 0 var(--sp-3); }
.tool-landing-hero__lede { margin: 0 0 var(--sp-3); font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); font-style: italic; }
.tool-landing-hero__form { margin-top: var(--sp-4); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: stretch; padding: var(--sp-4); 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); }
.tool-landing-hero__input { background: var(--cowboy); color: var(--white); border: 2px ridge var(--bronze); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--caput); padding: 14px 18px; font-family: var(--font-mono); font-size: var(--fs-body); letter-spacing: 0.02em; outline: none; min-width: 0; }
.tool-landing-hero__input::placeholder { color: var(--rodeo-light); opacity: 0.65; font-style: italic; }
.tool-landing-hero__submit { background: var(--sienna); color: var(--white); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-stamp); padding: 0 var(--sp-5); font-family: var(--font-display); font-size: var(--fs-body-lg); letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; }
.tool-landing-hero__submit:hover { transform: translate(-1px, -1px); }
.tool-landing-hero__form-foot { margin-top: var(--sp-3); display: flex; gap: var(--sp-3); align-items: center; font-family: var(--font-display); font-size: var(--micro); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.tool-landing-hero__form-foot::before { content: ""; width: 8px; height: 8px; background: var(--bronze); border: 1px solid var(--caput); transform: rotate(45deg); flex-shrink: 0; }
.tool-landing-hero__visual { position: relative; }
.tool-landing-hero__visual .plated-frame { padding: 10px; border-width: 5px; }
.tool-landing-hero__plaque { position: absolute; left: 24px; bottom: -22px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); z-index: 4; }
.tool-landing-hero__plaque-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 2px rgba(74,110,80,0.3); }
.tool-landing-hero__visual-tag { position: absolute; right: -12px; top: -16px; padding: 8px 14px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-sm); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); z-index: 4; }
@media (max-width: 980px) {
.tool-landing-hero__inner { grid-template-columns: 1fr; gap: 56px; }
.tool-landing-hero__visual { order: -1; }
.tool-landing-hero__title { font-size: clamp(48px, 11vw, 72px); }
.tool-landing-hero__status-row { grid-template-columns: 1fr; }
.tool-landing-hero__seal-wrap { align-self: flex-start; }
}
@media (max-width: 640px) {
.tool-landing-hero__form { grid-template-columns: 1fr; padding: var(--sp-3); }
}
/* === faq-pair (NEW) === */
.faq-pair { position: relative; padding: var(--sp-6) var(--sp-7); 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); color: var(--rodeo-light); display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-5); align-items: start; }
.faq-pair__num { width: 56px; height: 56px; border-radius: 50%; background: var(--bronze); color: var(--liquourice); border: 3px ridge var(--caput); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; letter-spacing: var(--ls-wide); box-shadow: 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: var(--sp-3); min-width: 0; }
.faq-pair__q-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); }
.faq-pair__q { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); line-height: var(--lh-tight); }
.faq-pair__q-tag { display: inline-flex; align-items: center; padding: 3px 10px; 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); white-space: nowrap; }
.faq-pair__a { margin: 0; padding-top: var(--sp-3); border-top: 1px dashed var(--caput); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--rodeo-light); }
.faq-pair__a strong { color: var(--bronze); font-weight: 500; }
.faq-pair .rivet { width: 8px; height: 8px; }
@media (max-width: 640px) {
.faq-pair { grid-template-columns: 1fr; padding: var(--sp-5); }
.faq-pair__num { width: 48px; height: 48px; font-size: 18px; }
}
/* === sim-preview (NEW) — used in hero and again in paired-row 1 === */
.sim-preview { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; aspect-ratio: 16 / 11; background: #0E1A14; border: 1px solid var(--caput); overflow: hidden; }
.sim-preview--detailed { aspect-ratio: 4 / 3; }
.sim-preview__board { position: relative; background-color: #1E2D24; background-image: linear-gradient(rgba(244,164,121,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(244,164,121,0.08) 1px, transparent 1px); background-size: 32px 32px; background-position: 0 0; overflow: hidden; }
.sim-preview--detailed .sim-preview__board { background-size: 44px 44px; }
.sim-preview__board::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(11,16,12,0.7)); pointer-events: none; z-index: 1; }
.sim-preview__board::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='none' stroke='%23F4A479' stroke-opacity='0.05' stroke-width='1'><circle cx='200' cy='200' r='80'/><circle cx='200' cy='200' r='150'/><line x1='200' y1='50' x2='200' y2='350'/><line x1='50' y1='200' x2='350' y2='200'/></g></svg>"); background-position: center; background-repeat: no-repeat; background-size: 90% auto; pointer-events: none; z-index: 1; }
.sim-preview__objective { position: absolute; width: 28px; height: 28px; background: var(--bronze); border: 2px solid var(--caput); border-radius: 50%; box-shadow: 0 0 0 4px rgba(244,164,121,0.15), inset 0 0 0 1px var(--liquourice); transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; justify-content: center; color: var(--liquourice); font-family: var(--font-display); font-size: 11px; letter-spacing: 0; line-height: 1; font-weight: 700; }
.sim-preview__terrain { position: absolute; background: rgba(97, 63, 52, 0.45); border: 1px solid rgba(244,164,121,0.18); transform: translate(-50%, -50%); z-index: 2; }
.sim-preview__terrain::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, transparent 48%, rgba(244,164,121,0.08) 48%, rgba(244,164,121,0.08) 52%, transparent 52%); background-size: 8px 8px; }
.sim-preview__mini { position: absolute; transform: translate(-50%, -50%); z-index: 5; }
.sim-preview__mini-ring { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--caput); background: var(--bronze); box-shadow: 0 2px 0 rgba(11,16,12,0.55); position: relative; }
.sim-preview__mini-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--liquourice); opacity: 0.4; }
.sim-preview__mini--enemy .sim-preview__mini-ring { background: var(--rodeo-light); }
.sim-preview__mini--elite .sim-preview__mini-ring { width: 34px; height: 34px; box-shadow: 0 0 0 2px rgba(244,164,121,0.3), 0 2px 0 rgba(11,16,12,0.55); }
.sim-preview__mini--vehicle .sim-preview__mini-ring { width: 40px; height: 26px; border-radius: var(--r-sm); }
.sim-preview__mini-arrow { position: absolute; left: 50%; top: -7px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--bronze); transform: translateX(-50%); filter: drop-shadow(0 0 1px var(--caput)); }
.sim-preview__mini--enemy .sim-preview__mini-arrow { top: auto; bottom: -7px; border-bottom: 0; border-top: 7px solid var(--rodeo-light); }
.sim-preview__mini-label { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; padding: 2px 6px; background: rgba(11,7,8,0.88); border: 1px solid rgba(244,164,121,0.4); color: var(--bronze); font-family: var(--font-display); font-size: 8px; letter-spacing: var(--ls-widest); text-transform: uppercase; white-space: nowrap; line-height: 1.2; }
.sim-preview__mini--enemy .sim-preview__mini-label { left: auto; right: 100%; margin-left: 0; margin-right: 6px; color: var(--rodeo-light); }
.sim-preview__hud { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); z-index: 6; pointer-events: none; }
.sim-preview__hud-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: rgba(11,7,8,0.88); border: 1px solid var(--bronze); color: var(--bronze); font-family: var(--font-display); font-size: 9px; letter-spacing: var(--ls-widest); text-transform: uppercase; }
.sim-preview__hud-pill strong { color: var(--white); font-weight: 500; }
.sim-preview__hud-pill--enemy { border-color: var(--rodeo-light); color: var(--rodeo-light); }
.sim-preview__sidebar { background: var(--liquourice); border-left: 2px ridge var(--bronze); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); position: relative; overflow: hidden; min-width: 0; }
.sim-preview__sidebar-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--caput); font-family: var(--font-display); font-size: 9px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.sim-preview__sidebar-head-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 2px rgba(74,110,80,0.3); }
.sim-preview__bubble { font-family: var(--font-body); font-size: 11px; line-height: 1.4; color: var(--rodeo-light); padding: 8px 10px; background: rgba(43,27,28,0.55); border-left: 2px solid var(--bronze); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.sim-preview__bubble strong { display: block; font-family: var(--font-display); font-size: 8px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); margin-bottom: 3px; }
.sim-preview__bubble em { color: var(--white); font-style: italic; }
.sim-preview__bubble--system { border-left-color: var(--positive); }
.sim-preview__bubble--system strong { color: var(--positive); }
.sim-preview__bubble--alert { border-left-color: var(--sienna); }
.sim-preview__bubble--alert strong { color: var(--sienna); }
.sim-preview--detailed .sim-preview__bubble { font-size: 12px; padding: 10px 12px; }
.sim-preview--detailed .sim-preview__sidebar-head { font-size: 11px; }
.sim-preview__compose { margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--caput); display: flex; align-items: center; gap: 8px; }
.sim-preview__compose-input { flex: 1; height: 24px; background: var(--cowboy); border: 1px solid var(--bronze); padding: 0 8px; font-family: var(--font-mono); font-size: 10px; color: var(--rodeo-light); display: flex; align-items: center; font-style: italic; opacity: 0.7; }
.sim-preview__compose-btn { width: 28px; height: 24px; background: var(--sienna); border: 1px solid var(--bronze); color: var(--white); font-family: var(--font-display); font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: var(--ls-widest); }
.sim-preview__turn-bar { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; align-items: center; gap: var(--sp-3); z-index: 6; padding: 4px 10px; background: rgba(11,7,8,0.9); border: 1px solid var(--bronze); font-family: var(--font-display); font-size: 9px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.sim-preview__turn-bar strong { color: var(--white); }
.sim-preview__turn-bar-progress { flex: 1; height: 4px; background: var(--cowboy); border: 1px solid var(--caput); position: relative; }
.sim-preview__turn-bar-progress::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: var(--bronze); }
@media (max-width: 640px) {
.sim-preview { grid-template-columns: 1fr; aspect-ratio: 4 / 5; }
.sim-preview__sidebar { border-left: none; border-top: 2px ridge var(--bronze); }
}
/* =================== PAGE COMPOSITION (LAYOUT-ONLY, NOT BLOCKS) =================== */
/* "What's coming" section ground for starter-path */
.whats-coming { background-color: var(--liquourice); background-image: var(--gear-pattern); color: var(--rodeo-light); padding: var(--sp-9) 0 var(--sp-10); position: relative; }
.whats-coming__inner { max-width: 980px; margin: 0 auto; padding: 0 40px; }
.whats-coming__head { text-align: center; margin-bottom: var(--sp-7); }
.whats-coming__head-title { margin: var(--sp-3) 0 var(--sp-3); font-family: var(--font-display); font-size: clamp(36px, 5vw, var(--fs-h1)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--white); }
.whats-coming__head-title em { font-style: normal; color: var(--bronze); }
.whats-coming__head-rule { display: block; width: 120px; height: 4px; background: var(--bronze); margin: var(--sp-3) auto; }
.whats-coming__head-lede { margin: 0 auto; max-width: 580px; font-family: var(--font-body); font-style: italic; font-size: var(--fs-body); color: var(--rodeo-light); }
/* starter-path inside whats-coming needs no head — we provided one above; suppress its head */
.whats-coming .starter-path__head { display: none; }
.whats-coming .starter-path__step { padding: 36px 0; }
.whats-coming .starter-path__step:first-child { border-top: 1px dashed var(--caput); }
/* Paired row 1 — sim-preview detail + positioning */
.preview-positioning { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0 var(--sp-10); color: var(--rodeo-light); }
.preview-positioning__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); max-width: 1440px; margin: 0 auto; padding: 0 40px; align-items: center; }
.preview-positioning__left { position: relative; }
.preview-positioning__left .plated-frame { padding: 12px; border-width: 6px; }
.preview-positioning__left .plated-frame__media { aspect-ratio: 4 / 3; background: transparent; }
.preview-positioning__caption { position: absolute; left: 24px; bottom: -28px; display: inline-flex; align-items: center; gap: var(--sp-3); padding: 10px 18px; background: var(--liquourice); border: 2px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); font-family: var(--font-body); font-style: italic; font-size: var(--fs-body-sm); color: var(--bronze); max-width: 520px; }
.preview-positioning__caption::before { content: ""; width: 22px; height: 6px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 6'><path d='M0 3h22' stroke='%23F4A479' stroke-width='1.2'/><circle cx='11' cy='3' r='2' fill='%23F4A479'/></svg>"); flex-shrink: 0; background-repeat: no-repeat; }
.preview-positioning__right { display: flex; flex-direction: column; gap: var(--sp-5); position: relative; }
.preview-positioning__roundel { position: absolute; right: -24px; top: -28px; transform: rotate(8deg); z-index: 2; }
.preview-positioning__roundel .stamped-roundel--review { width: 96px; height: 96px; font-size: 11px; }
.preview-positioning__head { display: flex; flex-direction: column; gap: var(--sp-3); padding-right: 90px; }
.preview-positioning__title { margin: 0; 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(--white); }
.preview-positioning__title em { font-style: normal; color: var(--bronze); }
.preview-positioning__rule { display: block; width: 120px; height: 4px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.preview-positioning__body { display: flex; flex-direction: column; gap: var(--sp-4); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--rodeo-light); }
.preview-positioning__body p { margin: 0; }
.preview-positioning__body p:first-of-type::first-letter { font-family: var(--font-display); font-size: 56px; line-height: 0.9; float: left; padding: 6px 12px 0 0; color: var(--bronze); }
.preview-positioning__pull { padding: var(--sp-4) var(--sp-5); border-left: 4px ridge var(--bronze); background: rgba(244,164,121,0.07); margin: 0; font-family: var(--font-body); font-style: italic; font-size: var(--fs-body-lg); color: var(--white); line-height: 1.4; }
@media (max-width: 980px) {
.preview-positioning__inner { grid-template-columns: 1fr; gap: var(--sp-9); }
.preview-positioning__caption { position: static; max-width: none; margin-top: var(--sp-5); }
.preview-positioning__head { padding-right: 0; }
.preview-positioning__roundel { position: static; transform: rotate(0); margin-bottom: var(--sp-3); align-self: flex-start; }
}
/* Cross-promote — Army Builder ready now */
.cross-promote { background-color: var(--liquourice); background-image: var(--gear-pattern); padding: var(--sp-9) 0 var(--sp-10); color: var(--rodeo-light); position: relative; border-top: 1px solid var(--caput); border-bottom: 1px solid var(--caput); }
.cross-promote__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); max-width: 1440px; margin: 0 auto; padding: 0 40px; align-items: center; }
.cross-promote__left { display: flex; flex-direction: column; gap: var(--sp-5); }
.cross-promote__eyebrow-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cross-promote__live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--positive); background: var(--liquourice); border: 1px solid var(--positive); border-radius: 999px; }
.cross-promote__live-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 2px rgba(74,110,80,0.35); }
.cross-promote__title { margin: 0; font-family: var(--font-display); font-size: clamp(40px, 5vw, var(--fs-h1)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.05; color: var(--white); }
.cross-promote__title em { font-style: normal; color: var(--bronze); display: block; }
.cross-promote__rule { display: block; width: 160px; height: 6px; background: var(--bronze); border: 1px ridge var(--bronze); box-shadow: inset 0 0 0 1px var(--caput); }
.cross-promote__copy { margin: 0; font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--rodeo-light); max-width: 520px; }
.cross-promote__signals { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px dashed var(--caput); }
.cross-promote__signal { display: flex; align-items: baseline; gap: var(--sp-3); font-family: var(--font-body); font-style: italic; font-size: var(--fs-body); color: var(--rodeo-light); }
.cross-promote__signal::before { content: "✦"; color: var(--bronze); font-size: 14px; flex-shrink: 0; transform: translateY(-1px); font-style: normal; }
.cross-promote__right { position: relative; }
.cross-promote__right .tool-card { background: var(--cowboy); }
@media (max-width: 980px) {
.cross-promote__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
}
/* "From the bench" — painting-showcase wrapper */
.from-the-bench { background-color: var(--rodeo-light); padding: var(--sp-9) 0 var(--sp-10); color: var(--caput); }
.from-the-bench__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.from-the-bench__head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: end; margin-bottom: var(--sp-7); padding-bottom: var(--sp-5); border-bottom: 2px solid var(--caput); }
.from-the-bench__head-left { display: flex; flex-direction: column; gap: var(--sp-3); }
.from-the-bench__title { margin: 0; font-family: var(--font-display); font-size: clamp(40px, 5vw, var(--fs-h1)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--caput); }
.from-the-bench__title em { font-style: normal; color: var(--sienna); }
.from-the-bench__lede { margin: 0; font-family: var(--font-body); font-style: italic; font-size: var(--fs-body-lg); color: var(--caput); max-width: 680px; }
.from-the-bench__count { font-family: var(--font-display); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--sienna); align-self: end; }
.from-the-bench__count strong { font-size: var(--fs-h4); color: var(--caput); display: block; line-height: 1; margin-bottom: 2px; }
@media (max-width: 980px) {
.from-the-bench__head { grid-template-columns: 1fr; }
.painting-showcase__grid { grid-auto-rows: 90px; }
}
/* FAQ section wrapper */
.faq-section { background-color: var(--cowboy); background-image: var(--gear-pattern); padding: var(--sp-9) 0 var(--sp-10); color: var(--rodeo-light); }
.faq-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.faq-section__head { text-align: center; margin-bottom: var(--sp-7); }
.faq-section__head .eyebrow-stamp { margin-bottom: var(--sp-4); }
.faq-section__title { margin: var(--sp-3) 0 var(--sp-3); font-family: var(--font-display); font-size: clamp(36px, 5vw, var(--fs-h1)); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); color: var(--white); }
.faq-section__title em { font-style: normal; color: var(--bronze); }
.faq-section__rule { display: block; width: 120px; height: 4px; margin: var(--sp-3) auto; background: var(--bronze); }
.faq-section__lede { margin: 0 auto; max-width: 580px; font-family: var(--font-body); font-style: italic; font-size: var(--fs-body); color: var(--rodeo-light); }
.faq-section__list { display: flex; flex-direction: column; gap: var(--sp-5); }
/* Paired row 2 — newsletter-garrison + loyalty-strip half-width */
.paired-row { background-color: var(--rodeo); padding: var(--sp-8) 0 var(--sp-9); color: var(--caput); }
.paired-row__head { max-width: 1440px; margin: 0 auto var(--sp-6); padding: 0 40px; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); border-bottom: 1px solid var(--caput); padding-bottom: var(--sp-4); }
.paired-row__head-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--caput); }
.paired-row__head-aside { font-family: var(--font-body); font-style: italic; font-size: var(--fs-body-sm); color: var(--caput); }
.paired-row__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-6); max-width: 1440px; margin: 0 auto; padding: 0 40px; align-items: stretch; }
.paired-row__cell { display: flex; flex-direction: column; }
/* Override catalogue blocks when nested: kill full-bleed section padding */
.paired-row .newsletter-garrison { padding: 0; background: none; flex: 1; display: flex; }
.paired-row .newsletter-garrison__panel { width: 100%; height: 100%; padding: var(--sp-7); grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; align-content: start; }
.paired-row .newsletter-garrison__form { width: 100%; }
.paired-row .newsletter-garrison__form input { width: 100%; }
.paired-row__seal { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; font-family: var(--font-display); font-size: var(--micro); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); background: var(--cowboy); border: 1px solid var(--bronze); border-radius: var(--r-sm); align-self: flex-start; margin-bottom: var(--sp-3); }
.paired-row__seal::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 2px rgba(244,164,121,0.25); }
.paired-row__perks { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.paired-row__perk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--cowboy); border: 1px solid var(--bronze); font-family: var(--font-display); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--bronze); }
.paired-row__perk::before { content: ""; width: 6px; height: 6px; background: var(--bronze); border: 1px solid var(--caput); transform: rotate(45deg); }
.paired-row .loyalty-strip { padding: 0; flex: 1; border: 4px ridge var(--bronze); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--caput), var(--shadow-md); background-color: var(--sienna); 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>"); display: flex; }
.paired-row .loyalty-strip__inner { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-7); max-width: none; width: 100%; align-content: start; }
.paired-row .loyalty-strip__title { font-size: clamp(30px, 3vw, 40px); margin: 0 0 var(--sp-3); }
.paired-row .loyalty-strip__copy { margin: 0 0 var(--sp-3); font-size: var(--fs-body); }
.paired-row .loyalty-strip__brands { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.paired-row .loyalty-strip__brand { padding: var(--sp-3) var(--sp-4); }
.paired-row .loyalty-strip .btn { align-self: flex-start; }
@media (max-width: 980px) {
.paired-row__inner { grid-template-columns: 1fr; }
.paired-row__head { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<!-- ============ 1. Pre-header announcement bar (REUSE: announcement-bar) ============ -->
<div class="announcement-bar" role="region" aria-label="Announcements">
<div class="announcement-bar__inner">
<span class="announcement-bar__msg">Free UK shipping over £75 — and an extra ten percent off your first muster</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. Global header (REUSE: site-header) ============ -->
<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 (REUSE: breadcrumbs) ============ -->
<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">Battle Simulator</span>
</div>
</nav>
<!-- ============ 4. Tool landing hero with Coming Soon framing (NEW: tool-landing-hero) ============ -->
<section class="tool-landing-hero">
<div class="tool-landing-hero__inner">
<div class="tool-landing-hero__content">
<div class="tool-landing-hero__eyebrow-row">
<span class="eyebrow-stamp">Tools · Battle Simulator</span>
<span class="tool-landing-hero__eyebrow-meta">Phase II · In the workshop</span>
</div>
<div class="tool-landing-hero__status-row">
<span class="tool-landing-hero__seal-wrap">
<!-- Coming Soon: content-level use of catalogue stamped-roundel primitive -->
<div class="stamped-roundel stamped-roundel--loyalty tool-landing-hero__seal">
<div class="num">COMING</div>
<div class="label">Soon · Phase II</div>
<small class="tool-landing-hero__seal-band">WD Tools · Battle Sim</small>
</div>
</span>
<div class="tool-landing-hero__status-meta">
<span class="tool-landing-hero__status-meta-label">Status</span>
<strong>Still on the bench</strong>
<em>Bench-talk only — no date pinned yet.</em>
</div>
</div>
<h1 class="tool-landing-hero__title">Roll <em>Initiative.</em></h1>
<span class="tool-landing-hero__rule" aria-hidden="true"></span>
<p class="tool-landing-hero__lede">The simulator’s still on the bench. Drop your name and we’ll send word the morning she opens her doors.</p>
<form class="tool-landing-hero__form" action="/wp-json/wd/v1/launch-notify" method="post" novalidate>
<input class="tool-landing-hero__input" type="email" name="email" placeholder="ranger@your-garrison.uk" aria-label="Email for launch notification">
<button class="tool-landing-hero__submit" type="submit">Send word</button>
</form>
<div class="tool-landing-hero__form-foot">One letter only — the morning she ships. No marketing barrage.</div>
</div>
<div class="tool-landing-hero__visual">
<span class="tool-landing-hero__visual-tag">Preview · Not Final</span>
<figure class="plated-frame">
<div class="plated-frame__media">
<!-- Simulator UI preview (smaller hero variant) -->
<div class="sim-preview" aria-hidden="true">
<div class="sim-preview__board">
<div class="sim-preview__hud">
<span class="sim-preview__hud-pill"><strong>Salamanders</strong> · 512</span>
<span class="sim-preview__hud-pill sim-preview__hud-pill--enemy">463 · <strong>Stormcast</strong></span>
</div>
<span class="sim-preview__terrain" style="left: 28%; top: 35%; width: 80px; height: 50px;"></span>
<span class="sim-preview__terrain" style="left: 70%; top: 70%; width: 70px; height: 70px;"></span>
<span class="sim-preview__terrain" style="left: 80%; top: 30%; width: 50px; height: 50px;"></span>
<span class="sim-preview__objective" style="left: 50%; top: 50%;">I</span>
<span class="sim-preview__objective" style="left: 22%; top: 70%;">II</span>
<span class="sim-preview__objective" style="left: 80%; top: 55%;">III</span>
<div class="sim-preview__mini" style="left: 18%; top: 78%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--elite" style="left: 30%; top: 70%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span><span class="sim-preview__mini-label">CAPT</span></div>
<div class="sim-preview__mini" style="left: 42%; top: 80%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--vehicle" style="left: 24%; top: 88%;"><span class="sim-preview__mini-ring"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 60%; top: 25%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span><span class="sim-preview__mini-label">VAN</span></div>
<div class="sim-preview__mini sim-preview__mini--enemy sim-preview__mini--elite" style="left: 72%; top: 35%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 85%; top: 22%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__turn-bar">
<span>Turn <strong>3 of 5</strong></span>
<span class="sim-preview__turn-bar-progress"></span>
<span>Salamanders to act</span>
</div>
</div>
<div class="sim-preview__sidebar">
<div class="sim-preview__sidebar-head">
<span>Live commentary</span>
<span class="sim-preview__sidebar-head-dot"></span>
</div>
<div class="sim-preview__bubble"><strong>Claude</strong>Tacticals walk the left objective. Stormcast haven’t blinked.</div>
<div class="sim-preview__bubble sim-preview__bubble--system"><strong>Turn</strong>Capt rolls a six on the charge.</div>
<div class="sim-preview__bubble"><strong>Claude</strong>Cover’s thin behind that ruin — push centre next?</div>
<div class="sim-preview__compose">
<span class="sim-preview__compose-input">say something to the commentator…</span>
<span class="sim-preview__compose-btn">⏎</span>
</div>
</div>
</div>
</div>
</figure>
<span class="tool-landing-hero__plaque"><span class="tool-landing-hero__plaque-dot"></span>Workshop sketch · not the shipping UI</span>
</div>
</div>
</section>
<!-- ============ 5. "What's coming" feature preview (REUSE: starter-path) ============ -->
<section class="whats-coming">
<div class="whats-coming__inner">
<div class="whats-coming__head">
<span class="eyebrow-stamp">What’s Coming</span>
<h2 class="whats-coming__head-title">Three Claims, <em>Plain.</em></h2>
<span class="whats-coming__head-rule" aria-hidden="true"></span>
<p class="whats-coming__head-lede">No marketing varnish. This is the bench-list of what she does when she opens the doors.</p>
</div>
<!-- starter-path catalogue block, verbatim shape -->
<div class="starter-path">
<div class="starter-path__head">
<span class="eyebrow-stamp">For the New Hand</span>
<h2 class="starter-path__title">Three Claims, Plain</h2>
<span class="starter-path__rule" aria-hidden="true"></span>
<p class="starter-path__lede">No marketing varnish. Three claims, three demos when she opens.</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">Player vs Player</h3>
<p class="starter-path__step-copy">Bring your saved armies in from the Builder. Take turns at your own pace — minutes apart or weeks apart, the simulator waits as long as you need it to. Async by default; live if you both happen to be at the bench together.</p>
<a class="starter-path__step-link" href="#">Read the matchmaking notes</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">Player vs AI</h3>
<p class="starter-path__step-copy">No opponent? We’ll generate one. Pick a difficulty — Cadet through Tournament — and the simulator drafts a list that fits your points and your faction’s likely foes. Solid practice on a quiet night.</p>
<a class="starter-path__step-link" href="#">See the difficulty ladder</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">Live commentary</h3>
<p class="starter-path__step-copy">Claude calls every turn — opening odds, flank reads, when your dice betray you and when they don’t. Twitch-chat speed, saloon-storyteller cadence. The battle becomes a story, not a spreadsheet.</p>
<a class="starter-path__step-link" href="#">Hear a sample run</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 6. PAIRED ROW: sim-preview detail (LEFT) + positioning (RIGHT) ============ -->
<section class="preview-positioning">
<div class="preview-positioning__inner">
<div class="preview-positioning__left">
<figure class="plated-frame">
<div class="plated-frame__media">
<!-- Simulator UI preview (detailed variant) -->
<div class="sim-preview sim-preview--detailed" aria-hidden="true">
<div class="sim-preview__board">
<div class="sim-preview__hud">
<span class="sim-preview__hud-pill"><strong>Salamanders</strong> · 512 vp · CP 4</span>
<span class="sim-preview__hud-pill sim-preview__hud-pill--enemy">CP 3 · 463 vp · <strong>Stormcast Eternals</strong></span>
</div>
<span class="sim-preview__terrain" style="left: 25%; top: 35%; width: 100px; height: 56px;"></span>
<span class="sim-preview__terrain" style="left: 70%; top: 28%; width: 70px; height: 96px;"></span>
<span class="sim-preview__terrain" style="left: 50%; top: 72%; width: 130px; height: 60px;"></span>
<span class="sim-preview__terrain" style="left: 86%; top: 70%; width: 60px; height: 60px;"></span>
<span class="sim-preview__objective" style="left: 50%; top: 50%;">I</span>
<span class="sim-preview__objective" style="left: 24%; top: 72%;">II</span>
<span class="sim-preview__objective" style="left: 78%; top: 52%;">III</span>
<div class="sim-preview__mini sim-preview__mini--elite" style="left: 18%; top: 82%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span><span class="sim-preview__mini-label">CAPT</span></div>
<div class="sim-preview__mini" style="left: 32%; top: 84%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini" style="left: 38%; top: 76%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini" style="left: 46%; top: 84%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--vehicle" style="left: 20%; top: 92%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-label">RHINO</span></div>
<div class="sim-preview__mini" style="left: 58%; top: 60%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy sim-preview__mini--elite" style="left: 78%; top: 18%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span><span class="sim-preview__mini-label">LORD</span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 64%; top: 20%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 88%; top: 24%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 60%; top: 32%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 84%; top: 36%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__mini sim-preview__mini--enemy" style="left: 72%; top: 44%;"><span class="sim-preview__mini-ring"></span><span class="sim-preview__mini-arrow"></span></div>
<div class="sim-preview__turn-bar">
<span>Round <strong>3 of 5</strong></span>
<span class="sim-preview__turn-bar-progress"></span>
<span>Salamanders · Movement phase</span>
</div>
</div>
<div class="sim-preview__sidebar">
<div class="sim-preview__sidebar-head">
<span>Live commentary</span>
<span class="sim-preview__sidebar-head-dot"></span>
</div>
<div class="sim-preview__bubble"><strong>Claude</strong>Brushhand’s Tacticals are walking the left objective. <em>Wayland’s Liberators haven’t blinked since round one.</em></div>
<div class="sim-preview__bubble sim-preview__bubble--system"><strong>Turn</strong>Charge declared — Captain into Liberator line. Needs 8″ on 2D6.</div>
<div class="sim-preview__bubble"><strong>Claude</strong>The Captain rolled an <em>eleven</em>. Reach for the objective on the next turn looks open.</div>
<div class="sim-preview__bubble sim-preview__bubble--alert"><strong>Battle</strong>Lord-Aquilor moves to intercept — bonus charge inbound at +1 to hit.</div>
<div class="sim-preview__bubble"><strong>Claude</strong>If that wound roll holds, this is the moment the saloon talks about next week. <em>Cover’s thin behind ruin II.</em></div>
<div class="sim-preview__compose">
<span class="sim-preview__compose-input">tell Claude what to watch for…</span>
<span class="sim-preview__compose-btn">⏎</span>
</div>
</div>
</div>
</div>
</figure>
<div class="preview-positioning__caption">Brushwork in progress — final UI is subject to change before the workshop ships.</div>
</div>
<div class="preview-positioning__right">
<div class="preview-positioning__roundel">
<div class="stamped-roundel stamped-roundel--review">
<div class="stars">WIP</div>
<div>Mark</div>
</div>
</div>
<div class="preview-positioning__head">
<span class="eyebrow-stamp">In the Workshop</span>
<h2 class="preview-positioning__title">Not Another Generic <em>Battle Sim.</em></h2>
<span class="preview-positioning__rule" aria-hidden="true"></span>
</div>
<div class="preview-positioning__body">
<p>The big tabletop simulators on the web don’t know what you own. This one does. It runs whatever army you actually built in the Builder — same units, same points, same paint scheme once we wire the gallery hook. Your Salamanders look like your Salamanders, not a generic green silhouette.</p>
<p>We didn’t want a solved game where the optimal play stares back. Claude reads the board each turn and tells the story — opens at long odds, calls the reach for the centre objective, names the heroic moment when it shows up. It’s a battle, not a spreadsheet of expected damage.</p>
<blockquote class="preview-positioning__pull">“The simulator works at our pace, not a competitive ladder’s. Async turns, no clock, no rank pressure.”</blockquote>
<p>Built for hobbyists. The people who paint, then play, then go back to the bench. If you only get a turn in once a fortnight, the simulator waits as long as you need. If you want to drill match-ups across an evening, she keeps pace.</p>
</div>
</div>
</div>
</section>
<!-- ============ 7. Cross-promote: Army Builder ready now (REUSE: tool-card) ============ -->
<section class="cross-promote">
<div class="cross-promote__inner">
<div class="cross-promote__left">
<div class="cross-promote__eyebrow-row">
<span class="eyebrow-stamp">Already Open</span>
<span class="cross-promote__live-pill">Live · Army Builder</span>
</div>
<h2 class="cross-promote__title">Need a force first?<em>The Builder’s already saddled up.</em></h2>
<span class="cross-promote__rule" aria-hidden="true"></span>
<p class="cross-promote__copy">Roster your units, lock the points, save the list. The simulator reaches for your saved armies when she ships — and the Builder’s a tournament-grade tool in its own right today.</p>
<div class="cross-promote__signals">
<div class="cross-promote__signal">Live points tally as you draft — never one over the limit by accident.</div>
<div class="cross-promote__signal">Playstyle analysis on every saved list — melee vs ranged, board control, durability.</div>
<div class="cross-promote__signal">Unlimited saved armies per account, every game system we stock.</div>
</div>
</div>
<div class="cross-promote__right">
<!-- tool-card catalogue block, used at panel scale -->
<article class="tool-card">
<div class="tool-card__media">
<!-- Inline mini UI snippet of the Army Builder -->
<img alt="Army Builder roster preview" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360'><defs><pattern id='g' width='32' height='32' patternUnits='userSpaceOnUse'><path d='M0 0H32M0 0V32' stroke='%23F4A479' stroke-opacity='0.05' stroke-width='1'/></pattern></defs><rect width='640' height='360' fill='%231B1314'/><rect width='640' height='360' fill='url(%23g)'/><rect x='20' y='20' width='600' height='40' fill='%232B1B1C' stroke='%23F4A479' stroke-width='1.5'/><text x='34' y='46' fill='%23F4A479' font-family='Cinzel,serif' font-size='14' letter-spacing='2'>SALAMANDERS • 1,500 PT • 10TH ED</text><rect x='480' y='28' width='128' height='24' fill='%23F4A479'/><text x='544' y='45' fill='%231B1314' font-family='Cinzel,serif' font-size='12' letter-spacing='2' text-anchor='middle'>1,485 / 1,500</text><g font-family='Cinzel,serif' font-size='13' fill='%23D8C3B1' letter-spacing='1'><rect x='20' y='76' width='600' height='32' fill='%232B1B1C'/><circle cx='40' cy='92' r='5' fill='%23F4A479'/><text x='56' y='97'>Captain in Terminator Armour</text><text x='544' y='97' fill='%23F4A479'>105 PT</text><rect x='20' y='112' width='600' height='32' fill='%231B1314'/><circle cx='40' cy='128' r='5' fill='%23F4A479'/><text x='56' y='133'>Tactical Squad × 10</text><text x='544' y='133' fill='%23F4A479'>175 PT</text><rect x='20' y='148' width='600' height='32' fill='%232B1B1C'/><circle cx='40' cy='164' r='5' fill='%23F4A479'/><text x='56' y='169'>Aggressor Squad × 6</text><text x='544' y='169' fill='%23F4A479'>180 PT</text><rect x='20' y='184' width='600' height='32' fill='%231B1314'/><circle cx='40' cy='200' r='5' fill='%23F4A479'/><text x='56' y='205'>Redemptor Dreadnought</text><text x='544' y='205' fill='%23F4A479'>225 PT</text><rect x='20' y='220' width='600' height='32' fill='%232B1B1C'/><circle cx='40' cy='236' r='5' fill='%23F4A479'/><text x='56' y='241'>Rhino Transport</text><text x='544' y='241' fill='%23F4A479'>85 PT</text><rect x='20' y='256' width='600' height='32' fill='%231B1314'/><circle cx='40' cy='272' r='5' fill='%23F4A479'/><text x='56' y='277'>Eradicator Squad × 6</text><text x='544' y='277' fill='%23F4A479'>200 PT</text></g><rect x='20' y='300' width='600' height='40' fill='%232B1B1C' stroke='%23F4A479' stroke-width='1.5'/><text x='34' y='326' fill='%23D8C3B1' font-family='Cinzel,serif' font-size='12' letter-spacing='2'>PLAYSTYLE</text><text x='130' y='326' fill='%23F4A479' font-family='Cinzel,serif' font-size='12' letter-spacing='1'>MELEE 38% · RANGED 47% · SUPPORT 15%</text><text x='510' y='326' fill='%234A6E50' font-family='Cinzel,serif' font-size='12' letter-spacing='2'>LIST: VALID</text></svg>">
<span class="tool-card__cog" aria-hidden="true"></span>
</div>
<span class="eyebrow-stamp">Army Builder<span class="tool-card__status">Live</span></span>
<h3 class="tool-card__title">Forge a Roster, Lock the Points</h3>
<p class="tool-card__copy">Pick your faction, draft your units, watch the points tracker keep you honest. Save as many lists as you like — the simulator reaches for them when she opens.</p>
<ul class="tool-card__features">
<li>Live points tally as you draft</li>
<li>Playstyle analysis on every list</li>
<li>Unlimited saved armies per account</li>
</ul>
<a class="btn btn--block" href="#">Open the Builder</a>
</article>
</div>
</div>
</section>
<!-- ============ 8. From the bench — painting showcase (REUSE: painting-showcase) ============ -->
<section class="from-the-bench">
<div class="from-the-bench__inner">
<div class="from-the-bench__head">
<div class="from-the-bench__head-left">
<span class="eyebrow-stamp">From the Bench</span>
<h2 class="from-the-bench__title">Real Forces, <em>Painted by the Community.</em></h2>
<p class="from-the-bench__lede">When she ships, every one of these armies could roll initiative against yours. Drop your painting in and join the roster.</p>
</div>
<div class="from-the-bench__count"><strong>1,940</strong>Armies on the bench</div>
</div>
<!-- painting-showcase catalogue block, 4 tiles -->
<div class="painting-showcase">
<div class="painting-showcase__grid">
<a class="painting-showcase__tile painting-showcase__tile--lg" href="#">
<img alt="Ultramarines Tactical Squad painted by brushhand" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'><defs><linearGradient id='s' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%231f2f4a'/><stop offset='1' stop-color='%23613F34'/></linearGradient></defs><rect width='480' height='480' fill='url(%23s)'/><rect y='320' width='480' height='160' fill='%23231916'/><path d='M0 0L160 480 200 480 80 0Z' fill='%23F4A479' opacity='0.08'/><g fill='%23153a6a'><path d='M140 320Q140 230 160 220Q190 220 195 240Q200 220 220 220Q240 230 240 320Z'/><path d='M220 320Q220 200 245 195Q278 195 285 220Q292 195 320 200Q345 215 345 320Z'/><path d='M310 320Q310 240 330 230Q360 230 365 250Q370 235 388 235Q410 240 410 320Z'/></g><g fill='%23C5A688' opacity='0.5'><circle cx='180' cy='240' r='12'/><circle cx='285' cy='220' r='14'/><circle cx='360' cy='250' r='11'/></g><path d='M60 320H420' stroke='%23F4A479' stroke-opacity='0.2' stroke-width='1.5'/></svg>">
<span class="painting-showcase__caption">Ultramarines Tactical Squad <span>· @brushhand</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--lg" href="#">
<img alt="Stormcast Vanguard painted by pelltheslow" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480'><defs><linearGradient id='s2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%233b2147'/><stop offset='1' stop-color='%23613F34'/></linearGradient></defs><rect width='480' height='480' fill='url(%23s2)'/><rect y='340' width='480' height='140' fill='%23231916'/><path d='M380 0L240 480 200 480 320 0Z' fill='%23F4A479' opacity='0.1'/><g fill='%23d4ae47'><path d='M120 340Q120 250 145 240Q180 245 185 270Q190 250 215 250Q240 265 240 340Z'/><path d='M210 340Q210 215 240 210Q280 215 290 245Q300 220 330 225Q360 240 360 340Z'/><path d='M340 340Q340 270 360 260Q390 265 395 280Q400 270 420 275Q435 285 435 340Z'/></g><g fill='%23F4A479' opacity='0.6'><polygon points='240,210 252,235 244,235 256,250 234,250 246,235 228,235'/><polygon points='180,265 188,280 184,280 192,290 174,290 182,280 168,280'/></g><path d='M60 340H420' stroke='%23F4A479' stroke-opacity='0.2' stroke-width='1.5'/></svg>">
<span class="painting-showcase__caption">Stormcast Vanguard Chamber <span>· @pelltheslow</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--wide" href="#">
<img alt="Necron Royal Court painted by oldworldoldhand" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 320'><defs><linearGradient id='s3' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23103a30'/><stop offset='1' stop-color='%231B1314'/></linearGradient></defs><rect width='480' height='320' fill='url(%23s3)'/><rect y='230' width='480' height='90' fill='%23231916'/><path d='M0 0L80 320 120 320 40 0Z' fill='%2358d68d' opacity='0.1'/><g fill='%23586466'><path d='M120 230Q120 160 145 150Q175 155 180 175Q185 160 205 160Q225 170 225 230Z'/><path d='M205 230Q205 130 230 125Q260 130 268 155Q275 135 305 140Q330 155 330 230Z'/><path d='M310 230Q310 175 330 165Q360 170 365 190Q370 180 388 180Q405 190 405 230Z'/></g><g fill='%2358d68d' opacity='0.7'><circle cx='168' cy='175' r='4'/><circle cx='268' cy='155' r='5'/><circle cx='360' cy='190' r='4'/></g><path d='M60 230H420' stroke='%23F4A479' stroke-opacity='0.2' stroke-width='1.5'/></svg>">
<span class="painting-showcase__caption">Necron Royal Court <span>· @oldworldoldhand</span></span>
</a>
<a class="painting-showcase__tile painting-showcase__tile--wide" href="#">
<img alt="Salamanders Combat Patrol painted by tongueofflame" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 320'><defs><linearGradient id='s4' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23472216'/><stop offset='1' stop-color='%23120808'/></linearGradient></defs><rect width='480' height='320' fill='url(%23s4)'/><rect y='230' width='480' height='90' fill='%23231916'/><path d='M380 0L260 320 220 320 340 0Z' fill='%23F4A479' opacity='0.12'/><g fill='%231e4d2b'><path d='M130 230Q130 165 152 155Q180 160 188 178Q195 165 215 165Q235 175 235 230Z'/><path d='M215 230Q215 138 240 134Q272 140 282 168Q290 144 318 148Q345 165 345 230Z'/><path d='M315 230Q315 178 333 170Q360 175 366 192Q372 182 388 184Q405 192 405 230Z'/></g><g fill='%23ff6f30' opacity='0.75'><circle cx='175' cy='178' r='4'/><circle cx='275' cy='168' r='5'/><circle cx='362' cy='192' r='4'/><path d='M275 155Q278 145 282 148Q280 152 281 158' stroke='%23ff6f30' stroke-width='1' fill='none' opacity='0.5'/></g><path d='M60 230H420' stroke='%23F4A479' stroke-opacity='0.2' stroke-width='1.5'/></svg>">
<span class="painting-showcase__caption">Salamanders Combat Patrol <span>· @tongueofflame</span></span>
</a>
</div>
<div class="painting-showcase__submit"><a class="btn btn--ghost" href="#">Submit Your Painting</a></div>
</div>
</div>
</section>
<!-- ============ 9. FAQ (NEW: faq-pair) ============ -->
<section class="faq-section">
<div class="faq-section__inner">
<div class="faq-section__head">
<span class="eyebrow-stamp">Straight Answers</span>
<h2 class="faq-section__title">Four Questions, <em>Plainly Answered.</em></h2>
<span class="faq-section__rule" aria-hidden="true"></span>
<p class="faq-section__lede">No marketing dance — bench-honest answers to the four questions everyone’s asked since we put the kettle on for this one.</p>
</div>
<div class="faq-section__list">
<div class="faq-pair 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="faq-pair__num">01</div>
<div class="faq-pair__body">
<div class="faq-pair__q-row">
<h3 class="faq-pair__q">When does the simulator launch?</h3>
<span class="faq-pair__q-tag">Timing</span>
</div>
<p class="faq-pair__a"><strong>No committed date — that’s the honest answer.</strong> We don’t want to ship her until she’s ready to read every army cleanly, hold a five-round game without blinking, and let Claude call the action without losing the thread. Drop your name in the form above and we’ll write you the morning she opens.</p>
</div>
</div>
<div class="faq-pair 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="faq-pair__num">02</div>
<div class="faq-pair__body">
<div class="faq-pair__q-row">
<h3 class="faq-pair__q">Do I need a War Dungeon account?</h3>
<span class="faq-pair__q-tag">Access</span>
</div>
<p class="faq-pair__a"><strong>Yes — your armies come from the Builder, and the Builder’s tied to your account.</strong> Sign-up is free and will stay free when the simulator opens. If you want a head start, the Builder’s already taking enlistments — build the army you’ll bring to the bench when she ships.</p>
</div>
</div>
<div class="faq-pair 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="faq-pair__num">03</div>
<div class="faq-pair__body">
<div class="faq-pair__q-row">
<h3 class="faq-pair__q">Will my opponent be a real person?</h3>
<span class="faq-pair__q-tag">Modes</span>
</div>
<p class="faq-pair__a"><strong>Both options will be on the bench.</strong> Player vs Player matches you to another commander’s saved army; Player vs AI generates an opponent at your chosen difficulty (Cadet through Tournament). PvP runs async — take your turn now, your opponent takes theirs whenever they sit down. No clock pressure, no rank ladder.</p>
</div>
</div>
<div class="faq-pair 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="faq-pair__num">04</div>
<div class="faq-pair__body">
<div class="faq-pair__q-row">
<h3 class="faq-pair__q">Why Claude commentary?</h3>
<span class="faq-pair__q-tag">Voice</span>
</div>
<p class="faq-pair__a"><strong>Because a battle’s a story, not a dice trace.</strong> Claude reads the board, weighs the odds, and narrates the turn the way a watcher in the saloon would — bias and all. It’s the difference between watching a match and reading about one, and it’s the thing none of the other simulators on the web bother to do.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 10. PAIRED ROW: launch-notify newsletter (LEFT) + loyalty teaser (RIGHT) ============ -->
<section class="paired-row">
<div class="paired-row__head">
<h3 class="paired-row__head-title">Stay on the bench rota</h3>
<span class="paired-row__head-aside">Sign up for the launch letter, or earn while you wait.</span>
</div>
<div class="paired-row__inner">
<div class="paired-row__cell">
<!-- newsletter-garrison reused, copy override for launch-notify -->
<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>
<span class="paired-row__seal">Launch Letter · One Send</span>
<div class="newsletter-garrison__copy">
<h3>Send Word When She Ships</h3>
<p>One letter only — the morning the simulator opens. We promise we won’t write twice.</p>
</div>
<form class="newsletter-garrison__form" action="/wp-json/wd/v1/launch-notify" method="post">
<input type="email" name="email" placeholder="your.signal@dispatch.com" aria-label="Email for launch notification">
<button type="submit">Notify me</button>
</form>
<div class="paired-row__perks">
<span class="paired-row__perk">No marketing barrage</span>
<span class="paired-row__perk">Unsubscribe anytime</span>
<span class="paired-row__perk">One letter, then quiet</span>
</div>
</div>
</section>
</div>
<div class="paired-row__cell">
<!-- loyalty-strip reused, single-column compact treatment -->
<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">Spend at War Dungeon while you wait for the simulator — redeem the points at Nerdworks, ArtSabers, or Paragon.</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>
</div>
</div>
</section>
<!-- ============ 11. Global footer (REUSE: site-footer) ============ -->
<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" style="width: 36px; height: 36px;"></span>
<span class="site-footer__word">War Dungeon</span>
</div>
<p class="site-footer__copy">The workbench of warriors — Warhammer, D&D, the kit and the know-how. A Nerdworks brand.</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="#">Pre-orders</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</a></li>
<li><a href="#">Battle Simulator</a></li>
<li><a href="#">How-To Guides</a></li>
<li><a href="#">Creators</a></li>
<li><a href="#">Painting Showcase</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>
<li><a href="#">Store Finder</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 / Creator</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Careers</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>Apple Pay</span><span>Klarna</span>
</div>
<div class="site-footer__legal">© 2026 War Dungeon · A Nerdworks Brand · <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Cookies</a></div>
</div>
</div>
</footer>
</body>
</html>