/* Gray Legion Tools — graylegiontools.com
   A night-map palette: navy field, iron grid lines, steel text, and the logo's blue glow reserved for
   things that are live (march routes, the main action). Bahnschrift (ships with Windows, where every
   customer is) for headings; the system UI face for text. */
:root {
  --night: #0c131c;
  --field: #142231;
  --field-2: #18293a;
  --iron: #2d4256;
  --steel: #b9c7d4;
  --steel-dim: #7f93a7;
  --white: #eef3f8;
  --glow: #4fc3ff;
  --glow-deep: #1f8fd1;
  --food: #e8c15a;
  --wood: #8fb46a;
  --stone: #a5adb6;
  --gold: #f0a93b;
  --gem: #b98cff;
  --danger: #ff8a7a;
  --ok: #6fd6a4;
  --display: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", sans-serif;
  --text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
  --r: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--steel);
  font: 17px/1.6 var(--text);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--glow); text-underline-offset: 3px; }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--glow); color: var(--night); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

h1, h2, h3 {
  font-family: var(--display);
  font-stretch: semi-condensed;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: var(--measure); }
.lede { font-size: 1.2rem; color: var(--steel); }
.small { font-size: .9rem; color: var(--steel-dim); }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* buttons: one primary (glow), one quiet */
.btn {
  display: inline-block; padding: .7em 1.25em; border-radius: var(--r);
  font: 600 1rem/1.2 var(--text); text-decoration: none; cursor: pointer;
  border: 1px solid var(--iron); background: transparent; color: var(--white);
}
.btn:hover { border-color: var(--steel-dim); color: var(--white); }
.btn-primary { background: var(--glow); border-color: var(--glow); color: #06121c; }
.btn-primary:hover { background: #8ad8ff; border-color: #8ad8ff; color: #06121c; }
.btn-block { width: 100%; text-align: center; }
button.link { background: none; border: 0; padding: 0; color: var(--glow); font: inherit; cursor: pointer; }

/* header */
.top { border-bottom: 1px solid var(--iron); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white);
  font: 700 1.15rem/1 var(--display); font-stretch: semi-condensed; }
.brand img { width: 34px; height: 34px; }
.top nav { display: flex; gap: 22px; flex: 1; }
.top nav a { color: var(--steel); text-decoration: none; font-size: .97rem; }
.top nav a:hover, .top nav a[aria-current] { color: var(--white); }
.who { display: flex; align-items: center; gap: 16px; }
.who form { margin: 0; }
.who a:not(.btn), .who button.link { color: var(--steel); text-decoration: none; font-size: .97rem; }

.flash { margin: 16px auto 0; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--iron);
  background: var(--field); width: min(1180px, 100% - 40px); }
