/* Class detail guides. Load after the shared catalog; keep every rule inside
   the redesigned main so site navigation, consent and other pages stay intact. */
.class-guide-page.cg-redesign {
  --cg-gold: #e8bd73;
  --cg-text: #eddfc9;
  --cg-muted: #c5b39a;
  --cg-line: #705331;
  --cg-line-soft: #543d27;
  --cg-panel: #21170f;
  --cg-accent: #e8d8ba;
  padding: 24px 0 72px;
  color: var(--cg-text);
  background: radial-gradient(ellipse at 80% 0, #65442424, transparent 680px), #110d09;
  font: 400 15px/1.7 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign[data-class="warrior"] { --cg-accent: #d2b393; }
.class-guide-page.cg-redesign[data-class="paladin"] { --cg-accent: #e8afce; }
.class-guide-page.cg-redesign[data-class="hunter"] { --cg-accent: #b7ce91; }
.class-guide-page.cg-redesign[data-class="rogue"] { --cg-accent: #e5d88c; }
.class-guide-page.cg-redesign[data-class="priest"] { --cg-accent: #eee9db; }
.class-guide-page.cg-redesign[data-class="shaman"] { --cg-accent: #91bde6; }
.class-guide-page.cg-redesign[data-class="mage"] { --cg-accent: #9dd9e4; }
.class-guide-page.cg-redesign[data-class="warlock"] { --cg-accent: #b9a7e0; }
.class-guide-page.cg-redesign[data-class="druid"] { --cg-accent: #e9b17b; }
.class-guide-page.cg-redesign *,
.class-guide-page.cg-redesign *::before,
.class-guide-page.cg-redesign *::after { box-sizing: border-box; }
.class-guide-page.cg-redesign [hidden] { display: none !important; }
.class-guide-page.cg-redesign > .wrap {
  width: min(1280px, calc(100% - 48px));
  max-width: 1280px;
  margin-inline: auto;
}
.class-guide-page.cg-redesign :is(section, article, aside, nav, div) { min-width: 0; }
.class-guide-page.cg-redesign :is(h1, h2, h3, p, li, a, strong) { overflow-wrap: break-word; }
.class-guide-page.cg-redesign :is(h1, h2, h3) { color: #f2e2c7; text-wrap: balance; }
.class-guide-page.cg-redesign p { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.class-guide-page.cg-redesign :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid #f5ce86;
  outline-offset: 4px;
}
.class-guide-page.cg-redesign :is(section[id], article[id]) { scroll-margin-top: 28px; }
.class-guide-page.cg-redesign .breadcrumbs {
  margin: 0 0 17px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--cg-muted);
}
.class-guide-page.cg-redesign .breadcrumbs a { color: #ddbb82; }
.class-guide-page.cg-redesign .kicker {
  margin: 0 0 7px;
  color: var(--cg-gold);
  font: 700 .67rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Shared site.css styles every header/footer; these are article headings. */
.class-guide-page.cg-redesign header {
  position: static;
  z-index: auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.class-guide-page.cg-redesign footer {
  width: 100%;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--cg-line-soft);
  background: none;
  box-shadow: none;
  color: var(--cg-muted);
  font-size: .75rem;
}

.class-guide-page.cg-redesign .class-guide-switcher {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
}
.class-guide-page.cg-redesign .class-guide-switcher > strong {
  margin: 0 0 8px;
  color: #bdab90;
  font-size: .65rem;
  letter-spacing: .1em;
  line-height: 1.5;
}
.class-guide-page.cg-redesign .class-guide-switcher > div {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 7px;
}
.class-guide-page.cg-redesign .class-guide-switcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #5d482e;
  border-radius: 4px;
  background: #21190f;
  color: #dfcdb2;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.class-guide-page.cg-redesign .cg-nav-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid #a07a42;
  border-radius: 3px;
  object-fit: cover;
}
.class-guide-page.cg-redesign .class-guide-switcher a:is(:hover, :focus-visible) {
  border-color: #b89053;
  background: #342619;
  color: #fff0d3;
}
.class-guide-page.cg-redesign .class-guide-switcher a[aria-current="page"] {
  border-color: var(--cg-gold);
  background: linear-gradient(145deg, #46311c, #2b2015);
  color: #fff0d5;
  box-shadow: inset 0 -2px #c89b50;
  pointer-events: auto;
}

.class-guide-page.cg-redesign .class-guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  position: relative;
  isolation: isolate;
  min-height: 368px;
  border: 1px solid #856136;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(120deg, #2c1e12, #18110b 65%);
  overflow: hidden;
  box-shadow: 0 14px 35px #0003;
}
.class-guide-page.cg-redesign .class-guide-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: 32px 36px;
}
.class-guide-page.cg-redesign .cg-title {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 7px 0 11px;
}
.class-guide-page.cg-redesign .cg-title > img {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid #c99b57;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 4px 14px #0008;
}
.class-guide-page.cg-redesign .class-guide-copy h1 {
  min-width: 0;
  margin: 0;
  color: #fff0d5;
  font: 400 clamp(2.35rem, 4.1vw, 3.5rem)/1.08 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}
.class-guide-page.cg-redesign .cg-tagline {
  margin: 0 0 13px;
  color: var(--cg-accent);
  font: 400 clamp(1.12rem, 1.65vw, 1.4rem)/1.4 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .class-guide-copy .lead {
  max-width: 620px;
  margin: 0;
  color: #ddcdb6;
  font: 400 .94rem/1.75 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .class-guide-badges {
  gap: 6px;
  margin: 5px 0 10px;
}
.class-guide-page.cg-redesign .class-guide-badges span {
  font-size: .6rem;
  line-height: 1.5;
  padding: 3px 7px;
}
.class-guide-page.cg-redesign .class-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
  margin-top: 21px;
}
.class-guide-page.cg-redesign .class-guide-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 43px;
  padding: 11px 15px;
  border: 1px solid #ac8147;
  border-radius: 4px;
  color: #f1d8ad;
  background: #21170e;
  font: 700 .76rem/1.35 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}
.class-guide-page.cg-redesign .class-guide-actions .button.primary {
  border-color: #ebc17a;
  color: #27190a;
  background: linear-gradient(125deg, #efc77f, #c49249);
  box-shadow: 0 4px 12px #0003;
}
.class-guide-page.cg-redesign .class-guide-actions .button:is(:hover, :focus-visible) {
  border-color: #f5cf8a;
  color: #fff0d0;
  background: #3d2b19;
  transform: none;
}
.class-guide-page.cg-redesign .class-guide-actions .button.primary:is(:hover, :focus-visible) {
  color: #1b1007;
  background: #f1d092;
}
.class-guide-page.cg-redesign .class-guide-hero figure {
  position: relative;
  order: initial;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
}
.class-guide-page.cg-redesign .class-guide-hero figure img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.class-guide-page.cg-redesign .class-guide-hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #20160e 0%, #20160e40 24%, transparent 50%), linear-gradient(0deg, #18110b8c, transparent 35%);
  pointer-events: none;
}
.class-guide-page.cg-redesign .class-guide-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid #856136;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #21180f;
  overflow: hidden;
}
.class-guide-page.cg-redesign .class-guide-facts article {
  min-width: 0;
  padding: 15px 20px;
  border: 0;
  border-right: 1px solid #624a2f;
}
.class-guide-page.cg-redesign .class-guide-facts article:last-child { border-right: 0; }
.class-guide-page.cg-redesign .class-guide-facts span {
  display: block;
  margin-bottom: 5px;
  color: #d2ad72;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.5;
}
.class-guide-page.cg-redesign .class-guide-facts strong {
  display: block;
  color: #f0dfc5;
  font: 600 .82rem/1.55 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .cg-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 8px;
  margin: 18px 0 0;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--cg-line-soft);
}
.class-guide-page.cg-redesign .cg-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid #624b2f;
  border-radius: 4px;
  color: #e5c99e;
  background: #1d160f;
  font-size: .77rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.class-guide-page.cg-redesign .cg-jump a:is(:hover, :focus-visible) {
  color: #fff0d1;
  border-color: #c49a58;
  background: #34271a;
}
.class-guide-page.cg-redesign .cg-date {
  margin-left: auto;
  color: #bdab92;
  font-size: .73rem;
  line-height: 1.5;
  white-space: nowrap;
}

.class-guide-page.cg-redesign :is(.class-guide-builds, .class-guide-section) {
  margin: 0;
  padding: 34px 0;
  border-bottom: 1px solid var(--cg-line-soft);
}
.class-guide-page.cg-redesign :is(.class-guide-builds, .class-guide-section, .class-guide-status) h2 {
  max-width: 100%;
  margin: 4px 0 15px;
  color: #f1dfc0;
  font: 400 clamp(1.55rem, 2.3vw, 2rem)/1.22 Georgia, "Times New Roman", serif;
  letter-spacing: -.01em;
  text-transform: none;
}
.class-guide-page.cg-redesign .cg-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 15px;
  margin-bottom: 18px;
}
.class-guide-page.cg-redesign .cg-section-title > :is(span, .kicker) {
  color: var(--cg-gold);
  font: 700 .67rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.class-guide-page.cg-redesign .cg-section-title h2 { margin: 0; }
.class-guide-page.cg-redesign .class-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 28px;
}
.class-guide-page.cg-redesign .class-section-heading h2 { margin-bottom: 0; }
.class-guide-page.cg-redesign .class-section-heading > p {
  max-width: 540px;
  margin: 0;
  color: var(--cg-muted);
  font-size: .88rem;
  line-height: 1.7;
}
.class-guide-page.cg-redesign .build-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 13px;
  margin-top: 16px;
}
.class-guide-page.cg-redesign .build-ranking-legend {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .63rem;
  line-height: 1.5;
  letter-spacing: .045em;
}
.class-guide-page.cg-redesign .build-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  border: 1px solid #715431;
  border-radius: 5px;
  background: linear-gradient(145deg, #281c12, #1b140e);
  box-shadow: 0 6px 18px #0002;
}
.class-guide-page.cg-redesign .build-card-solo-3 {
  border-color: #b58a49;
  background: linear-gradient(145deg, #332416, #21180f);
  box-shadow: inset 0 2px #b58a494d;
}
.class-guide-page.cg-redesign .build-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
  min-height: 0;
  padding: 0 0 11px;
  border-bottom: 1px solid #674c2d;
}
.class-guide-page.cg-redesign .build-role-list b {
  padding: 3px 6px;
  font-size: .57rem;
  line-height: 1.4;
  letter-spacing: .04em;
}
.class-guide-page.cg-redesign .build-fit-simple { gap: 10px; }
.class-guide-page.cg-redesign .build-fit-simple small { color: #c2aa88; font-size: .56rem; }
.class-guide-page.cg-redesign .build-fit-simple b { font-size: .83rem; }
.class-guide-page.cg-redesign .build-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 13px;
}
.class-guide-page.cg-redesign .cg-spec-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #b38b50;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 3px 8px #0005;
}
.class-guide-page.cg-redesign .build-card-spec {
  padding: 0;
  color: #d8ba88;
  font-size: .64rem;
  letter-spacing: .035em;
  line-height: 1.5;
}
.class-guide-page.cg-redesign .build-card h3 {
  margin: 12px 0 9px;
  font: 400 clamp(1.1rem, 1.5vw, 1.28rem)/1.32 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .build-card h3 a { color: #f1dfc0; text-decoration: none; }
.class-guide-page.cg-redesign .build-card h3 a:hover { color: #ffdf9e; }
.class-guide-page.cg-redesign .build-card > p {
  margin: 0 0 15px;
  color: #d5c1a6;
  font-size: .82rem;
  line-height: 1.7;
}
.class-guide-page.cg-redesign .build-card .card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin-top: auto;
  padding: 9px 0 0;
  border-top: 1px solid #5b432a;
  color: #f0c680;
  font-size: .75rem;
  line-height: 1.5;
  text-decoration: none;
}
.class-guide-page.cg-redesign .build-card .card-link:is(:hover, :focus-visible) { color: #fff0c9; }
.class-guide-page.cg-redesign .class-guide-story {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: start;
  gap: 24px;
}
.class-guide-page.cg-redesign .class-guide-story > p {
  max-width: 72ch;
  margin: 0;
  color: #e2d1b9;
  font: 400 .96rem/1.85 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .class-guide-story aside {
  padding: 18px 20px;
  border: 1px solid #6e512e;
  border-left: 3px solid #b68a49;
  border-radius: 4px;
  background: #22190f;
}
.class-guide-page.cg-redesign .class-guide-story aside p {
  margin: 0;
  color: #d2bea1;
  font-size: .85rem;
  line-height: 1.8;
}
.class-guide-page.cg-redesign .class-guide-story aside h3 {
  margin: 0 0 10px;
  color: #efd4a5;
  font: 400 1.17rem/1.35 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .class-guide-story aside > :is(span, strong) + p { margin-top: 9px; }
.class-guide-page.cg-redesign .class-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.class-guide-page.cg-redesign .class-milestones article {
  position: relative;
  min-height: 0;
  padding: 20px;
  border: 1px solid #654b2e;
  border-radius: 5px;
  background: #21180f;
}
.class-guide-page.cg-redesign .class-milestones article.featured {
  border-color: #a67b3d;
  background: linear-gradient(140deg, #302214, #21180f);
}
.class-guide-page.cg-redesign .class-milestones article > b {
  display: block;
  max-width: calc(100% - 37px);
  color: #efc57b;
  font: 700 .84rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .class-milestones article > span {
  top: 20px;
  right: 18px;
  color: #927344;
  font-size: 1.2rem;
}
.class-guide-page.cg-redesign .class-milestones h3 {
  margin: 16px 0 8px;
  font: 400 1.12rem/1.35 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .class-milestones p {
  margin: 0;
  color: #cbb69a;
  font-size: .83rem;
  line-height: 1.75;
}
.class-guide-page.cg-redesign .class-guide-section > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.class-guide-page.cg-redesign .class-guide-section > ul > li {
  padding: 17px 19px;
  border: 1px solid #61492e;
  border-radius: 4px;
  background: #1f170f;
  color: #d6c2a8;
  font-size: .86rem;
  line-height: 1.8;
}
.class-guide-page.cg-redesign .class-guide-section > ul > li :is(h3, strong) { color: #eed5aa; }
.class-guide-page.cg-redesign .class-guide-section > ul > li h3 {
  margin: 0 0 8px;
  font: 400 1.15rem/1.4 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .class-guide-section > ul > li p { margin: 0; }

.class-guide-page.cg-redesign .cg-ability-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(135px, 200px) auto;
  align-items: end;
  gap: 12px 16px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #6a5030;
  border-radius: 5px;
  background: #251b11;
}
.class-guide-page.cg-redesign .cg-ability-tools label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #dbc198;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
}
.class-guide-page.cg-redesign .cg-ability-tools :is(input, select) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 43px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #866339;
  border-radius: 4px;
  background: #130f0b;
  color: #f0dfc5;
  font: 400 .85rem/1.4 Inter, "Segoe UI", Arial, sans-serif;
  color-scheme: dark;
}
.class-guide-page.cg-redesign .cg-ability-tools input::placeholder { color: #aa967b; opacity: 1; }
.class-guide-page.cg-redesign .cg-ability-tools output {
  display: block;
  align-self: end;
  margin: 0;
  padding: 12px 0;
  color: #c7b08d;
  font-size: .75rem;
  line-height: 1.5;
  text-align: right;
}
.class-guide-page.cg-redesign .trainer-name-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  color: #c5b094;
  background: #21180f;
  font-size: .78rem;
  line-height: 1.7;
}
.class-guide-page.cg-redesign .trainer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.class-guide-page.cg-redesign .trainer-group {
  min-width: 0;
  border: 1px solid #705232;
  border-radius: 5px;
  background: #1e160f;
  box-shadow: none;
}
.class-guide-page.cg-redesign .trainer-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 15px 17px;
  border-bottom: 1px solid #735532;
  border-radius: 4px 4px 0 0;
  color: #efd7ae;
  background: linear-gradient(105deg, #352618, #271c12);
  font: 400 1.25rem/1.3 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .trainer-group h3 > span {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-color: #8b693c;
  color: #dec18e;
  font: 700 .65rem/1 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .trainer-table-wrap { width: 100%; overflow: visible; }
.class-guide-page.cg-redesign .trainer-group table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.class-guide-page.cg-redesign .trainer-group :is(th, td) {
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid #56402a;
  vertical-align: top;
  overflow-wrap: break-word;
}
.class-guide-page.cg-redesign .trainer-group thead th {
  color: #c5ad8a;
  background: #17110b;
  font: 700 .61rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .065em;
}
.class-guide-page.cg-redesign .trainer-group thead th:first-child { width: 59px; }
.class-guide-page.cg-redesign .trainer-group thead th:last-child { width: 29%; }
.class-guide-page.cg-redesign .trainer-group tbody td:first-child {
  width: 59px;
  color: #eec079;
  font-size: .79rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}
.class-guide-page.cg-redesign .trainer-group tbody th {
  color: #f0dfc5;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.55;
}
.class-guide-page.cg-redesign .trainer-group tbody td:last-child {
  width: auto;
  color: #c1ab8d;
  font-size: .73rem;
  line-height: 1.6;
}
.class-guide-page.cg-redesign .trainer-group tbody tr:nth-child(even) { background: #b58b4610; }
.class-guide-page.cg-redesign .trainer-group tbody tr:hover { background: #372819; }
.class-guide-page.cg-redesign .trainer-group tbody tr:last-child > * { border-bottom: 0; }
.class-guide-page.cg-redesign .cg-ability-detail {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.class-guide-page.cg-redesign .cg-ability-detail > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin: -3px;
  padding: 3px;
  border-radius: 3px;
  color: #f0dfc5;
  font: inherit;
  line-height: 1.55;
  list-style: none;
  cursor: pointer;
}
.class-guide-page.cg-redesign .cg-ability-detail > summary::-webkit-details-marker { display: none; }
.class-guide-page.cg-redesign .cg-ability-detail > summary::marker { content: ""; }
.class-guide-page.cg-redesign .cg-ability-detail > summary:is(:hover, :focus-visible) { color: #ffe0a3; background: #ad81421c; }
.class-guide-page.cg-redesign .cg-ability-chevron {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-top: 2px;
  border: 1px solid #8d6e42;
  border-radius: 3px;
  color: #e6bf7c;
  font: 600 .87rem/1 Inter, "Segoe UI", Arial, sans-serif;
  transition: transform .15s ease, background .15s ease;
}
.class-guide-page.cg-redesign .cg-ability-detail[open] > summary { color: #f3d39b; }
.class-guide-page.cg-redesign .cg-ability-detail[open] .cg-ability-chevron { transform: rotate(45deg); background: #594024; }
.class-guide-page.cg-redesign .cg-ability-description {
  margin: 10px 0 2px;
  padding: 9px 0 0;
  border-top: 1px solid #7e5e354d;
  color: #cbb99e;
  font: 400 .76rem/1.75 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .trainer-group .ability-help { gap: 7px; line-height: 1.55; }
.class-guide-page.cg-redesign .trainer-group .ability-help-icon { border-color: #9e7d4a; color: #efd095; }
.class-guide-page.cg-redesign .trainer-group .ability-tooltip {
  max-width: min(310px, calc(100vw - 40px));
  border-color: #b58a4b;
  border-radius: 4px;
  background: #15110c;
  color: #f0dfc5;
  font-size: .8rem;
  line-height: 1.65;
  box-shadow: 0 10px 25px #000b;
}
.class-guide-page.cg-redesign .trainer-progression > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 18px;
}
.class-guide-page.cg-redesign .trainer-progression > footer a { color: #e4bc76; }
.class-guide-page.cg-redesign :is(.cg-ability-empty, .cg-empty) {
  padding: 19px;
  border: 1px solid #705232;
  border-radius: 5px;
  background: #21180f;
  color: #d8c3a4;
  font-size: .9rem;
}

.class-guide-page.cg-redesign .class-guide-play {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
  gap: 28px;
}
.class-guide-page.cg-redesign .class-guide-play ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.class-guide-page.cg-redesign .class-guide-play li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  margin: 0;
  padding: 15px 0;
  border-top: 1px solid #5d462b;
}
.class-guide-page.cg-redesign .class-guide-play li > span {
  width: 30px;
  height: 30px;
  border: 1px solid #94703d;
  border-radius: 50%;
  color: #edc581;
  font: 700 .69rem/1 Inter, "Segoe UI", Arial, sans-serif;
}
.class-guide-page.cg-redesign .class-guide-play li p {
  margin: 2px 0 0;
  color: #dfcbb0;
  font-size: .89rem;
  line-height: 1.75;
}
.class-guide-page.cg-redesign .class-guide-play > aside {
  padding: 22px;
  border: 1px solid #765634;
  border-radius: 5px;
  background: #23190f;
}
.class-guide-page.cg-redesign .class-guide-play > aside > h3 {
  margin: 0 0 17px;
  font: 400 1.35rem/1.3 Georgia, "Times New Roman", serif;
}
.class-guide-page.cg-redesign .class-guide-play .availability-group {
  display: block;
  margin: 15px 0 0;
}
.class-guide-page.cg-redesign .class-guide-play .availability-group h3 {
  margin: 0 0 8px;
  font: 700 .65rem/1.5 Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: .08em;
}
.class-guide-page.cg-redesign .class-guide-play .availability-group > div { gap: 6px; }
.class-guide-page.cg-redesign .class-guide-play .race-chip {
  min-height: 31px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: .77rem;
  line-height: 1.4;
}
.class-guide-page.cg-redesign .page-source-footer {
  margin: 25px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cg-muted);
  font-size: .76rem;
  line-height: 1.7;
}
.class-guide-page.cg-redesign .page-source-footer details {
  margin: 0;
  padding: 15px 18px;
  border: 1px solid #5f482d;
  border-radius: 4px;
  background: #1a140e;
}
.class-guide-page.cg-redesign .page-source-footer summary { cursor: pointer; color: #d7b579; }
.class-guide-page.cg-redesign .page-source-footer a {
  color: #e4c490;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #856337;
}
.class-guide-page.cg-redesign .page-source-footer p { margin: 10px 0 0; }
.class-guide-page.cg-redesign .class-guide-status {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 24px;
  margin-top: 30px;
  padding: 22px;
  border: 1px solid #6f5130;
  border-radius: 5px;
  background: #22180f;
}
.class-guide-page.cg-redesign .class-guide-status p { color: #cbb89c; font-size: .85rem; line-height: 1.8; }
.class-guide-page.cg-redesign .class-guide-status > div:last-child { padding-left: 20px; }

@media (max-width: 1120px) {
  .class-guide-page.cg-redesign .class-guide-switcher > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .class-guide-page.cg-redesign .class-guide-switcher a { justify-content: flex-start; }
  .class-guide-page.cg-redesign .class-guide-copy { padding: 29px; }
  .class-guide-page.cg-redesign .class-guide-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .class-guide-page.cg-redesign .class-guide-facts article { padding: 14px 16px; }
  .class-guide-page.cg-redesign .build-card { padding: 16px; }
  .class-guide-page.cg-redesign .cg-date { flex: 1 0 100%; margin-left: 0; }
}
@media (max-width: 900px) {
  .class-guide-page.cg-redesign .class-guide-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 350px; }
  .class-guide-page.cg-redesign .class-guide-copy { padding: 26px; }
  .class-guide-page.cg-redesign .class-guide-actions { gap: 8px; }
  .class-guide-page.cg-redesign .class-guide-actions .button { padding-inline: 12px; font-size: .73rem; }
  .class-guide-page.cg-redesign .class-guide-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-guide-page.cg-redesign .class-guide-facts article:nth-child(2) { border-right: 0; }
  .class-guide-page.cg-redesign .class-guide-facts article:nth-child(-n+2) { border-bottom: 1px solid #624a2f; }
  .class-guide-page.cg-redesign .class-guide-story { grid-template-columns: 1fr; gap: 18px; }
  .class-guide-page.cg-redesign .class-guide-play { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; }
  .class-guide-page.cg-redesign .trainer-groups { grid-template-columns: 1fr; }
  .class-guide-page.cg-redesign .trainer-group thead th:last-child { width: 26%; }
  .class-guide-page.cg-redesign .cg-ability-tools { grid-template-columns: minmax(0, 1fr) minmax(125px, 180px); }
  .class-guide-page.cg-redesign .cg-ability-tools output { grid-column: 1 / -1; padding: 0; text-align: left; }
}
@media (max-width: 700px) {
  .class-guide-page.cg-redesign { padding: 18px 0 48px; }
  .class-guide-page.cg-redesign > .wrap { width: calc(100% - 32px); }
  .class-guide-page.cg-redesign .class-guide-switcher > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .class-guide-page.cg-redesign .class-guide-switcher a { padding: 7px; gap: 6px; font-size: .72rem; }
  .class-guide-page.cg-redesign .cg-nav-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .class-guide-page.cg-redesign .class-guide-hero { grid-template-columns: 1fr; min-height: 0; }
  .class-guide-page.cg-redesign .class-guide-hero figure { order: -1; min-height: 0; height: clamp(165px, 39vw, 245px); }
  .class-guide-page.cg-redesign .class-guide-hero figure img { object-position: center 36%; }
  .class-guide-page.cg-redesign .class-guide-hero figure::after { background: linear-gradient(0deg, #23180f, #23180f24 38%, transparent 70%); }
  .class-guide-page.cg-redesign .class-guide-copy { padding: 0 22px 25px; margin-top: -5px; }
  .class-guide-page.cg-redesign .class-guide-copy h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
  .class-guide-page.cg-redesign .cg-title { gap: 12px; margin-block: 7px 12px; }
  .class-guide-page.cg-redesign .cg-title > img { width: 43px; height: 43px; flex-basis: 43px; }
  .class-guide-page.cg-redesign .cg-tagline { margin-bottom: 12px; font-size: 1.13rem; }
  .class-guide-page.cg-redesign .class-guide-copy .lead { font-size: .88rem; line-height: 1.75; }
  .class-guide-page.cg-redesign .class-guide-actions .button { flex: 1 1 130px; }
  .class-guide-page.cg-redesign .class-guide-facts article { padding: 13px 15px; border-bottom: 0 !important; }
  .class-guide-page.cg-redesign .class-guide-facts article:nth-child(-n+2) { border-bottom: 1px solid #624a2f !important; }
  .class-guide-page.cg-redesign .class-guide-facts strong { font-size: .78rem; }
  .class-guide-page.cg-redesign .cg-jump { gap: 6px; margin-top: 15px; padding-bottom: 17px; }
  .class-guide-page.cg-redesign .cg-jump a { flex: 1 1 auto; padding: 8px 10px; font-size: .74rem; }
  .class-guide-page.cg-redesign .cg-date { margin-top: 3px; }
  .class-guide-page.cg-redesign :is(.class-guide-builds, .class-guide-section) { padding-block: 28px; }
  .class-guide-page.cg-redesign :is(.class-guide-builds, .class-guide-section, .class-guide-status) h2 { font-size: 1.55rem; line-height: 1.3; }
  .class-guide-page.cg-redesign .build-card-grid { grid-template-columns: 1fr; gap: 11px; }
  .class-guide-page.cg-redesign .build-card { padding: 18px; }
  .class-guide-page.cg-redesign .build-card h3 { margin-top: 11px; font-size: 1.22rem; }
  .class-guide-page.cg-redesign .build-card > p { font-size: .85rem; }
  .class-guide-page.cg-redesign .build-card .card-link { font-size: .8rem; }
  .class-guide-page.cg-redesign .class-milestones { grid-template-columns: 1fr; gap: 10px; }
  .class-guide-page.cg-redesign .class-milestones article { padding: 18px; }
  .class-guide-page.cg-redesign .class-milestones h3 { margin-top: 12px; }
  .class-guide-page.cg-redesign .class-guide-section > ul { grid-template-columns: 1fr; }
  .class-guide-page.cg-redesign .class-guide-play { grid-template-columns: 1fr; gap: 23px; }
  .class-guide-page.cg-redesign .class-guide-play > aside { padding: 20px; }
  .class-guide-page.cg-redesign .class-guide-status { grid-template-columns: 1fr; padding: 19px; }
  .class-guide-page.cg-redesign .class-guide-status > div:last-child { padding: 17px 0 0; border-left: 0; border-top: 1px solid #5c3e24; }
}
@media (max-width: 460px) {
  .class-guide-page.cg-redesign > .wrap { width: calc(100% - 24px); }
  .class-guide-page.cg-redesign .breadcrumbs { font-size: .7rem; }
  .class-guide-page.cg-redesign .class-guide-switcher a { font-size: .67rem; padding-inline: 6px; }
  .class-guide-page.cg-redesign .cg-nav-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .class-guide-page.cg-redesign .class-guide-copy { padding-inline: 18px; }
  .class-guide-page.cg-redesign .class-guide-actions .button { min-height: 44px; padding-inline: 10px; }
  .class-guide-page.cg-redesign .class-guide-facts article { padding: 12px; }
  .class-guide-page.cg-redesign .class-guide-facts span { font-size: .59rem; }
  .class-guide-page.cg-redesign .class-guide-facts strong { font-size: .76rem; }
  .class-guide-page.cg-redesign .cg-section-title { gap: 5px 10px; }
  .class-guide-page.cg-redesign .cg-ability-tools { grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 13px; }
  .class-guide-page.cg-redesign .cg-ability-tools :is(input, select) { font-size: 16px; }
  .class-guide-page.cg-redesign .trainer-group h3 { padding: 14px 12px; font-size: 1.15rem; }
  .class-guide-page.cg-redesign .trainer-group :is(th, td) { padding: 9px 8px; }
  .class-guide-page.cg-redesign .trainer-group thead th { font-size: .56rem; letter-spacing: .025em; }
  .class-guide-page.cg-redesign .trainer-group thead th:first-child { width: 42px; }
  .class-guide-page.cg-redesign .trainer-group thead th:last-child { width: 27%; }
  .class-guide-page.cg-redesign .trainer-group tbody th { font-size: .77rem; }
  .class-guide-page.cg-redesign .trainer-group tbody td:first-child { width: 42px; font-size: .74rem; }
  .class-guide-page.cg-redesign .trainer-group tbody td:last-child { font-size: .68rem; }
  .class-guide-page.cg-redesign .trainer-group .ability-help { gap: 5px; }
  .class-guide-page.cg-redesign .trainer-group .ability-help-icon { width: 14px; height: 14px; flex-basis: 14px; }
  .class-guide-page.cg-redesign .class-guide-story > p { font-size: .9rem; }
  .class-guide-page.cg-redesign .class-guide-story aside { padding: 16px; }
}
@media (max-width: 600px) {
  .class-guide-page.cg-redesign .cg-ability-detail > summary { min-height: 38px; align-items: center; }
  .class-guide-page.cg-redesign .cg-ability-chevron { margin-top: 0; }
  .class-guide-page.cg-redesign .trainer-group .ability-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto !important;
    bottom: 16px !important;
    z-index: 900;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 32px);
    overflow: auto;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .class-guide-page.cg-redesign *,
  .class-guide-page.cg-redesign *::before,
  .class-guide-page.cg-redesign *::after { transition: none !important; scroll-behavior: auto !important; }
}