/* Hallmark · v2.0.0 · theme: custom · shape: review gallery · hero: title band with jump links · nav: in-page jump list · footer: one-line mast · signature: same-screen strips across all concepts */
/* Hallmark · pre-emit critique: P3 H4 E4 S3 R4 V3 · weakest: S and P, a working review tool, kept plain on purpose so the concepts carry the design */
/* Hallmark · waive 23 · the review table uses the brand blue for ratings · ratings also carry words, never colour alone */

.g-head { background: var(--c-blue-ink); color: var(--c-on-blue); padding-block: var(--s-7) var(--s-5); }
.g-head h1 { color: var(--c-on-blue); max-width: 22ch; }
.g-jump ul { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.g-jump li { margin: 0; }
.g-jump a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); border: 1.5px solid var(--c-on-blue-muted); border-radius: var(--r-pill); color: var(--c-on-blue); text-decoration: none; font-weight: 700; }
.g-jump a:hover { background: var(--c-on-blue-wash); }

.g-tasks__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.g-grid { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
.g-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-6); background: var(--c-paper); border: 1px solid var(--c-rule); border-radius: var(--r-md); padding: var(--s-5); scroll-margin-top: var(--s-4); }
.g-card__shot img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--c-rule); }
.g-card__shot:hover img { border-color: var(--c-blue); }
.g-card h3 { font-size: var(--t-2xl); display: flex; align-items: baseline; gap: var(--s-3); }
.g-id { font-family: var(--f-display); color: var(--c-on-blue); background: var(--c-blue); border-radius: var(--r-sm); padding: 0.1em 0.35em; font-size: 0.7em; }
.g-premise { font-size: var(--t-lg); }
.g-facts { margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); }
.g-facts dt { font-weight: 700; color: var(--c-blue-deep); }
.g-facts dd { margin: 0; }
.g-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.g-pages-label { margin: 0; font-weight: 700; font-size: var(--t-sm); }
.g-pages { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.g-pages li { margin: 0; }
.g-pages a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.g-more summary { cursor: pointer; font-weight: 700; color: var(--c-blue); min-height: var(--tap); display: flex; align-items: center; }
.g-more__body { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s-4); align-items: start; margin-top: var(--s-2); }
.g-more__body img { border: 1px solid var(--c-rule); border-radius: var(--r-sm); }

.g-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0; }
.g-tabs [role="tab"] { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-4); border: 2px solid var(--c-blue); border-radius: var(--r-sm); text-decoration: none; font-weight: 700; color: var(--c-blue); }
.g-tabs [role="tab"][aria-selected="true"] { background: var(--c-blue); color: var(--c-on-blue); }
.strip { margin-bottom: var(--s-6); }
.tabs-ready ~ .strip .strip__title { display: none; }
.strip__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.strip--phone .strip__row { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 60rem; }
.strip img { border: 1px solid var(--c-rule); border-radius: var(--r-sm); width: 100%; }
.strip figcaption { font-weight: 700; color: var(--c-ink); }

.g-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)) auto; gap: var(--s-3); align-items: end; }
.g-compare .field { margin: 0; }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--c-rule); border-radius: var(--r-sm); }
.g-table { border-collapse: collapse; width: 100%; min-width: 60rem; font-size: var(--t-sm); }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--c-rule); }
.g-table thead th { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.g-table tbody th { width: 16rem; font-weight: 700; }
.rate { display: block; }
.rate--strong { color: var(--c-success); }
.rate--adequate { color: var(--c-blue-deep); }
.rate--weak { color: var(--c-error); }
.g-small { font-size: var(--t-sm); color: var(--c-muted); margin-top: var(--s-3); }
.g-top { padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); counter-reset: top; }
.g-top li { margin: 0; background: var(--c-paper); border: 1px solid var(--c-rule); border-top: 4px solid var(--c-blue); border-radius: var(--r-sm); padding: var(--s-4); counter-increment: top; }
.g-top h3::before { content: counter(top) ". "; color: var(--c-blue); }
.g-examples li { font-family: var(--f-display); font-size: var(--t-lg); color: var(--c-blue-ink); }
.narrow { max-width: 46rem; }

/* compare page */
.cmp { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.cmp__bar { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; padding: var(--s-2) var(--gutter); border-bottom: 1px solid var(--c-rule); }
.cmp__form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cmp__form label { font-weight: 700; font-size: var(--t-sm); }
.cmp__form .select { width: auto; }
.cmp__panes { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2); min-height: 0; background: var(--c-paper-2); }
.cmp__pane { display: flex; flex-direction: column; min-height: 0; }
.cmp__label { margin: 0 0 var(--s-1); font-weight: 700; }
.cmp__label a { display: inline-flex; min-height: 44px; align-items: center; }
.cmp__frame { flex: 1; position: relative; overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-rule); display: flex; justify-content: center; }
.cmp__frame iframe { border: 0; transform-origin: top center; position: absolute; top: 0; }

@media (max-width: 64rem) {
  .g-card, .g-tasks__grid { grid-template-columns: minmax(0, 1fr); }
  .g-top { grid-template-columns: minmax(0, 1fr); }
  .strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip--phone .strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .g-compare { grid-template-columns: minmax(0, 1fr); }
  .g-card { padding: var(--s-4); }
  .g-more__body { grid-template-columns: minmax(0, 1fr); }
  .g-more__body img { max-width: 14rem; }
  .strip--phone .strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp__panes { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
}