.flash-ok { border-color: #2f6b55; }
.flash-error { border-color: #7a3b34; color: #ffd2cb; }

/* hero: text left, the kingdom map right */
.hero { padding: 64px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero h1 { max-width: 13ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.hero .note { font-size: .92rem; color: var(--steel-dim); max-width: 52ch; }

.kmap { width: 100%; height: auto; }
.kmap .zone { fill: var(--field); stroke: var(--iron); stroke-width: 1.5; }
.kmap .zone.inner { fill: var(--field-2); }
.kmap .grid line { stroke: #1b2b3b; stroke-width: 1; }
.kmap .pass { fill: var(--night); stroke: var(--iron); stroke-width: 1.5; }
.kmap .route { fill: none; stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: march 1.6s ease-out forwards; }
.kmap .route.r2 { animation-delay: .35s; }
.kmap .route.r3 { animation-delay: .7s; }
.kmap .route.r4 { animation-delay: 1.05s; }
.kmap .node { stroke: var(--night); stroke-width: 2; }
.kmap .n-food { fill: var(--food); } .kmap .n-wood { fill: var(--wood); }
.kmap .n-stone { fill: var(--stone); } .kmap .n-gold { fill: var(--gold); } .kmap .n-gem { fill: var(--gem); }
.kmap .city { fill: var(--white); stroke: var(--night); stroke-width: 2; }
.kmap .label { fill: var(--steel-dim); font: 600 13px var(--text); }
.kmap .troop { fill: var(--glow); opacity: 0; animation: arrive .4s ease-out forwards; }
.kmap .troop.t1 { animation-delay: 1.5s; } .kmap .troop.t2 { animation-delay: 1.85s; }
.kmap .troop.t3 { animation-delay: 2.2s; } .kmap .troop.t4 { animation-delay: 2.55s; }
@keyframes march { to { stroke-dashoffset: 0; } }
@keyframes arrive { to { opacity: 1; } }

/* sections */
.section { padding: 72px 0; border-top: 1px solid var(--iron); }
.section-head { max-width: 62ch; margin-bottom: 36px; }

/* what it does: a ledger, name on the left, what it does on the right */
.ledger { display: grid; gap: 0; border-top: 1px solid var(--iron); }
.ledger-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 26px 0;
  border-bottom: 1px solid var(--iron); align-items: start; }
.ledger-row h3 { margin: 0; display: flex; align-items: center; gap: 12px; }
.ledger-row h3 svg { width: 26px; height: 26px; flex: none; }
.ledger-row ul { margin: 0; padding-left: 1.1em; max-width: var(--measure); }
.ledger-row li { margin: 0 0 .35em; }
.ledger-row p:last-child { margin-bottom: 0; }

/* add-ons */
.addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 40px; }
.addon { padding: 18px 0; border-bottom: 1px solid var(--iron); }
.addon h3 { display: flex; justify-content: space-between; gap: 12px; margin-bottom: .3em; }
.addon h3 .from { font: 400 .95rem var(--text); color: var(--steel-dim); white-space: nowrap; }
.addon p { margin: 0; }

/* pricing table: all periods on wide screens, one chosen period on narrow ones */
.period-pick { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.period-pick input { position: absolute; opacity: 0; pointer-events: none; }
.period-pick label { border: 1px solid var(--iron); border-radius: var(--r); padding: .45em .9em; cursor: pointer; }
.period-pick input:checked + label { border-color: var(--glow); color: var(--white); }
.period-pick input:focus-visible + label { outline: 2px solid var(--glow); outline-offset: 2px; }
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices th, .prices td { padding: 14px 12px; text-align: right; border-bottom: 1px solid var(--iron); }
.prices th:first-child, .prices td:first-child { text-align: left; }
.prices thead th { color: var(--steel-dim); font-weight: 600; font-size: .95rem; }
.prices tbody th { font-weight: 600; color: var(--white); }
.prices tbody th span { display: block; font-weight: 400; font-size: .88rem; color: var(--steel-dim); }
.prices tr.full th, .prices tr.full td { color: var(--white); background: rgba(79, 195, 255, .07); }
.prices tr.full td { font-weight: 700; }
.prices tr.full th:first-child { box-shadow: inset 3px 0 0 var(--glow); }
.prices tr.sub th { padding-left: 28px; font-weight: 500; color: var(--steel); }
.price-foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

/* steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.steps li { counter-increment: step; border-top: 2px solid var(--iron); padding-top: 16px; }
.steps li::before { content: counter(step); display: block; font: 700 2rem/1 var(--display); color: var(--glow); margin-bottom: 10px; }
.steps h3 { font-size: 1.15rem; margin-bottom: .35em; }
.steps p { font-size: .97rem; margin: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--iron); padding: 16px 0; max-width: 80ch; }
.faq summary { cursor: pointer; color: var(--white); font-weight: 600; font-size: 1.05rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--glow); font-weight: 700; }
.faq details[open] summary::before { content: "\2212"; }
.faq details p { margin: 10px 0 0 1.2em; }

/* footer */
.foot { border-top: 1px solid var(--iron); padding: 32px 0 48px; margin-top: 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: var(--steel); text-decoration: none; }
.foot a:hover { color: var(--white); }

/* forms and inner pages */
.page { padding: 48px 0 24px; }
.panel { background: var(--field); border: 1px solid var(--iron); border-radius: var(--r); padding: 28px; }
.narrow { width: min(460px, 100% - 40px); margin-inline: auto; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; margin-bottom: 6px; color: var(--white); font-weight: 600; font-size: .95rem; }
input[type=email], input[type=password], input[type=text], input[type=search], textarea, select {
  width: 100%; padding: .65em .75em; border-radius: var(--r); border: 1px solid var(--iron);
  background: var(--night); color: var(--white); font: inherit; }
input:focus, textarea:focus, select:focus { border-color: var(--glow); outline: none; }
textarea { min-height: 180px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: .35em; accent-color: var(--glow); }
.error { color: #ffd2cb; border: 1px solid #7a3b34; background: #2a1715; border-radius: var(--r); padding: 10px 12px; margin-bottom: 16px; }
.muted { color: var(--steel-dim); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stack > * + * { margin-top: 24px; }
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.kv dt { color: var(--steel-dim); }
.kv dd { margin: 0; color: var(--white); }
.tag { display: inline-block; border: 1px solid var(--iron); border-radius: 999px; padding: .1em .6em; font-size: .85rem; margin: 0 4px 4px 0; }
.tag-ok { border-color: #2f6b55; color: var(--ok); }
.tag-off { color: var(--steel-dim); }
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--iron); vertical-align: top; }
table.list th { color: var(--steel-dim); font-weight: 600; font-size: .92rem; }

/* billing picker */
.picker fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.picker legend { color: var(--white); font: 700 1.3rem var(--display); font-stretch: semi-condensed; margin-bottom: 12px; }
.choice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--iron); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; background: var(--field); }
.choice:has(input:checked) { border-color: var(--glow); }
.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.choice input { margin-top: .3em; accent-color: var(--glow); }
.choice .what { flex: 1; }
.choice .what strong { color: var(--white); }
.choice .what span { display: block; font-size: .92rem; color: var(--steel-dim); }
.choice .amt { color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.periods { display: flex; flex-wrap: wrap; gap: 8px; }
.periods .choice { margin: 0; padding: 10px 14px; }
.summary { position: sticky; top: 20px; }
.summary .total { font: 700 2.2rem/1 var(--display); color: var(--white); margin: 6px 0 4px; }
.picker-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.picker .base-only[aria-disabled=true] { opacity: .5; }

/* patch notes */
.release { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--iron); }
.release h2 { font-size: 1.6rem; margin: 0; }
.release time { color: var(--steel-dim); font-size: .92rem; }
.release .notes ul { padding-left: 1.1em; }

.prose { max-width: 75ch; }
.prose h2 { margin-top: 1.6em; font-size: 1.5rem; }
.draft-note { border: 1px dashed var(--gold); color: #ffe2b0; border-radius: var(--r); padding: 10px 14px; margin-bottom: 24px; }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .ledger-row { grid-template-columns: 1fr; gap: 10px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker-grid { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .top .wrap { flex-wrap: wrap; gap: 12px 20px; padding: 12px 0; }
  .top nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .period-pick { display: flex; }
  .prices th[data-p], .prices td[data-p] { display: none; }
  .pricing:has(#pp-m1:checked) [data-p=m1], .pricing:has(#pp-m3:checked) [data-p=m3],
  .pricing:has(#pp-m6:checked) [data-p=m6], .pricing:has(#pp-y1:checked) [data-p=y1],
  .pricing:has(#pp-life:checked) [data-p=life] { display: table-cell; }
  .steps { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kmap .route { animation: none; stroke-dashoffset: 0; }
  .kmap .troop { animation: none; opacity: 1; }
}