/* Grading criteria page: grade ladder, spec rows, compare matrix */
.page-hero .hero-sub { max-width: 820px; }

/* ---------- grade ladder ---------- */
.ladder-sec { padding-bottom: clamp(40px, 5vw, 64px); }
.ladder-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.ladder-hint { color: var(--muted); font-size: 15px; }
.ladder-body { display: grid; grid-template-columns: 5fr 2fr; gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
.ladder-group { display: grid; grid-template-rows: auto 1fr; }
.ladder-body > * { min-width: 0; }
.rungs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.ladder-group--cold .rungs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rung a { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; height: 100%; padding: 16px 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--navy); overflow: hidden; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.rung a:hover, .rung a:focus-visible { border-color: var(--blue); transform: translateY(-4px); box-shadow: 0 20px 38px -26px rgba(11,37,50,.65); }
.rung-n { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--blue-deep); }
.rung-ico svg { width: 40px; height: 40px; color: var(--blue-deep); transition: transform .4s var(--ease); }
.rung a:hover .rung-ico svg { transform: scale(1.08); }
.rung-name { font-family: var(--font-head); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; }
.rung-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: start; font-size: 13px; line-height: 1.35; color: var(--muted); }
.rung-facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-right: 7px; vertical-align: 2px; }
/* the step: a stair tread whose height falls from newest to most basic */
.rung-step { display: block; margin: 8px -16px 0; height: calc((5 - var(--i)) * 12px + 8px); background: var(--navy); transition: background .3s; }
.rung--dry:nth-child(2) .rung-step { background: var(--steel); }
.rung--dry:nth-child(3) .rung-step { background: var(--blue-deep); }
.rung--dry:nth-child(4) .rung-step { background: #3b88b3; }
.rung--dry:nth-child(5) .rung-step { background: var(--blue); }
.rung--cold .rung-step { height: 32px; background: var(--blue-soft); background-image: repeating-linear-gradient(135deg, rgba(79,163,209,.35) 0 2px, transparent 2px 9px); }
.rung a:hover .rung-step { background-color: var(--blue); }
.ladder-scale { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ladder-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--navy), var(--blue)); position: relative; }
.ladder-line::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--blue); border-right: 0; }
.ladder-scale--cold { justify-content: flex-start; color: var(--blue-deep); }
.ladder-scale--cold span::before { content: "\2744"; margin-right: 8px; }

/* ---------- switcher chips ---------- */
.switcher .switch { position: relative; padding: 10px 14px; font-size: 16px; gap: 8px; }
.switcher .switch svg { width: 16px; height: 16px; }
.switch .sw-n { font-weight: 700; font-size: 14px; color: var(--blue-deep); }
.switch.is-on .sw-n { color: var(--blue); }

/* ---------- grade rows ---------- */
.grade { scroll-margin-top: 140px; }
.grade-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.grade-grid > * { min-width: 0; }
.gpos { display: flex; gap: 4px; margin-top: 12px; }
.gpos i { width: 22px; height: 5px; border-radius: 3px; background: var(--line); }
.gpos i.cold:nth-child(6) { margin-left: 8px; }
.gpos i.on { background: var(--blue-deep); }
.section--paper .gpos i:not(.on) { background: #dde2e5; }
.grade-copy h2 { display: grid; gap: 10px; margin-top: 16px; color: var(--navy); }
.g-name { font-size: clamp(32px, 3.4vw, 46px); line-height: .98; }
.g-tag { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--blue-deep); }
.grade-intro { margin-top: 16px; color: var(--muted); }
.gspec { margin: 26px 0 0; border-top: 2px solid var(--navy); }
.gspec-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.section--paper .gspec-row { border-bottom-color: #dde2e5; }
.gspec dt { font-family: var(--font-head); font-weight: 600; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.gspec dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.gnote { margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: var(--blue-soft); border-left: 4px solid var(--blue); }
.gnote-label { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.gnote p + p { margin-top: 4px; font-size: 15px; color: var(--text); }
.grade-media { position: sticky; top: 150px; }
.grade-photo { margin: 0; border-radius: 12px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow); }
.grade-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.grade-combo { position: relative; padding: 0 0 28px 28px; }
.grade-inset { position: absolute; left: 0; bottom: 0; width: 42%; margin: 0; border: 5px solid var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(4,7,7,.55); background: var(--navy); }
.grade-inset img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.grade-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.grade-facts li { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: var(--white); }

/* ---------- compare matrix ---------- */
.gcompare table.data { min-width: 1180px; font-size: 14px; }
.gcompare table.data th, .gcompare table.data td { padding: 12px 14px; }
.gcompare thead th { white-space: normal; vertical-align: bottom; line-height: 1.1; }
.gcompare thead th a.link-inline { color: var(--white); text-decoration-color: rgba(255,255,255,.5); }
.gcompare thead th small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 11px; letter-spacing: .08em; color: var(--blue); }
.gcompare tbody th, .gcompare .gc-corner { position: sticky; left: 0; z-index: 1; min-width: 140px; }
.gcompare tbody th { background: var(--white); font-family: var(--font-head); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; box-shadow: 1px 0 0 var(--line); }
.gcompare tbody tr:nth-child(even) th { background: #f8fafb; }
.gcompare .gc-corner { background: var(--navy); }
.gcompare:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.grade-actions { margin-top: clamp(36px, 4vw, 52px); }

@media (max-width: 1100px) {
  .ladder-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .grade-grid { grid-template-columns: 1fr; }
  .grade-media { position: static; order: -1; }
}
@media (max-width: 760px) {
  .rungs, .ladder-group--cold .rungs { grid-template-columns: 1fr; gap: 8px; }
  .rung a { grid-template-columns: 30px 40px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
  .rung:hover a { transform: none; }
  .rung-n { grid-row: 1 / 3; }
  .rung-ico { grid-row: 1 / 3; }
  .rung-ico svg { width: 36px; height: 36px; }
  .rung-name { grid-column: 3; font-size: 20px; }
  .rung-facts { grid-column: 3; font-size: 12.5px; }
  .rung-step { grid-column: 4; grid-row: 1 / 3; margin: 0; height: 10px; width: calc((5 - var(--i)) * 10px + 8px); border-radius: 3px; }
  .rung--cold .rung-step { width: 18px; height: 18px; border-radius: 50%; }
  .gspec-row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .rung a, .rung-ico svg { transition: none; }
  .rung a:hover, .rung a:focus-visible { transform: none; }
}
.gcompare thead th a { display: inline-flex; align-items: flex-end; min-height: 44px; }