/* Shared site shell and aligned section headings. */
.site-header { background: #fff; border-bottom: 1px solid #dce5f2; }
.site-header .wrap { min-height: 72px; gap: 16px; }
.site-header .brand { gap: .65rem; font-weight: 760; letter-spacing: -.015em; }
.brand-lockup { display: grid; gap: .15rem; line-height: 1.15; }
.brand-tagline { color: #50647f; font-size: .7rem; font-weight: 580; letter-spacing: 0; }
.site-header .nav { align-items: center; gap: clamp(10px, 2vw, 30px); }
.site-header .nav a { display: inline-flex; align-items: center; min-height: 42px; color: #243852; font-size: .9rem; font-weight: 650; }
.btn {
  display: inline-flex;
  min-height: 44px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid #1f5fe0;
  border-radius: 8px;
  background: #1f5fe0;
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #1546b3; border-color: #1546b3; color: #fff; }
.btn:disabled { background: #47699e; border-color: #47699e; color: #fff; cursor: default; }
.btn svg { width: 1em; height: 1em; flex: none; }
.workspace-intro .btn, .mid-cta .btn { border-color: #b3ccff; }
.workspace-intro .btn:hover, .mid-cta .btn:hover { border-color: #fff; }
.sec-head, #features .sec-head { border-inline-start: 3px solid #1f5fe0; padding-inline-start: clamp(12px, 1.5vw, 21px); }
.final .final-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; text-align: left; }
.final .final-grid .cta-row { margin: 0; justify-content: flex-start; }
.final .final-grid h2 { letter-spacing: -.035em; }
.site-footer { background: #0b1f45; border-color: #0b1f45; color: #fff; }
.site-footer .foot-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 1.6rem 2rem; }
.site-footer .brand { color: #fff; }
.site-footer .foot-nav h2 { font-size: 1rem; color: #fff; }
.site-footer .foot-nav li { margin: .38rem 0; }
.site-footer .foot-nav a, .site-footer p, .site-footer .foot-bottom a { color: #d6e3f7; }
.site-footer .foot-nav a, .site-footer .foot-bottom a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer :focus-visible { outline-color: #a4c5ff; }
.site-footer .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; margin-top: 1.55rem; padding-top: .9rem; border-top: 1px solid #3b5378; }
.site-footer .foot-bottom nav { display: flex; gap: 1.15rem; }
.site-footer .legal { color: #b8c9e3; }
@media (max-width: 960px) {
  .final .final-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-header .wrap { min-height: 63px; gap: 7px; }
  .site-header .head-cta { gap: .38rem; }
  .site-header .head-cta > .btn { padding-inline: .55rem; white-space: nowrap; }
  .site-header .head-cta > .btn svg { display: none; }
  .site-footer .foot-grid { column-gap: .9rem; }
}
@media (max-width: 390px) {
  .brand-tagline { display: none; }
  .site-header .brand { gap: .35rem; font-size: .875rem; }
  .site-header .brand img { width: 26px; height: 26px; }
  .site-header .head-cta { gap: .25rem; }
  .site-header .head-cta > .btn { padding-inline: .35rem; }
}

/* Artwork uses the same files in article headers and cards. */
.post-card .pc-cover, .article-cover { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; }
.post-card .pc-cover { background: #eaf1ff; }
.article-cover { border: 1px solid #dce5f2; border-radius: 16px; box-shadow: 0 16px 36px -22px #0b1f4559; }
.art-hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.wf img { display: block; width: 100%; height: auto; aspect-ratio: 77 / 53; border: 1px solid #dce5f2; border-radius: 10px; }
.wf { min-width: 0; }
.wf-pair { align-items: start; }
.wf-arrow { align-self: center; }
.wf-reference { display: inline-block; margin-top: .5rem; font-size: .825rem; }
.voice { display: flex; flex-direction: column; }
.voice figcaption { align-items: center; }
.voice-link { align-self: flex-start; margin-top: auto; padding-top: .35rem; }
.voice-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.voice-note { margin-top: .5rem; }
.check-no { color: #9e2334; font-weight: 700; }
.rv-byline { display: flex; align-items: center; gap: .65rem; }
.mnav summary { width: 44px; height: 44px; border-radius: 8px; }
.shortcut-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  list-style: none;
  padding: 0;
  margin: .85rem 0;
}
.shortcut-list li { padding: .75rem; border: 1px solid #dce5f2; border-radius: 8px; background: #fff; }
.shortcut-task { display: flex; align-items: center; gap: .45rem; font-size: .92rem; }
.shortcut-task svg { width: 21px; height: 21px; flex: none; color: #1f5fe0; }
.shortcut-keys { display: grid; gap: .25rem; margin-top: .5rem; font-size: .74rem; }
.shortcut-keys > span { display: grid; grid-template-columns: 3.5rem auto; align-items: center; gap: .28rem; white-space: nowrap; }
.shortcut-keys kbd { justify-self: start; color: #1546b3; font-size: .78rem; }
.shared-keys li { background: #eaf1ff; border-color: #c8dafa; }
.reviews-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; }
.reviews-heading-stars { display: inline-flex; gap: .16rem; color: #a35d12; }
.reviews-heading-stars svg { width: 19px; height: 19px; }

.cmp-controls { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.cmp-controls .compare-context { max-width: 62ch; margin: 0; color: #40546e; font-size: .94rem; }
.cmp-filter { font-size: .8rem; font-weight: 700; min-width: min(100%, 240px); }
.cmp-filter select {
  display: block;
  width: 100%;
  margin-top: .25rem;
  min-height: 44px;
  padding: .35rem .65rem;
  border: 1px solid #bbcee9;
  border-radius: 8px;
  background: #fff;
  color: #0b1f45;
  font: inherit;
}
.cmp-scroll-note { margin: .65rem 0 .45rem; font-size: .78rem; color: #50647f; }
.cmp-scroll-note span { display: none; }
.cmp-module .cmp-wrap { max-height: min(74vh, 680px); overflow: auto; }
.cmp-module .cmp { min-width: 1030px; table-layout: fixed; }
.cmp-module.cmp-pair .cmp { min-width: 0; }
.cmp-module .cmp :is(th, td) { padding: .6rem .45rem; vertical-align: middle; }
.cmp-module .cmp [hidden] { display: none; }
.cmp-module .cmp thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f3f6fb;
  box-shadow: inset 0 -1px #c5d5ee;
}
.cmp-module .cmp :is(th, td):first-child { width: 185px; min-width: 0; }
.cmp-module .cmp thead th:first-child { z-index: 3; }
.cmp-module .cmp tbody th { font-weight: 650; }
.cmp-module .cmp tr > td[colspan] { position: static; width: auto; box-shadow: none; padding-inline: .65rem; }
.cmp-module .cmp .me { font-weight: 800; background: #e7efff; }
.cmp-module .cmp .me small, .cmp-module .cmp .me .cmp-answer { font-weight: 800; }
.cmp-module .cmp thead .me { background: #1546b3; color: #fff; border-radius: 0; box-shadow: none; }
.cmp-module .cmp thead .me small { color: #eaf1ff; }
.cmp-module .cmp .total .me { background: #d6e5ff; color: #0b1f45; }
.cmp-logo { display: block; margin: 0 auto .25rem; width: 24px; height: 24px; }
.cmp-module .cmp .price-row b, .cmp-module .cmp .price-row small { display: block; }
.cmp-answer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-width: 3.75em;
  padding: .15rem .4rem;
  border-radius: 6px;
  font-size: .81rem;
  font-weight: 700;
  white-space: nowrap;
}
.cmp-answer.yes { color: #126536; background: #e7f6ed; }
.cmp-answer.no { color: #9e2334; background: #fcecef; }
.cmp-pair .cmp :is(th, td):first-child { width: 40%; }

@media (max-width: 1100px) {
  .cmp-module:not(.cmp-pair) .cmp-scroll-note span { display: inline; }
}
@media (max-width: 860px) {
  .shortcut-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shortcut-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-controls { align-items: stretch; flex-direction: column; gap: .55rem; }
  .cmp-module .cmp { font-size: .8rem; }
  .cmp-module .cmp :is(th, td) { padding: .45rem .35rem; }
  .cmp-module.cmp-pair .cmp :is(th, td):first-child { width: 42%; }
  .cmp-module .cmp thead th { font-size: .78rem; overflow-wrap: anywhere; }
}
@media (max-width: 350px) {
  .shortcut-list { grid-template-columns: minmax(0, 1fr); }
  .shortcut-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .7rem; }
  .shortcut-keys { margin-top: 0; }
}
@media (max-width: 860px) {
  .art-hero-grid { grid-template-columns: minmax(0, 1fr); }
}