:root {
  --teal: #006d6b;
  --teal-dark: #005451;
  --teal-light: #e8f5f4;
  --ink: #15272b;
  --muted: #7a898c;
  --line: #e5ecec;
  --page: #f4f7fb;
  --white: #fff;
  --coral: #f0645c;
  --max: 1200px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55
}

a {
  color: inherit;
  text-decoration: none
}

a:hover {
  color: var(--teal)
}

button,
input {
  font: inherit
}

button {
  cursor: pointer
}

.site-header {
  height: 70px;
  background: #fff;
  border-bottom: 1px solid #edf0f2;
  position: sticky;
  top: 0;
  z-index: 20
}

.topbar {
  width: min(var(--max), calc(100% - 48px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 29px
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: none;
  white-space: nowrap
}

.brand strong {
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
  font-weight: 800
}

.brand span {
  font-size: 11px;
  color: #839094
}

.main-nav {
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  align-self: stretch;
  gap: 26px
}

.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  color: #324044
}

.main-nav a.active {
  color: var(--teal);
  font-weight: 700
}

.main-nav a.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal)
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 11px
}

.mini-search {
  width: 180px;
  height: 31px;
  border: 1px solid #e0e7e8;
  border-radius: 17px;
  padding-left: 11px;
  display: flex;
  align-items: center;
  background: #fff
}

.mini-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 11px
}

.mini-search button {
  width: 30px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #657477;
  font-size: 18px
}

.subscribe {
  height: 31px;
  border: 0;
  border-radius: 16px;
  padding: 0 15px;
  color: #fff;
  background: var(--teal);
  font-size: 12px;
  font-weight: 700
}

.menu-button {
  display: none;
  border: 0;
  background: #fff;
  color: var(--teal);
  font-size: 23px
}

.hero {
  height: 260px;
  overflow: hidden;
  background: linear-gradient(112deg, #f6f3ff 0%, #fbfcff 54%, #eef9f8 100%)
}

.hero-inner {
  width: min(var(--max), calc(100% - 48px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-left: 47px
}

.hero-copy>span {
  color: #6a6d9c;
  font-size: 12px;
  font-weight: 700
}

.hero h1 {
  margin: 7px 0 10px;
  color: #1b3965;
  font-size: 33px;
  line-height: 1.22;
  letter-spacing: 0
}

.hero-copy p {
  margin: 0;
  color: #70808b;
  font-size: 13px
}

.hero-button {
  display: inline-flex;
  margin-top: 18px;
  padding: 7px 15px;
  border-radius: 16px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700
}

.hero-visual {
  height: 100%;
  width: 460px;
  position: relative
}

.hero-grid {
  position: absolute;
  right: 44px;
  bottom: 24px;
  width: 172px;
  height: 172px;
  background-image: radial-gradient(#8cd2cc 1px, transparent 1px);
  background-size: 7px 7px;
  opacity: .47;
  border-radius: 50%
}

.hero-sheet {
  position: absolute;
  top: 27px;
  left: 132px;
  width: 144px;
  height: 200px;
  padding: 25px 17px;
  background: #fff;
  box-shadow: 0 13px 25px #87a7b433;
  transform: rotate(7deg);
  color: #39606a
}

.hero-sheet:before {
  content: "";
  position: absolute;
  left: -19px;
  top: 0;
  width: 12px;
  height: 100%;
  background: #d7eeee
}

.hero-sheet small {
  font-size: 8px;
  color: #e3745a
}

.hero-sheet strong {
  display: block;
  margin-top: 21px;
  font-size: 15px;
  line-height: 1.65
}

.hero-sheet i {
  position: absolute;
  right: 15px;
  bottom: 19px;
  width: 37px;
  height: 27px;
  border-radius: 50% 50% 40% 40%;
  background: #d8ece6
}

.hero-orbit {
  position: absolute;
  border: 1px solid #cbdde8;
  border-radius: 50%;
  opacity: .75
}

.orbit-one {
  width: 300px;
  height: 180px;
  right: -59px;
  top: 24px
}

.orbit-two {
  width: 244px;
  height: 160px;
  left: 21px;
  bottom: -61px
}

.layout {
  width: min(var(--max), calc(100% - 48px));
  margin: 27px auto 70px;
  display: grid;
  grid-template-columns: minmax(0, 850px) 300px;
  align-items: start;
  gap: 22px
}

.content-column {
  min-width: 0;
  background: #fff;
  border: 1px solid #e8eef0;
  border-radius: 4px;
  padding: 16px
}

.section-card,
.section-block {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 24px
}

.section-heading,
.block-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 16px
}

.section-heading h2,
.block-title h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2
}

.section-heading span,
.block-title span {
  font-size: 11px;
  color: #94a0a2
}

.block-title a {
  margin-left: auto;
  color: #7b898d;
  font-size: 11px
}

.post-link {
  display: block
}

.post-link:hover img {
  filter: brightness(1.07)
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.featured-small {
  min-width: 0
}

.fake-cover {
  position: relative;
  height: 142px;
  border-radius: 14px;
  padding: 18px 18px 20px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  transition: filter .22s ease
}

.fake-cover.post-link:hover {
  filter: brightness(1.09)
}

.fake-cover:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, #ffffff45 0%, transparent 60%);
  z-index: 0;
  pointer-events: none
}

.fake-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 105%, #ffffff22 0%, transparent 55%);
  z-index: 0;
  pointer-events: none
}

.fake-cover .cover-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 110%, #ffffff14 0%, transparent 50%);
  z-index: 0;
  pointer-events: none
}

.fake-cover .cover-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(225deg, #ffffff4a 0%, #ffffff4a 49%, transparent 50%);
  z-index: 1;
  pointer-events: none
}

.fake-cover h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 65%;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff
}

.fake-cover .cover-book {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 54px;
  height: 70px;
  z-index: 2;
  transform: rotate(-8deg);
  transform-origin: bottom right;
  pointer-events: none
}

.fake-cover .cover-book i {
  position: absolute;
  inset: 0;
  border-radius: 1px 4px 4px 1px;
  box-shadow: 0 5px 12px #00000022
}

.fake-cover .cover-book i:nth-child(1) {
  background: #d8dde5;
  transform: translateX(-8px) translateY(5px)
}

.fake-cover .cover-book i:nth-child(2) {
  background: #eaeef3;
  transform: translateX(-4px) translateY(2.5px)
}

.fake-cover .cover-book i:nth-child(3) {
  background: #fff
}

.fake-cover .cover-book i:nth-child(3):before {
  content: "";
  position: absolute;
  top: 9px;
  left: 6px;
  right: 6px;
  height: 6px;
  background: var(--coral);
  border-radius: 1px
}

.fake-cover .cover-book i:nth-child(3):after {
  content: "";
  position: absolute;
  top: 22px;
  left: 6px;
  right: 6px;
  bottom: 14px;
  background: repeating-linear-gradient(0deg, #dde2e8 0 1px, transparent 1px 5px)
}

.fake-cover b,
.fake-cover span {
  position: relative;
  z-index: 1;
  display: block
}

.fake-cover b {
  font-size: 10px;
  letter-spacing: .4px
}

.fake-cover span {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700
}

.cover-one {
  background: linear-gradient(135deg, #f06858, #fd9d5a)
}

.cover-two {
  background: linear-gradient(135deg, #1d6c9e, #4b93c8)
}

.cover-three {
  background: linear-gradient(135deg, #3c5cbd, #7459c8)
}

.featured-small h3 {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 3px
}

.headline-row small {
  margin: 0;
  color: #98a2a5;
  font-size: 9px
}

.featured-small p {
  margin: 12px 2px 0;
  color: #9ba4a7;
  font-size: 11px;
  line-height: 1.5
}

.headline-list {
  margin-top: 20px
}

.headline-row {
  display: grid;
  grid-template-columns: 261px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid #edf1f2;
  align-items: start
}

.headline-row img {
  width: 261px;
  height: 158px;
  object-fit: cover;
  border-radius: 10px
}

.category {
  display: inline-block;
  color: var(--coral);
  font-size: 10px;
  font-weight: 700
}

.category:before {
  content: "●";
  margin-right: 4px;
  font-size: 8px
}

.headline-row h3 {
  margin: 2px 0 5px;
  font-size: 14px;
  line-height: 1.4
}

.headline-row p {
  margin: 0 0 5px;
  color: #778589;
  font-size: 11px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.report-grid,
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px
}

.report-item h3,
.guide-tile h3 {
  font-size: 12px;
  line-height: 1.5;
  margin: 7px 0 3px
}

.report-item p,
.guide-tile p,
.guide-tile small {
  margin: 0;
  color: #8b989c;
  font-size: 10px;
  line-height: 1.5
}

.report-item p i {
  font-style: normal;
  color: var(--coral)
}

.report-cover {
  height: 122px;
  padding: 17px 12px;
  color: #fff;
  font-size: 10px;
  line-height: 1.45;
  position: relative;
  overflow: hidden
}

.report-cover:before {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -29px;
  width: 115px;
  height: 115px;
  border: 1px solid #ffffff66;
  border-radius: 50%
}

.report-cover b {
  position: relative;
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.4
}

.report-cover-one {
  background: linear-gradient(150deg, #f3f5f7, #e3f4f0);
  color: #12655f;
  border-left: 5px solid var(--teal)
}

.report-cover-two {
  background: linear-gradient(145deg, #071d33, #0e6392)
}

.report-cover-three {
  background: linear-gradient(145deg, #282f3d, #67899d)
}

.inline-promo {
  min-height: 65px;
  margin: -5px 0 24px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(95deg, #006d6b, #068c87);
  color: #fff
}

.inline-promo small {
  font-size: 9px;
  opacity: .65
}

.inline-promo strong {
  font-size: 15px
}

.inline-promo span {
  font-size: 11px;
  opacity: .82
}

.inline-promo a {
  margin-left: auto;
  padding: 6px 11px;
  color: #006d6b;
  background: #fff;
  border-radius: 2px;
  font-size: 11px
}

.guide-tile {
  min-width: 0
}

.guide-tile img {
  display: block;
  width: 100%;
  height: 111px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 8px
}

.guide-tile .category {
  font-size: 10px
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px
}

.term-grid a {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e8eeee;
  background: #fbfdfd
}

.term-grid b {
  color: var(--teal);
  font-size: 13px
}

.term-grid span {
  display: block;
  margin: 3px 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.term-grid small {
  color: #9aa5a8;
  font-size: 9px
}

.event-block {
  border-bottom: 0;
  margin-bottom: 0
}

.event-feature {
  position: relative;
  margin-bottom: 0
}

.event-slides {
  position: relative;
  height: 205px;
  overflow: hidden;
  border-radius: 10px
}

.event-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease;
  pointer-events: none
}

.event-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.event-slide .ef-img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0
}

.event-slide .ef-img img {
  width: 100%;
  height: 205px;
  object-fit: cover;
  border-radius: 10px;
  display: block
}

.event-slide .ef-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 4px
}

.event-slide .ef-body h3 {
  font-size: 17px;
  line-height: 1.45;
  margin: 6px 0
}

.event-slide .ef-body p {
  color: #748286;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 8px
}

.event-slide .ef-body small {
  color: #9aa5a8;
  font-size: 10px;
  margin-top: auto
}

.event-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px
}

.event-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #d6dcdf;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease
}

.event-dots .dot:hover {
  background: #9aa5a8
}

.event-dots .dot.is-active {
  background: var(--teal);
  transform: scale(1.25)
}

.sidebar {
  display: grid;
  gap: 14px
}

.side-ad {
  min-height: 198px;
  padding: 20px;
  background: linear-gradient(145deg, #edf8f8, #ffffff);
  border: 1px solid #dceced;
  position: relative;
  overflow: hidden
}

.side-ad:after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 135px;
  height: 135px;
  border: 18px solid #bde4e040;
  border-radius: 50%
}

.side-ad small {
  color: #a3afb1;
  font-size: 10px
}

.side-ad strong {
  position: relative;
  display: block;
  margin: 11px 0 7px;
  color: #235f69;
  font-size: 19px;
  line-height: 1.4
}

.side-ad p {
  position: relative;
  margin: 0;
  color: #718286;
  font-size: 11px;
  line-height: 1.6
}

.side-ad button {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  padding: 7px 16px;
  border: 0;
  border-radius: 2px;
  background: var(--teal);
  color: #fff;
  font-size: 11px
}

.side-module,
.side-rank,
.qr-box {
  padding: 15px;
  background: #fff;
  border: 1px solid #e7edef;
  border-radius: 3px
}

.side-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.side-title h2 {
  margin: 0;
  font-size: 14px
}

.side-title a {
  font-size: 10px;
  color: #849195
}

.hot-reading ol {
  padding: 0;
  margin: 0;
  list-style: none
}

.hot-reading li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 7px;
  padding: 9px 0;
  border-top: 1px solid #edf1f2
}

.hot-reading li:first-child {
  border: 0
}

.hot-reading b {
  color: var(--coral);
  font-size: 13px
}

.hot-reading li:nth-child(n+3) b {
  color: #f2a44f
}

.hot-reading a {
  font-size: 11px;
  line-height: 1.5
}

.side-rank {
  padding-bottom: 11px
}

.side-rank table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px
}

.side-rank th {
  text-align: left;
  background: #f7f9fa;
  color: #879499;
  font-weight: 400
}

.side-rank td,
.side-rank th {
  padding: 5px 4px;
  border-bottom: 1px solid #eef2f3
}

.side-rank td:last-child {
  color: var(--teal);
  font-weight: 700
}

.side-rank>small {
  display: block;
  margin-top: 8px;
  color: #9ca6a9;
  font-size: 9px
}

.subscription {
  background: linear-gradient(150deg, #f0faf9, #fff)
}

.subscription>span {
  color: var(--teal);
  font-size: 10px;
  font-weight: 700
}

.subscription h2 {
  margin: 5px 0;
  font-size: 18px;
  line-height: 1.35
}

.subscription p {
  margin: 0 0 11px;
  color: #849195;
  font-size: 11px
}

.subscription form {
  display: flex
}

.subscription input {
  min-width: 0;
  height: 30px;
  flex: 1;
  border: 1px solid #dce6e6;
  padding: 0 8px;
  font-size: 10px;
  outline: 0
}

.subscription button {
  height: 30px;
  border: 0;
  padding: 0 9px;
  color: #fff;
  background: var(--teal);
  font-size: 10px
}

.platform-box>a {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 7px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid #edf1f2
}

.platform-box b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: #162324;
  color: #fff;
  border-radius: 4px;
  font-size: 12px
}

.platform-box span {
  font-size: 11px;
  font-weight: 700
}

.platform-box small {
  display: block;
  color: #91a0a3;
  font-size: 9px;
  font-weight: 400
}

.tag-box>div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.tag-box a {
  padding: 3px 7px;
  background: #f5f8f8;
  color: #647478;
  font-size: 9px
}

.qr-box {
  display: flex;
  align-items: center;
  gap: 11px
}

.qr-pattern {
  width: 58px;
  height: 58px;
  background: repeating-linear-gradient(90deg, #172d31 0 5px, transparent 5px 9px), repeating-linear-gradient(#172d31 0 4px, transparent 4px 8px);
  opacity: .85
}

.qr-box strong {
  font-size: 11px
}

.qr-box p {
  margin: 2px 0;
  color: #96a2a4;
  font-size: 9px
}

.site-footer {
  background: #111a2a;
  color: #b8c1c8
}

.footer-banner {
  min-height: 90px;
  background: #006d6b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 18px 24px
}

.footer-banner strong {
  color: #fff;
  font-size: 17px
}

.footer-banner span {
  font-size: 12px
}

.footer-banner button {
  border: 0;
  border-radius: 2px;
  padding: 7px 16px;
  color: var(--teal);
  background: #fff;
  font-size: 11px
}

.footer-main {
  width: min(var(--max), calc(100% - 48px));
  margin: auto;
  padding: 30px 8px;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 28px
}

.footer-main strong {
  color: #fff;
  font-size: 18px
}

.footer-main p {
  max-width: 270px;
  color: #7f8c98;
  font-size: 10px;
  line-height: 1.7
}

.footer-main b {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 11px
}

.footer-main a {
  display: block;
  margin: 5px 0;
  color: #93a0aa;
  font-size: 10px
}

.copyright {
  width: min(var(--max), calc(100% - 48px));
  margin: auto;
  padding: 14px 8px;
  border-top: 1px solid #2c3543;
  color: #667380;
  font-size: 9px
}

.float-feedback {
  position: fixed;
  right: 22px;
  top: 56%;
  z-index: 10;
  border: 0;
  border-radius: 3px 0 0 3px;
  padding: 9px 7px;
  background: #ff766b;
  color: #fff;
  font-size: 10px;
  line-height: 1.7
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  transform: translateY(120px);
  padding: 11px 15px;
  color: #fff;
  background: #16282c;
  border-radius: 3px;
  font-size: 12px;
  transition: transform .22s
}

.toast.show {
  transform: translateY(0)
}

@media(max-width:1050px) {

  .topbar,
  .hero-inner,
  .layout,
  .footer-main,
  .copyright {
    width: min(100% - 32px, 850px)
  }

  .main-nav {
    gap: 15px
  }

  .main-nav a {
    font-size: 12px
  }

  .header-tools {
    display: none
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) 260px
  }

  .hero-visual {
    width: 380px
  }

  .hero-copy {
    padding-left: 20px
  }

  .content-column {
    padding: 13px
  }
}

@media(max-width:800px) {
  .site-header {
    height: 60px
  }

  .topbar {
    width: calc(100% - 28px);
    gap: 10px
  }

  .brand strong {
    font-size: 21px
  }

  .brand span {
    display: none
  }

  .main-nav {
    display: none
  }

  .main-nav.open {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 18px #132e3322
  }

  .main-nav.open a {
    height: 37px
  }

  .menu-button {
    display: block;
    margin-left: auto
  }

  .hero {
    height: 242px
  }

  .hero-inner {
    width: calc(100% - 28px)
  }

  .hero-copy {
    padding-left: 0
  }

  .hero h1 {
    font-size: 26px
  }

  .hero-copy p {
    max-width: 275px;
    font-size: 12px
  }

  .hero-visual {
    position: absolute;
    right: -120px;
    width: 310px;
    opacity: .65
  }

  .layout {
    width: calc(100% - 28px);
    display: block;
    margin-top: 15px
  }

  .sidebar {
    display: none
  }

  .content-column {
    padding: 12px
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .fake-cover {
    height: 118px;
    padding: 16px;
    border-radius: 14px
  }

  .fake-cover h3 {
    font-size: 15px;
    max-width: 70%
  }

  .fake-cover .cover-book {
    width: 48px;
    height: 62px;
    right: 16px;
    bottom: 16px
  }

  .featured-small h3 {
    font-size: 11px
  }

  .headline-row {
    grid-template-columns: 130px 1fr;
    gap: 13px;
    align-items: start
  }

  .headline-row img {
    width: 130px;
    height: 88px;
    border-radius: 6px
  }

  .headline-row h3 {
    font-size: 13px
  }

  .headline-row p {
    display: none
  }

  .report-grid,
  .guide-grid {
    gap: 8px
  }

  .report-cover {
    height: 100px;
    padding: 10px
  }

  .report-cover b {
    font-size: 12px
  }

  .event-feature {
    grid-template-columns: 1fr
  }

  .event-feature img {
    height: 170px
  }

  .event-slides {
    height: auto
  }

  .event-slide {
    position: relative;
    grid-template-columns: 1fr;
    gap: 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none
  }

  .event-slide.is-active {
    display: grid
  }

  .event-slide .ef-img img {
    height: 160px
  }

  .event-slide .ef-body h3 {
    font-size: 15px
  }

  .event-dots {
    margin-top: 12px
  }

  .term-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .inline-promo {
    display: block
  }

  .inline-promo span {
    display: none
  }

  .inline-promo a {
    float: right;
    margin-top: -22px
  }

  .footer-banner {
    display: block;
    text-align: center
  }

  .footer-banner span {
    display: block;
    margin: 6px 0
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 18px
  }

  .footer-main>div:first-child {
    grid-column: span 2
  }

  .float-feedback {
    right: 0
  }

  .section-heading span,
  .block-title span {
    display: none
  }
}

/* Larger editorial reading scale and sticky sidebar on desktop. */
@media (min-width:801px) {
  body {
    font-size: 16px;
  }

  .hero {
    height: 450px;
  }

  .hero-copy {
    padding-left: 0;
  }

  .brand strong {
    font-size: 27px;
  }

  .brand span {
    font-size: 12px;
  }

  .main-nav a {
    font-size: 14px;
  }

  .mini-search {
    width: 196px;
    height: 34px;
  }

  .mini-search input {
    font-size: 12px;
  }

  .subscribe {
    height: 34px;
    font-size: 13px;
  }

  .hero-copy>span {
    font-size: 13px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero-copy p {
    font-size: 15px;
  }

  .hero-button {
    padding: 8px 17px;
    font-size: 13px;
  }

  .section-heading h2,
  .block-title h2 {
    font-size: 21px;
  }

  .section-heading span,
  .block-title span,
  .block-title a {
    font-size: 12px;
  }

  .featured-small h3,
  .report-item h3,
  .guide-tile h3 {
    font-size: 14px;
  }

  .fake-cover h3 {
    font-size: 16px;
    max-width: 66%;
  }

  .featured-small p,
  .headline-row small,
  .report-item p,
  .guide-tile p,
  .guide-tile small {
    font-size: 11px;
  }

  .headline-row h3 {
    font-size: 17px;
  }

  .headline-row p {
    font-size: 13px;
  }

  .category {
    font-size: 11px;
  }

  .term-grid span {
    font-size: 13px;
  }

  .term-grid small {
    font-size: 10px;
  }

  .event-feature h3 {
    font-size: 17px;
  }

  .event-feature p {
    font-size: 13px;
  }

  .event-feature small {
    font-size: 11px;
  }

  .sidebar {
    position: sticky;
    top: 86px;
  }

  .side-title h2 {
    font-size: 17px;
  }

  .side-title a {
    font-size: 11px;
  }

  .hot-reading a {
    font-size: 13px;
  }

  .side-rank table {
    font-size: 12px;
  }

  .side-rank>small {
    font-size: 10px;
  }

  .side-ad strong {
    font-size: 22px;
  }

  .side-ad p,
  .subscription p {
    font-size: 12px;
  }

  .side-ad button,
  .subscription button {
    font-size: 12px;
  }

  .subscription>span {
    font-size: 11px;
  }

  .subscription h2 {
    font-size: 21px;
  }

  .platform-box span {
    font-size: 13px;
  }

  .platform-box small {
    font-size: 10px;
  }

  .tag-box a {
    font-size: 10px;
  }

  .qr-box strong {
    font-size: 13px;
  }

  .qr-box p {
    font-size: 10px;
  }
}

/* Portrait report covers give the download section a clearer publication rhythm. */
.hero-visual {
  display: none;
}

@media (min-width:801px) {
  .report-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .report-cover {
    width: min(76%, 190px);
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 20px 17px;
    border-radius: 12px;
    box-shadow: 0 10px 22px #16363d1f;
  }

  .report-cover:before {
    right: -32px;
    bottom: -34px;
    width: 130px;
    height: 130px;
  }

  .report-cover b {
    margin-top: 18px;
    font-size: 17px;
  }

  .report-item h3,
  .report-item p {
    width: 100%;
  }

  .report-item h3 {
    margin-top: 12px;
  }
}

@media (max-width:800px) {
  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .report-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 14px 12px;
    border-radius: 10px;
  }

  .report-cover b {
    margin-top: 14px;
    font-size: 14px;
  }
}

/* Full-bleed image-only report covers. */
@media (min-width:801px) {
  .report-item {
    align-items: stretch;
  }

  .report-cover {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 5;
    padding: 0;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 22px #16363d1f;
  }

  .report-cover-one {
    object-position: 58% center;
  }

  .report-cover-two {
    object-position: 73% center;
  }

  .report-cover-three {
    object-position: 90% center;
  }
}

/* Final footer CTA treatment: keep the action within the desktop content boundary. */
.footer-banner button {
  border-radius: 999px;
  background: #fff0b8;
  color: #715600;
  box-shadow: 0 5px 12px #002f2c2b;
}

.footer-banner button:hover {
  background: #ffe38b;
  color: #5e4700;
}

@media (min-width:801px) {
  .footer-banner {
    padding-right: max(44px, calc((100% - var(--max)) / 2 + 22px));
  }
}

/* Lift the editorial surfaces off the page without the hard outlined-card look. */
.content-column {
  border: 0;
  box-shadow: 0 10px 28px #16363d0d;
}

.side-ad,
.side-module,
.side-rank,
.qr-box {
  border: 0;
  box-shadow: 0 10px 26px #16363d12;
}

.sidebar>section {
  border-radius: 12px;
}

.side-ad:hover,
.side-module:hover,
.side-rank:hover,
.qr-box:hover {
  box-shadow: 0 14px 30px #16363d18;
}

/* Keep rank numerals legible while making the medal mark substantially quieter. */
.side-rank th:first-child,
.side-rank td:first-child {
  width: 36px;
}

.rank-medal {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 #ffffffa8, 0 1px 2px #172d3126;
  font-size: 11px;
}

.rank-medal:before {
  top: -6px;
  width: 10px;
  height: 7px;
}

/* Make report and guide headlines read as proper editorial titles. */
.report-item h3,
.guide-tile h3 {
  font-size: 17px;
  line-height: 1.45;
}

/* Keep the footer CTA comfortably inside the banner and give it a warmer accent. */
.footer-banner button {
  border-radius: 999px;
  background: #fff0b8;
  color: #715600;
  box-shadow: 0 5px 12px #002f2c2b;
}

.footer-banner button:hover {
  background: #ffe38b;
  color: #5e4700;
}

@media (min-width:801px) {
  .footer-banner {
    padding-right: max(44px, calc((100% - var(--max)) / 2 + 22px));
  }
}

/* Align the header controls to the content area's visual inner edges. */
@media (min-width:801px) {
  .topbar {
    padding-left: 16px;
    padding-right: 44px;
    gap: 22px;
  }

  .main-nav {
    gap: 22px;
  }
}

/* Taller image-backed platform recommendation strip. */
.inline-promo {
  min-height: 112px;
  padding: 22px 26px;
  border-radius: 8px;
  background-color: #006d6b;
  background-image: linear-gradient(90deg, #003f3de0 0%, #006d6b9c 55%, #006d6b24 100%), url("../promo-visibility-background-v2.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.inline-promo strong {
  font-size: 18px;
}

.inline-promo span {
  font-size: 12px;
}

.inline-promo a {
  padding: 8px 14px;
}

.side-ad strong {
  margin-top: 2px;
}

/* Keep every right-rail module visually consistent. */
.sidebar>section {
  border-radius: 10px;
  overflow: hidden;
}

/* Topic cards replace the former ranked list with a small knowledge wall. */
.term-grid {
  gap: 12px;
}

.term-grid .term-card {
  --term-accent: #006d6b;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 116px;
  padding: 15px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #dcebea;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fdfc, #edf8f6);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.term-grid .term-card:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12px;
  right: 12px;
  width: 50px;
  height: 50px;
  opacity: .16;
  background-image: linear-gradient(90deg, var(--term-accent) 1px, transparent 1px), linear-gradient(var(--term-accent) 1px, transparent 1px);
  background-size: 7px 7px;
  transform: skewY(-10deg);
}

.term-grid .term-card:hover {
  transform: translateY(-2px);
  border-color: var(--term-accent);
  box-shadow: 0 9px 18px #16363d17;
  color: var(--ink);
}

.term-symbol {
  display: block;
  width: 29px;
  height: 29px;
  margin-bottom: 12px;
  border: 1px solid var(--term-accent);
  border-radius: 6px;
  color: var(--term-accent);
  background-image: linear-gradient(90deg, transparent 0 31%, currentColor 31% 38%, transparent 38% 62%, currentColor 62% 69%, transparent 69%);
  opacity: .92;
}

.term-grid .term-card span {
  margin: 0;
  color: #17353a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
}

.term-grid .term-card small {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  color: #7b9293;
  font-size: 10px;
}

.term-grid .term-card:nth-child(2) {
  --term-accent: #2d7495;
  border-color: #d9eaf1;
  background: linear-gradient(135deg, #f8fcfd, #edf7fb);
}

.term-grid .term-card:nth-child(2) .term-symbol {
  border-radius: 50%;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, currentColor 5px 6px);
}

.term-grid .term-card:nth-child(3) {
  --term-accent: #5862a8;
  border-color: #e3e4f2;
  background: linear-gradient(135deg, #fbfbfe, #f0f1fa);
}

.term-grid .term-card:nth-child(3) .term-symbol {
  border-radius: 2px;
  transform: rotate(45deg) scale(.78);
}

.term-grid .term-card:nth-child(4) {
  --term-accent: #b36d48;
  border-color: #f0e5dd;
  background: linear-gradient(135deg, #fffdfb, #faf2ed);
}

.term-grid .term-card:nth-child(4) .term-symbol {
  border-width: 3px 1px 1px;
  border-radius: 6px 6px 2px 2px;
}

.term-grid .term-card:nth-child(5) {
  --term-accent: #a25e78;
  border-color: #f0e1e7;
  background: linear-gradient(135deg, #fffafb, #faeff3);
}

.term-grid .term-card:nth-child(5) .term-symbol {
  border-radius: 50% 6px 50% 6px;
}

.term-grid .term-card:nth-child(6) {
  --term-accent: #5f7d58;
  border-color: #e2ebdf;
  background: linear-gradient(135deg, #fbfdf9, #f1f7ef);
}

.term-grid .term-card:nth-child(6) .term-symbol {
  border-radius: 0;
  background-image: linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%);
}

/* Match the hero copy to the header logo and strengthen the display scale. */
@media (min-width:801px) {
  .hero-copy {
    padding-left: 16px;
  }

  .hero-copy>span {
    font-size: 14px;
  }

  .hero h1 {
    font-size: 46px;
    line-height: 1.16;
    margin: 9px 0 13px;
  }

  .hero-copy p {
    font-size: 17px;
  }

  .hero-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}

.hero-button:hover {
  color: #fff;
  background: var(--teal-dark);
}

/* Compact ranking table with medal treatment for the leading products. */
.side-rank table {
  table-layout: fixed;
}

.side-rank th:first-child,
.side-rank td:first-child {
  width: 46px;
  padding-left: 0;
  padding-right: 2px;
}

.side-rank th:nth-child(2),
.side-rank td:nth-child(2) {
  padding-left: 0;
  padding-right: 0;
}

.side-rank th:last-child,
.side-rank td:last-child {
  width: 54px;
  padding-right: 0;
  text-align: right;
}

.side-rank tbody td {
  height: 31px;
  vertical-align: middle;
}

.rank-medal,
.rank-number {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}

.rank-medal {
  position: relative;
  isolation: isolate;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid var(--medal-edge);
  border-radius: 50%;
  color: var(--medal-text);
  background: var(--medal-fill);
  box-shadow: inset 0 1px 0 #ffffffa8, 0 1px 2px #172d3126;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.rank-medal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -9px;
  left: 50%;
  width: 15px;
  height: 10px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #c91d27 0 41%, #f4f6f4 41% 58%, #0a4d92 58%);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

.rank-gold {
  --medal-fill: linear-gradient(145deg, #ffda4c, #f5af13);
  --medal-edge: #d9930b;
  --medal-text: #8a5800;
}

.rank-silver {
  --medal-fill: linear-gradient(145deg, #f7fafb, #bac7ce);
  --medal-edge: #93a4ae;
  --medal-text: #50636e;
}

.rank-bronze {
  --medal-fill: linear-gradient(145deg, #f2bc8c, #c87642);
  --medal-edge: #a95d33;
  --medal-text: #713615;
}

.rank-number {
  width: 20px;
  height: 20px;
  border: 1px solid #dbe5e5;
  border-radius: 7px;
  color: #5c7074;
  background: #f7fafa;
  font-size: 11px;
  font-weight: 700;
}

.side-rank tbody tr:nth-child(-n + 3) td:nth-child(2) {
  font-weight: 700;
}

/* Expanded newsletter module with a compact editorial signal treatment. */
.subscription {
  position: relative;
  z-index: 0;
  min-height: 220px;
  padding: 21px 16px 18px;
  isolation: isolate;
  border-color: #cfe5e4;
  border-radius: 12px;
  background: linear-gradient(135deg, #eaf8f6 0%, #f8fcfb 58%, #fff 100%);
}

.subscription:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 21px;
  right: 18px;
  width: 62px;
  height: 76px;
  border: 1px solid #006d6b3d;
  border-radius: 8px;
  background-image: linear-gradient(#ffffffb8 0 38%, transparent 38%), repeating-linear-gradient(0deg, #006d6b1d 0 1px, transparent 1px 7px);
  box-shadow: 8px 9px 0 #006d6b12;
  transform: rotate(7deg);
}

.subscription:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 34px;
  right: 7px;
  width: 92px;
  height: 86px;
  opacity: .42;
  background-image: linear-gradient(90deg, #006d6b26 1px, transparent 1px), linear-gradient(#006d6b26 1px, transparent 1px);
  background-size: 8px 8px;
  clip-path: polygon(30% 0, 100% 0, 100% 72%, 70% 100%, 0 100%, 0 29%);
}

.subscription>span,
.subscription h2,
.subscription p,
.subscription form {
  position: relative;
  z-index: 1;
}

.subscription>span {
  display: block;
  font-size: 12px;
}

.subscription h2 {
  max-width: 198px;
  margin: 8px 0 7px;
  font-size: 22px;
  line-height: 1.3;
}

.subscription p {
  max-width: 195px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.subscription form {
  height: 44px;
  margin-top: 17px;
}

.subscription input {
  height: 44px;
  padding: 0 11px;
  border: 1px solid #c8dedc;
  border-right: 0;
  border-radius: 7px 0 0 7px;
  background: #fff;
  font-size: 12px;
}

.subscription button {
  min-width: 88px;
  height: 44px;
  padding: 0 12px;
  border-radius: 0 7px 7px 0;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.subscription button:hover {
  background: var(--teal-dark);
}

/* Quiet category colors make the tag cluster easier to scan. */
.tag-box a {
  border-radius: 5px;
  border: 1px solid transparent;
  font-weight: 600;
}

.tag-box a:nth-child(5n + 1) {
  color: #006d6b;
  background: #e5f4f2;
  border-color: #cce8e4;
}

.tag-box a:nth-child(5n + 2) {
  color: #2b6f98;
  background: #eaf4fa;
  border-color: #d4e8f3;
}

.tag-box a:nth-child(5n + 3) {
  color: #735f9c;
  background: #f1eef9;
  border-color: #e1daf2;
}

.tag-box a:nth-child(5n + 4) {
  color: #ad6840;
  background: #fdf0e7;
  border-color: #f4dfcf;
}

.tag-box a:nth-child(5n) {
  color: #5c7d57;
  background: #edf5e9;
  border-color: #dcebd6;
}

.tag-box a:hover {
  filter: brightness(.96);
  color: inherit;
}

/* Real, scannable QR treatment for the follow module. */
.qr-box {
  min-height: 124px;
  padding: 16px;
  gap: 14px;
  border-radius: 10px;
}

.qr-image {
  display: block;
  flex: none;
  width: 92px;
  height: 92px;
  padding: 4px;
  border: 1px solid #d8e4e4;
  border-radius: 7px;
  background: #fff;
  image-rendering: pixelated;
}

.qr-box strong {
  font-size: 16px;
  line-height: 1.4;
}

.qr-box p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
}

/* Give report covers and guide cards more breathing room. */
@media (min-width:801px) {
  .report-grid {
    gap: 24px;
  }

  .guide-grid {
    gap: 20px;
  }

  .guide-tile img {
    height: 150px;
    border-radius: 10px;
    margin-bottom: 4px;
  }

  .guide-tile h3 {
    font-size: 17px;
    line-height: 1.45;
    margin: 8px 0 5px;
  }

  .guide-tile p {
    font-size: 11px;
    line-height: 1.6;
  }
}

/* Larger footer type creates a usable information hierarchy. */
@media (min-width:801px) {
  .footer-banner {
    min-height: 112px;
    gap: 28px;
    padding: 22px 24px;
  }

  .footer-banner strong {
    font-size: 20px;
  }

  .footer-banner span {
    font-size: 14px;
  }

  .footer-banner button {
    padding: 9px 18px;
    font-size: 13px;
  }

  .footer-main {
    padding: 38px 8px 34px;
    gap: 42px;
  }

  .footer-main strong {
    font-size: 22px;
  }

  .footer-main p {
    max-width: 310px;
    font-size: 13px;
    line-height: 1.8;
  }

  .footer-main b {
    margin-bottom: 13px;
    font-size: 14px;
  }

  .footer-main a {
    margin: 8px 0;
    font-size: 13px;
  }

  .copyright {
    padding: 18px 8px 20px;
    font-size: 12px;
  }
}

/* Editorial newsletter banner with a clear left-aligned information stack. */
.footer-banner {
  min-height: 164px;
  justify-content: space-between;
  padding: 28px max(24px, calc((100% - var(--max)) / 2));
  background-color: #006d6b;
  background-image: linear-gradient(90deg, #003f3de6 0%, #006d6b9c 53%, #006d6b1a 100%), url("../footer-newsletter-background-v2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-banner-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-banner strong {
  font-size: 24px;
  line-height: 1.25;
}

.footer-banner span {
  max-width: 640px;
  font-size: 15px;
  line-height: 1.65;
}

.footer-banner button {
  flex: none;
  padding: 11px 21px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}

.footer-banner button:hover {
  background: #e6f5f3;
}

@media (max-width:800px) {
  .report-cover {
    display: block;
    padding: 0;
    border-radius: 10px;
    object-fit: cover;
  }

  .report-cover-one {
    object-position: 58% center;
  }

  .report-cover-two {
    object-position: 73% center;
  }

  .report-cover-three {
    object-position: 90% center;
  }
}

/* Rotate eight knowledge cards at a time without changing the section's layout. */
.term-carousel {
  position: relative;
  min-height: 244px;
}

.term-slide {
  display: none;
}

.term-slide.is-active {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.term-slide .term-card {
  transform-origin: 50% 70%;
  transition: opacity .56s ease, transform .56s cubic-bezier(.22, 1, .36, 1), filter .56s ease, box-shadow .2s ease, border-color .2s ease;
}

.term-slide .term-card-hidden {
  opacity: 0;
  transform: translateY(18px) rotateX(-10deg) scale(.97);
  filter: blur(2px);
  pointer-events: none;
}

.term-slide.is-leaving {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  pointer-events: none;
  animation: term-batch-out .24s ease-out both;
}

@keyframes term-batch-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.985);
  }
}

@media (max-width:800px) {
  .term-carousel {
    min-height: 0;
  }

  .term-slide.is-active,
  .term-slide.is-leaving {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Match the newsletter CTA to the responsive content width, including mid-size desktops. */
@media (min-width:1051px) {
  .footer-banner {
    padding-left: max(40px, calc((100% - var(--max)) / 2 + 16px));
    padding-right: max(64px, calc((100% - var(--max)) / 2 + 44px));
  }
}

@media (min-width:801px) and (max-width:1050px) {
  .footer-banner {
    padding-left: max(32px, calc((100% - 850px) / 2 + 16px));
    padding-right: max(60px, calc((100% - 850px) / 2 + 44px));
  }
}

/* Four compact footer navigation groups keep the secondary links easy to scan. */
@media (min-width:801px) {
  .footer-main {
    grid-template-columns: 2fr repeat(4, 1fr);
    padding-left: 16px;
    padding-right: 44px;
  }

  .copyright {
    position: relative;
    border-top: 0;
    padding-left: 16px;
    padding-right: 44px;
  }

  .copyright:before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 44px;
    height: 1px;
    background: #2c3543;
  }
}

.footer-main a {
  transition: color .2s ease;
}

.footer-main a:hover {
  color: #d7f1ed;
}

.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.copyright a {
  color: inherit;
  transition: color .2s ease;
}

.copyright a:hover {
  color: #d7f1ed;
}

.copyright-links {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.copyright-links span {
  color: #506171;
}

@media (max-width:800px) {
  .copyright {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* Give the sidebar subscription action a calmer, more intentional presence. */
.side-ad button {
  min-height: 38px;
  margin-top: 24px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.hero h1 {
  color: var(--teal);
}

@media (min-width:801px) {
  .main-nav a {
    font-size: 16px;
  }
}

/* On extra-wide screens, let the atmosphere continue full bleed while the focal visual stays within the content composition. */
@media (min-width:1440px) {
  .hero {
    background-position: center center;
    background-size: min(100%, 2304px) auto, 100% 100%;
  }
}

.subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.subscribe-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Preserve each platform's supplied mark without imposing a synthetic icon style. */
.platform-box>a {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
}

.platform-box .platform-logo {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  border-radius: 5px;
}

@media (min-width:801px) {
  .platform-box .side-title h2 {
    font-size: 19px;
  }

  .platform-box>a {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }

  .platform-box .platform-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .platform-box span {
    font-size: 15px;
    line-height: 1.35;
  }

  .platform-box small {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
  }
}

/* Keep metadata and tags at a practical reading size on desktop. */
@media (min-width:801px) {
  .category {
    font-size: 12px;
  }

  .headline-row small,
  .event-slide .ef-body small,
  .report-item p,
  .guide-tile small {
    font-size: 13px;
    line-height: 1.55;
  }

  .guide-tile p {
    font-size: 12px;
    line-height: 1.6;
  }

  .tag-box a {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.35;
  }
}

/* Ambient particles follow the orbital lines in the hero artwork. */
.hero {
  position: relative;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-flow {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.flow-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border: 2px solid #d9ffff;
  border-radius: 50%;
  background: #008b87;
  box-shadow: 0 0 0 3px #008b8730, 0 0 13px #00a59e9c;
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: hero-particle 7.5s ease-in-out infinite alternate;
}

.flow-dot-one {
  left: 43%;
  top: 53%;
  offset-path: path("M 0 0 C 72 -64, 163 -63, 266 -7");
}

.flow-dot-two {
  left: 47%;
  top: 37%;
  offset-path: path("M 0 0 C 72 -49, 149 -47, 240 7");
  animation-duration: 8.8s;
  animation-delay: -3.1s;
}

.flow-dot-three {
  left: 54%;
  top: 66%;
  offset-path: path("M 0 0 C 77 44, 165 42, 273 -13");
  animation-duration: 9.2s;
  animation-delay: -5.4s;
}

.flow-dot-four {
  left: 63%;
  top: 44%;
  offset-path: path("M 0 0 C 57 -34, 135 -30, 220 25");
  animation-duration: 7.8s;
  animation-delay: -1.7s;
}

.flow-dot-five {
  left: 70%;
  top: 72%;
  offset-path: path("M 0 0 C 63 -46, 137 -50, 220 -4");
  animation-duration: 8.4s;
  animation-delay: -6.3s;
}

.flow-dot-six {
  left: 76%;
  top: 31%;
  offset-path: path("M 0 0 C 47 37, 105 51, 179 23");
  animation-duration: 7.1s;
  animation-delay: -2.5s;
}

@keyframes hero-particle {
  to {
    offset-distance: 100%;
  }
}

@media (max-width:800px),
(prefers-reduced-motion:reduce) {
  .hero-flow {
    display: none;
  }
}

/* Activity articles stay in the source for SEO, then reveal in three-item batches. */
[data-reveal-list] .is-deferred {
  display: none;
}

[data-reveal-list] .is-deferred.is-revealed {
  display: grid;
  animation: reveal-article-in .72s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes reveal-article-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-sentinel {
  height: 1px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  transition: height .28s ease, margin .28s ease;
}

.reveal-sentinel.is-loading {
  height: 42px;
  margin: 16px 0 8px;
}

.reveal-sentinel i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  transform: translateY(6px) scale(.75);
}

.reveal-sentinel.is-loading i {
  animation: reveal-loader-dot .72s ease-in-out infinite;
}

.reveal-sentinel.is-loading i:nth-child(2) {
  animation-delay: .12s;
}

.reveal-sentinel.is-loading i:nth-child(3) {
  animation-delay: .24s;
}

@keyframes reveal-loader-dot {

  0%,
  75%,
  100% {
    opacity: .25;
    transform: translateY(4px) scale(.78);
  }

  38% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }
}

.browse-more {
  display: none;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 24px auto 0;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--teal);
  background: #fff;
  color: var(--teal);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 5px 14px #16363d18;
}

.browse-more.is-visible {
  display: flex;
}

.browse-more:hover {
  background: var(--teal);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-list] .is-deferred.is-revealed {
    animation: none;
  }

  .reveal-sentinel.is-loading i {
    animation: none;
    opacity: .75;
    transform: none;
  }
}

/* Hero slides are direct HTML images so a future CMS can bind each slide's media and copy. */
.hero {
  position: relative;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.hero-slides {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% + 200px);
  overflow: hidden;
  background: var(--page);
}

.hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  will-change: opacity;
  transition: opacity 1.35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 1.35s;
}

.hero-slide.is-active {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.35s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

/* The outgoing image remains above the incoming image while both opacity
   values animate. This makes each change a perceptible cross dissolve. */
.hero-slide.is-exiting {
  z-index: 2;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity 1.35s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.hero-slide>img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%) scale(1.035);
  transform-origin: center center;
  transition: transform 5.8s ease-out;
  user-select: none;
}

.hero-slide.is-active>img {
  transform: translateX(-50%) scale(1);
}

/* The last 200px of each direct image fades into the page canvas. */
.hero-image-blend {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 200px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(244 247 251 / 0%) 0%, rgb(244 247 251 / 0.18) 24%, rgb(244 247 251 / 0.62) 68%, var(--page) 100%);
}

.hero-slide .hero-inner {
  position: relative;
  z-index: 2;
}

.hero-slide .hero-copy {
  opacity: 1;
  transform: none;
}

.hero-slide .hero-copy>span,
.hero-slide .hero-copy>h1,
.hero-slide .hero-copy>h2,
.hero-slide .hero-copy>p,
.hero-slide .hero-copy>.hero-button {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  will-change: opacity, transform;
}

/* Each active slide reveals its copy from right to left, one line group at a time. */
.hero-slide.is-active .hero-copy>span {
  animation: hero-copy-enter .48s cubic-bezier(.22, 1, .36, 1) .12s both;
}

.hero-slide.is-active .hero-copy>h1,
.hero-slide.is-active .hero-copy>h2 {
  animation: hero-copy-enter .62s cubic-bezier(.22, 1, .36, 1) .26s both;
}

.hero-slide.is-active .hero-copy>p {
  animation: hero-copy-enter .54s cubic-bezier(.22, 1, .36, 1) .46s both;
}

.hero-slide.is-active .hero-copy>.hero-button {
  animation: hero-copy-enter .5s cubic-bezier(.22, 1, .36, 1) .64s both;
}

@keyframes hero-copy-enter {
  from {
    opacity: 0;
    transform: translate3d(28px, 0, 0);
  }

  65% {
    opacity: 1;
    transform: translate3d(-3px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-slide h1,
.hero-slide h2 {
  margin: 9px 0 13px;
  color: var(--teal);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.16;
}

.hero-slide.is-dark .hero-copy>span,
.hero-slide.is-dark .hero-copy h2 {
  color: #fff;
}

.hero-slide.is-dark .hero-copy p {
  color: #d5f3f0;
}

.hero-slide.is-dark .hero-button {
  background: #fff;
  color: var(--teal);
}

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.hero-dots button {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffffa8;
  box-shadow: 0 1px 4px #16515a33;
  transition: transform .2s ease, background .2s ease;
}

.hero-dots button:hover,
.hero-dots button.is-active {
  background: var(--teal);
  transform: scale(1.22);
}

.layout {
  position: relative;
  z-index: 2;
}

@media (max-width: 800px) {
  .hero-slides {
    height: calc(100% + 96px);
  }

  .hero-slide h1,
  .hero-slide h2 {
    margin: 7px 0 10px;
    font-size: 26px;
  }

  .hero-slide .hero-copy p {
    max-width: 275px;
    font-size: 12px;
  }

  .hero-dots {
    bottom: 14px;
    gap: 9px;
  }

  .hero-dots button {
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-slide,
  .hero-slide>img,
  .hero-slide .hero-copy {
    transition: none;
  }

  .hero-slide .hero-copy>span,
  .hero-slide .hero-copy>h1,
  .hero-slide .hero-copy>h2,
  .hero-slide .hero-copy>p,
  .hero-slide .hero-copy>.hero-button {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Keep the CMS-bindable image layer taller than the visible copy stage without
   changing the position of the hero content. */
.hero {
  --hero-visible-height: 450px;
  height: var(--hero-visible-height);
  overflow: visible;
}

.hero-slide .hero-inner {
  height: var(--hero-visible-height);
}

/* Match the main editorial surface to the right-rail card radius. */
.content-column {
  border-radius: 10px;
  overflow: hidden;
}

/* Match the header elevation to the editorial panels below it. */
.site-header {
  box-shadow: 0 10px 28px #16363d0d;
}

/* Report source labels sit on the cover so the metadata line stays compact. */
.report-visual {
  position: relative;
  width: 100%;
}

.report-badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgb(21 39 43 / 12%);
}

.report-badge.is-reprint {
  color: #ba5b42;
  background: rgb(255 243 237 / 92%);
}

/* Metadata uses the supplied image assets across all static article lists. */
.category::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("../ico-fenlei.png") center / contain no-repeat;
}

.headline-row small,
.guide-tile small,
.event-slide .ef-body small,
.report-item p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.meta-item+.meta-item::before {
  content: "";
  width: 1px;
  height: 13px;
  margin: 0 11px;
  background: #c9d4d6;
}

.meta-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  object-fit: contain;
  opacity: .72;
}

/* Override the larger thumbnail rules that also target images inside articles. */
.headline-row img.meta-icon,
.guide-tile img.meta-icon,
.event-slide img.meta-icon,
.report-item img.meta-icon {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 4px 0 0;
  border-radius: 0;
  object-fit: contain;
}

/* Keep article metadata aligned with the bottom edge of its thumbnail. */
.headline-row>div {
  min-height: 158px;
  display: flex;
  flex-direction: column;
}

.headline-row>div>small {
  margin-top: auto;
}

@media (max-width: 800px) {
  .report-badge {
    top: 8px;
    right: 8px;
    min-height: 23px;
    padding: 0 8px;
    font-size: 11px;
  }

  .meta-item+.meta-item::before {
    margin: 0 7px;
  }

  .meta-icon,
  .headline-row img.meta-icon,
  .guide-tile img.meta-icon,
  .event-slide img.meta-icon,
  .report-item img.meta-icon {
    width: 12px;
    height: 12px;
  }

  .headline-row>div {
    min-height: 88px;
  }
}

@media (max-width: 800px) {
  .hero {
    --hero-visible-height: 242px;
  }

  .hero-image-blend {
    height: 96px;
  }
}

/* One shared marker moves between navigation items instead of each link
   drawing its own underline. */
.main-nav {
  position: relative;
}

.main-nav a {
  z-index: 1;
}

.main-nav a.active::after {
  display: none;
}

.nav-indicator {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 3px;
  pointer-events: none;
  background: var(--teal);
  transform: translate3d(0, 0, 0);
  transition: transform .36s cubic-bezier(.22, 1, .36, 1), width .36s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, width;
}

@media (max-width: 800px) {
  .nav-indicator {
    display: none;
  }
}

/* Use a proper, high-contrast search glyph instead of a small text character. */
.mini-search button {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  place-items: center;
  color: #557075;
}

.mini-search-icon {
  display: block;
  width: 19px;
  height: 19px;
}

.float-feedback {
  right: 16px;
  border-radius: 8px;
  font-size: 12px;
}

@media (max-width: 800px) {
  .float-feedback {
    right: 12px;
    border-radius: 8px;
  }
}

/* Report cards link as one coherent editorial unit. */
.report-link {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.report-link:hover .report-cover {
  filter: brightness(1.045);
  transform: translateY(-2px);
}

.report-link:hover h3 {
  color: var(--teal);
}

.report-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 10px;
}

.report-cover {
  transition: filter .22s ease, transform .22s ease;
}

@media (min-width: 801px) {
  .report-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .report-cover-four {
    object-position: 38% center;
  }
}

/* Match the navigation text state to the moving marker during preview. */
.main-nav.is-previewing a.active:not(.is-preview) {
  color: #324044;
  font-weight: 400;
}

.main-nav a.is-preview {
  color: var(--teal);
  font-weight: 700;
}

/* GEO encyclopedia listing page. */
.ency-page {
  min-height: 100vh;
  background: var(--page);
}

.ency-hero {
  overflow: hidden;
}

.ency-hero-inner {
  position: relative;
  display: flex;
  width: min(var(--max), calc(100% - 48px));
  min-height: 286px;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.ency-hero-copy {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  padding: 42px 0;
  text-align: center;
}

.ency-hero h1 {
  margin: 0;
  color: var(--teal);
  font-size: 44px;
  line-height: 1.15;
}

.ency-hero-copy>p {
  max-width: 650px;
  margin: 12px auto 21px;
  color: #637a81;
  font-size: 16px;
}

.ency-search {
  display: flex;
  width: min(540px, 100%);
  height: 54px;
  padding: 5px;
  border: 1px solid #c9dddf;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgb(0 82 80 / 8%);
  margin: 0 auto;
}

.ency-search input {
  min-width: 0;
  flex: 1;
  padding: 0 14px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}

.ency-search button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 17px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: var(--teal);
  font-size: 14px;
  font-weight: 700;
}

.ency-search svg {
  width: 18px;
  height: 18px;
}

.ency-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 25px auto 70px;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 22px;
}

.ency-main,
.ency-side-card {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.ency-main {
  padding: 26px;
}

.ency-section-heading,
.ency-side-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.ency-section-heading h2,
.ency-side-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.25;
}

.ency-section-heading p {
  margin: 5px 0 0;
  color: #88979a;
  font-size: 13px;
}

.ency-section-heading>span {
  padding-top: 5px;
  color: #789096;
  font-size: 12px;
  white-space: nowrap;
}

.ency-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eeee;
}

.ency-filter a {
  position: relative;
  display: inline-flex;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #698085;
  background: transparent;
  font-size: 13px;
  line-height: 28px;
  text-decoration: none;
  transition: color .2s ease;
}

.ency-filter a:hover,
.ency-filter a.is-active {
  color: var(--teal);
  background: transparent;
  font-weight: 700;
}

.ency-filter a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--teal);
}

.ency-term-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.ency-term-card {
  display: flex;
  min-height: 192px;
  padding: 18px;
  flex-direction: column;
  border: 1px solid #e5eeee;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.ency-term-card:hover {
  border-color: #b8d8d7;
  box-shadow: 0 9px 20px #16363d12;
  transform: translateY(-2px);
}

.ency-term-card[hidden] {
  display: none;
}

.term-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.term-card-top time {
  color: #99a7aa;
  font-size: 11px;
  white-space: nowrap;
}

.term-type {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.term-type.concept {
  color: #08706d;
  background: #e5f4f2;
}

.term-type.platform {
  color: #386991;
  background: #eaf2fa;
}

.term-type.term {
  color: #7657a1;
  background: #f1ecfa;
}

.term-type.industry {
  color: #a46021;
  background: #fff1df;
}

.term-card-body {
  display: grid;
  margin-top: 13px;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
}

.ency-term-card.no-media .term-card-body {
  grid-template-columns: minmax(0, 1fr);
}

.term-card-media {
  display: block;
  min-height: 88px;
  overflow: hidden;
  border-radius: 7px;
  background: #eaf4f3;
}

.term-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.term-card-media:hover img {
  transform: scale(1.055);
}

.term-card-media.media-logo {
  display: grid;
  padding: 20px;
  place-items: center;
  background: #edf7f7;
}

.term-card-media.media-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.term-card-copy {
  min-width: 0;
}

.ency-term-card h3 {
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 1.35;
}

.ency-term-card h3 a:hover {
  color: var(--teal);
}

.ency-term-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #708187;
  font-size: 13px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.term-card-bottom {
  display: flex;
  margin-top: auto;
  padding-top: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #95a3a6;
  font-size: 11px;
}

.term-card-bottom a {
  overflow: hidden;
  color: #5b8b8a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-card-bottom a:hover {
  color: var(--teal);
}

.ency-empty {
  margin: 34px 0;
  color: #829296;
  text-align: center;
  font-size: 14px;
}

.ency-pagination {
  display: flex;
  margin-top: 26px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ency-pagination a,
.pagination-control,
.pagination-ellipsis {
  display: inline-flex;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid #dfebea;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: #637b7e;
  background: #fff;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}

.ency-pagination a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.ency-pagination a.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  font-weight: 700;
}

.pagination-control {
  min-width: 70px;
  color: #61797b;
}

.pagination-control:not(.is-disabled) {
  cursor: pointer;
}

.pagination-control:not(.is-disabled):hover {
  border-color: var(--teal);
  color: var(--teal);
}

.pagination-control.is-disabled {
  cursor: default;
  color: #b2c0c1;
  background: #f8fbfb;
}

.pagination-ellipsis {
  min-width: 24px;
  padding: 0 1px;
  border-color: transparent;
  color: #94a6a8;
}

.ency-sidebar {
  position: sticky;
  top: 94px;
  display: grid;
  align-self: start;
  gap: 16px;
}

.ency-side-card {
  padding: 19px;
}

.ency-side-title {
  align-items: center;
}

.ency-side-title a {
  color: #7e9094;
  font-size: 12px;
}

.ency-calendar {
  padding-bottom: 16px;
}

.ency-calendar .ency-side-title h2 {
  font-size: 18px;
}

.calendar-week,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

.calendar-week {
  margin-top: 15px;
  color: #94a6a8;
  font-size: 11px;
  line-height: 24px;
}

.calendar-days {
  row-gap: 3px;
}

.calendar-days a,
.calendar-days span {
  display: grid;
  width: 27px;
  height: 27px;
  margin: 0 auto;
  border-radius: 50%;
  place-items: center;
  color: #557075;
  font-size: 11px;
  text-decoration: none;
}

.calendar-days a:hover {
  color: #fff;
  background: #66aaa8;
}

.calendar-days .is-today {
  color: #fff;
  background: var(--teal);
  font-weight: 700;
  box-shadow: 0 3px 8px rgb(0 109 107 / 24%);
}

.calendar-days .is-muted {
  color: #c5d1d2;
}

.hot-terms ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.hot-terms li {
  display: grid;
  padding: 10px 0;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  border-top: 1px solid #eaf0f0;
}

.hot-terms li:first-child {
  border-top: 0;
}

.hot-terms b {
  color: #ee7962;
  font-size: 12px;
}

.hot-terms li:nth-child(n + 3) b {
  color: #e79a46;
}

.hot-terms a {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-terms a:hover {
  color: var(--teal);
}

.hot-terms span {
  color: #a0adaf;
  font-size: 11px;
}

.ency-contribute {
  color: #fff;
  background: var(--teal);
}

.ency-contribute>span {
  color: #bde4e2;
  font-size: 12px;
  font-weight: 700;
}

.ency-contribute h2 {
  margin-top: 8px;
  color: #fff;
  font-size: 19px;
}

.ency-contribute p {
  margin: 8px 0 17px;
  color: #d2ecea;
  font-size: 13px;
  line-height: 1.65;
}

.ency-contribute a {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--teal);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* GEO encyclopedia term detail page. */
.ency-detail-page {
  min-height: 100vh;
  padding: 32px 0 76px;
  background: var(--page);
}

.ency-detail-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 276px;
  align-items: start;
  gap: 22px;
}

.ency-detail-article {
  padding: 31px 36px 38px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.ency-breadcrumb {
  display: flex;
  margin-bottom: 27px;
  flex-wrap: wrap;
  gap: 0 9px;
  color: #9aabac;
  font-size: 12px;
  line-height: 1.8;
}

.ency-breadcrumb a {
  color: #71888b;
}

.ency-breadcrumb a:hover {
  color: var(--teal);
}

.ency-detail-kicker {
  display: flex;
  margin-bottom: 14px;
  align-items: center;
  gap: 9px;
  color: #90a2a5;
  font-size: 12px;
}

.ency-detail-head {
  padding-bottom: 25px;
  border-bottom: 1px solid #e9f0f0;
}

.ency-detail-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 36px;
  line-height: 1.25;
}

.ency-detail-lede {
  max-width: 740px;
  margin: 14px 0 18px;
  color: #637a7f;
  font-size: 17px;
  line-height: 1.75;
}

.ency-detail-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #93a4a6;
  font-size: 12px;
}

.ency-detail-byline a {
  color: #5a8584;
}

.ency-detail-byline a:hover {
  color: var(--teal);
}

.definition-box {
  display: grid;
  margin: 28px 0 33px;
  padding: 21px 23px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 15px;
  border-radius: 8px;
  background: #edf8f7;
}

.definition-mark {
  display: grid;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  place-items: center;
  color: #fff;
  background: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.definition-box h2 {
  margin: 0 0 6px;
  color: #1b4143;
  font-size: 17px;
}

.definition-box p {
  margin: 0;
  color: #42686a;
  font-size: 15px;
  line-height: 1.8;
}

.ency-detail-article>section:not(.definition-box) {
  margin-top: 37px;
  scroll-margin-top: 106px;
}

.ency-detail-article>section>h2 {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--teal);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}

.ency-detail-article>section>p {
  margin: 0 0 13px;
  color: #50696e;
  font-size: 15px;
  line-height: 1.9;
}

.detail-keypoints {
  margin-top: 21px;
  padding: 19px 21px;
  border-radius: 8px;
  background: #f7fbfb;
}

.detail-keypoints h3 {
  margin: 0 0 11px;
  color: #244b4d;
  font-size: 16px;
}

.detail-keypoints ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 9px;
  list-style: none;
}

.detail-keypoints li {
  position: relative;
  padding-left: 16px;
  color: #60787c;
  font-size: 14px;
  line-height: 1.7;
}

.detail-keypoints li::before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--teal);
}

.detail-keypoints strong {
  color: #34585a;
}

.detail-example {
  padding: 21px 23px;
  border-left: 3px solid #66aaa8;
  border-radius: 0 8px 8px 0;
  background: #f8fbfb;
}

.example-label {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.detail-example p {
  margin: 0;
  color: #587176;
  font-size: 15px;
  line-height: 1.85;
}

.detail-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2ecec;
  border-radius: 8px;
}

.detail-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: #506b70;
  font-size: 14px;
  line-height: 1.65;
}

.detail-table th,
.detail-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #e7eeee;
  text-align: left;
  vertical-align: top;
}

.detail-table thead th {
  color: #356466;
  background: #f1f8f8;
  font-weight: 700;
}

.detail-table tbody th {
  width: 110px;
  color: #426164;
  background: #fbfdfd;
  font-weight: 700;
}

.detail-table tr:last-child th,
.detail-table tr:last-child td {
  border-bottom: 0;
}

.detail-note {
  margin-top: 12px !important;
  color: #84989a !important;
  font-size: 13px !important;
}

.related-term-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.related-term-grid a {
  position: relative;
  display: flex;
  min-height: 126px;
  padding: 15px;
  flex-direction: column;
  border: 1px solid #e3eded;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.related-term-grid a:hover {
  transform: translateY(-2px);
  border-color: #acd2d0;
  box-shadow: 0 8px 18px #16363d11;
}

.related-term-grid strong {
  display: block;
  margin: 10px 0 5px;
  color: #1e4144;
  font-size: 16px;
  line-height: 1.35;
}

.related-term-grid small {
  color: #7d9295;
  font-size: 12px;
  line-height: 1.55;
}

.related-term-grid i {
  position: absolute;
  right: 13px;
  bottom: 12px;
  color: var(--teal);
  font-size: 19px;
  font-style: normal;
}

.detail-sources {
  padding-top: 29px;
  border-top: 1px solid #e8eeee;
}

.detail-sources ol {
  margin: 0;
  padding-left: 21px;
}

.detail-sources li {
  padding: 5px 0;
  color: #61797d;
  font-size: 14px;
  line-height: 1.65;
}

.detail-sources li a {
  color: #3b7777;
  text-decoration: underline;
  text-decoration-color: #b7d6d5;
  text-underline-offset: 3px;
}

.detail-sources li a:hover {
  color: var(--teal);
}

.detail-sources li span {
  display: block;
  color: #9aa8aa;
  font-size: 12px;
}

.detail-sources>p {
  margin: 14px 0 0 !important;
  color: #8da0a2 !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
}

.ency-detail-aside {
  position: sticky;
  top: 94px;
  display: grid;
  align-self: start;
  gap: 16px;
}

.detail-toc,
.detail-facts {
  padding: 19px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.detail-toc h2,
.detail-facts h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 17px;
}

.detail-toc a {
  display: block;
  padding: 7px 0 7px 11px;
  border-left: 2px solid transparent;
  color: #74898c;
  font-size: 13px;
  line-height: 1.45;
}

.detail-toc a:hover,
.detail-toc a.is-current {
  border-left-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}

.detail-facts dl {
  margin: 0;
}

.detail-facts dl>div {
  display: flex;
  padding: 9px 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #ecf1f1;
  font-size: 12px;
}

.detail-facts dt {
  color: #92a2a5;
}

.detail-facts dd {
  margin: 0;
  color: #526d70;
  text-align: right;
}

.detail-facts dd a {
  color: var(--teal);
}

.detail-back-link {
  display: inline-flex;
  padding: 10px 13px;
  border: 1px solid #c7dedc;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.detail-back-link:hover {
  color: #fff;
  background: var(--teal);
}

@media (max-width: 800px) {
  .ency-detail-page {
    padding: 17px 0 48px;
  }

  .ency-detail-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .ency-detail-article {
    padding: 21px 17px 26px;
    border-radius: 8px;
  }

  .ency-breadcrumb {
    margin-bottom: 20px;
    font-size: 11px;
  }

  .ency-detail-head {
    padding-bottom: 20px;
  }

  .ency-detail-head h1 {
    font-size: 27px;
  }

  .ency-detail-lede {
    margin: 11px 0 14px;
    font-size: 15px;
    line-height: 1.7;
  }

  .ency-detail-byline {
    gap: 5px 11px;
    font-size: 11px;
  }

  .definition-box {
    margin: 22px 0 27px;
    padding: 16px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
  }

  .definition-mark {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 11px;
  }

  .definition-box h2 {
    font-size: 16px;
  }

  .definition-box p,
  .ency-detail-article>section>p,
  .detail-example p {
    font-size: 14px;
  }

  .ency-detail-article>section:not(.definition-box) {
    margin-top: 29px;
  }

  .ency-detail-article>section>h2 {
    margin-bottom: 12px;
    padding-left: 10px;
    font-size: 20px;
  }

  .detail-keypoints,
  .detail-example {
    padding: 16px;
  }

  .detail-keypoints li {
    font-size: 13px;
  }

  .related-term-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .related-term-grid a {
    min-height: 108px;
  }

  .ency-detail-aside {
    position: static;
    margin-top: 14px;
    gap: 12px;
  }

  .detail-toc {
    display: none;
  }

  .detail-facts {
    padding: 17px;
    border-radius: 8px;
  }

  .detail-back-link {
    width: 100%;
  }
}

/* GEO news detail page. */
.news-detail-page {
  min-height: 100vh;
  padding: 32px 0 76px;
  background: var(--page);
}

.news-detail-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 276px;
  align-items: start;
  gap: 22px;
}

.news-detail-article {
  padding: 31px 36px 38px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.news-breadcrumb {
  display: flex;
  margin-bottom: 27px;
  flex-wrap: wrap;
  gap: 0 9px;
  color: #9aabac;
  font-size: 12px;
  line-height: 1.8;
}

.news-breadcrumb a {
  color: #71888b;
}

.news-breadcrumb a:hover {
  color: var(--teal);
}

.news-detail-head {
  padding-bottom: 24px;
  border-bottom: 1px solid #e9f0f0;
}

.news-detail-head h1 {
  margin: 9px 0 13px;
  color: var(--ink);
  font-size: 35px;
  line-height: 1.3;
}

.news-detail-head>p {
  max-width: 760px;
  margin: 0 0 17px;
  color: #667e83;
  font-size: 17px;
  line-height: 1.75;
}

.news-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #94a4a7;
  font-size: 12px;
}

.news-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.news-detail-meta img {
  width: 13px;
  height: 13px;
  opacity: .58;
}

.news-detail-cover {
  margin: 27px 0 0;
}

.news-detail-cover img {
  display: block;
  width: 100%;
  height: 350px;
  border-radius: 8px;
  object-fit: cover;
}

.news-detail-cover figcaption {
  margin-top: 8px;
  color: #a0afb1;
  font-size: 11px;
  text-align: right;
}

.news-detail-article>section:not(.news-detail-related) {
  margin-top: 37px;
  scroll-margin-top: 106px;
}

.news-detail-article>section>h2 {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--teal);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}

.news-detail-article>section>p {
  margin: 0 0 13px;
  color: #50696e;
  font-size: 15px;
  line-height: 1.9;
}

.news-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.news-findings>div {
  padding: 18px 16px;
  border-radius: 8px;
  background: #f5faf9;
}

.news-findings b {
  color: var(--teal);
  font-size: 13px;
}

.news-findings h3 {
  margin: 10px 0 6px;
  color: #294b4d;
  font-size: 16px;
  line-height: 1.4;
}

.news-findings p {
  margin: 0;
  color: #6d8387;
  font-size: 13px;
  line-height: 1.7;
}

.news-method-note {
  display: flex;
  padding: 16px 19px;
  border-radius: 8px;
  align-items: flex-start;
  gap: 12px;
  color: #537074;
  background: #f6faf9;
  font-size: 14px;
  line-height: 1.75;
}

.news-method-note strong {
  flex: 0 0 auto;
  color: var(--teal);
}

.news-method-note span {
  min-width: 0;
}

.news-detail-sources {
  padding-top: 29px;
  border-top: 1px solid #e8eeee;
}

.news-detail-sources ul {
  margin: 0;
  padding-left: 20px;
}

.news-detail-sources li {
  padding: 4px 0;
  color: #61797d;
  font-size: 14px;
  line-height: 1.7;
}

.news-detail-sources>p {
  margin-top: 13px !important;
  color: #879b9d !important;
  font-size: 13px !important;
}

.news-detail-sources a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-detail-related {
  margin-top: 36px;
  padding-top: 29px;
  border-top: 1px solid #e8eeee;
}

.news-detail-section-title {
  display: flex;
  margin-bottom: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.news-detail-section-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
}

.news-detail-section-title a {
  color: #648588;
  font-size: 13px;
}

.news-detail-related>div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.news-detail-related>div:last-child>a {
  position: relative;
  display: block;
  min-height: 125px;
  padding: 15px;
  border: 1px solid #e1eceb;
  border-radius: 8px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.news-detail-related>div:last-child>a:hover {
  transform: translateY(-2px);
  border-color: #abd3d1;
  box-shadow: 0 8px 18px #16363d11;
}

.news-detail-related span {
  color: #df705f;
  font-size: 11px;
  font-weight: 700;
}

.news-detail-related strong {
  display: block;
  margin-top: 8px;
  color: #2a4b4d;
  font-size: 15px;
  line-height: 1.5;
}

.news-detail-related small {
  position: absolute;
  bottom: 13px;
  left: 15px;
  color: #9aa9ab;
  font-size: 11px;
}

.news-detail-aside {
  position: sticky;
  top: 94px;
  display: grid;
  align-self: start;
  gap: 16px;
}

.news-detail-toc,
.news-detail-info,
.news-detail-follow {
  padding: 19px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.news-detail-toc h2,
.news-detail-info h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 17px;
}

.news-detail-toc a {
  display: block;
  padding: 7px 0 7px 11px;
  border-left: 2px solid transparent;
  color: #74898c;
  font-size: 13px;
  line-height: 1.45;
}

.news-detail-toc a:hover,
.news-detail-toc a.is-current {
  border-left-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}

.news-detail-info dl {
  margin: 0;
}

.news-detail-info dl>div {
  display: flex;
  padding: 9px 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #ecf1f1;
  font-size: 12px;
}

.news-detail-info dt {
  color: #92a2a5;
}

.news-detail-info dd {
  margin: 0;
  color: #526d70;
  text-align: right;
}

.news-detail-info dd a {
  color: var(--teal);
}

.news-detail-follow {
  display: flex;
  padding: 15px;
  align-items: center;
  gap: 12px;
}

.news-detail-follow img {
  width: 65px;
  height: 65px;
  padding: 4px;
  border: 1px solid #d7e6e5;
  border-radius: 6px;
  object-fit: contain;
}

.news-detail-follow strong,
.news-detail-follow span {
  display: block;
}

.news-detail-follow strong {
  color: #284c4f;
  font-size: 14px;
}

.news-detail-follow span {
  margin-top: 4px;
  color: #90a0a3;
  font-size: 11px;
  line-height: 1.55;
}

.news-detail-back {
  display: inline-flex;
  padding: 10px 13px;
  border: 1px solid #c7dedc;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.news-detail-back:hover {
  color: #fff;
  background: var(--teal);
}

@media (max-width: 800px) {
  .news-detail-page {
    padding: 17px 0 48px;
  }

  .news-detail-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .news-detail-article {
    padding: 21px 17px 26px;
    border-radius: 8px;
  }

  .news-breadcrumb {
    margin-bottom: 20px;
    font-size: 11px;
  }

  .news-detail-head {
    padding-bottom: 20px;
  }

  .news-detail-head h1 {
    margin: 6px 0 10px;
    font-size: 26px;
  }

  .news-detail-head>p {
    margin-bottom: 13px;
    font-size: 15px;
    line-height: 1.7;
  }

  .news-detail-meta {
    gap: 5px 10px;
    font-size: 11px;
  }

  .news-detail-cover {
    margin-top: 21px;
  }

  .news-detail-cover img {
    height: 190px;
    border-radius: 7px;
  }

  .news-detail-article>section:not(.news-detail-related) {
    margin-top: 29px;
  }

  .news-detail-article>section>h2 {
    margin-bottom: 12px;
    padding-left: 10px;
    font-size: 20px;
  }

  .news-detail-article>section>p {
    font-size: 14px;
  }

  .news-findings {
    grid-template-columns: 1fr;
  }

  .news-findings>div {
    padding: 15px;
  }

  .news-method-note {
    padding: 15px;
    font-size: 13px;
  }

  .news-detail-related>div:last-child {
    grid-template-columns: 1fr;
  }

  .news-detail-aside {
    position: static;
    margin-top: 14px;
    gap: 12px;
  }

  .news-detail-toc {
    display: none;
  }

  .news-detail-info,
  .news-detail-follow {
    border-radius: 8px;
  }

  .news-detail-back {
    width: 100%;
  }
}

/* GEO guide listing page. */
.guides-page {
  min-height: 100vh;
  padding: 34px 0 72px;
  background: var(--page);
}

.guides-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 22px;
}

.guides-main {
  padding: 27px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.guides-tabs {
  display: flex;
  margin-bottom: 22px;
  padding: 0 2px;
  border-bottom: 1px solid #e6eeee;
  flex-wrap: wrap;
  gap: 29px;
}

.guides-tabs a {
  position: relative;
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  color: #6b8387;
  font-size: 14px;
  text-decoration: none;
}

.guides-tabs a:hover,
.guides-tabs a.is-active {
  color: var(--teal);
  font-weight: 700;
}

.guides-tabs a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--teal);
}

.guide-list-grid {
  display: block;
}

.guide-list-card {
  display: grid;
  min-width: 0;
  padding: 17px 0;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 21px;
  border-bottom: 1px solid #e9efef;
}

.guide-list-image {
  display: block;
  height: 156px;
  overflow: hidden;
  border-radius: 8px;
  background: #edf4f4;
}

.guide-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.guide-list-card:hover .guide-list-image img {
  transform: scale(1.04);
}

.guide-list-copy {
  display: flex;
  min-width: 0;
  padding: 2px 0;
  flex-direction: column;
}

.guide-list-tag {
  display: inline-flex;
  margin-right: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  color: #277d7a;
  background: #eaf7f5;
  font-size: 11px;
  font-weight: 700;
}

.guide-list-tag.platform {
  color: #5672a0;
  background: #edf1fa;
}

.guide-list-tag.monitoring {
  color: #a26935;
  background: #fff2e4;
}

.guide-list-tag.tools {
  color: #765ca0;
  background: #f2edfa;
}

.guide-list-tag.place {
  color: #789093;
  background: #f4f7f7;
  font-weight: 400;
}

.guide-list-tag.place.domestic {
  color: #a27038;
  background: #fff3e6;
}

.guide-list-copy h2 {
  margin: 9px 0 7px;
  font-size: 20px;
  line-height: 1.42;
}

.guide-list-copy h2 a:hover {
  color: var(--teal);
}

.guide-list-copy>p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #75878b;
  font-size: 14px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guide-list-meta {
  display: flex;
  margin-top: auto;
  padding-top: 11px;
  align-items: center;
  gap: 13px;
  color: #9ba9ab;
  font-size: 12px;
}

.guide-list-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.guide-list-meta img {
  width: 13px;
  height: 13px;
  opacity: .56;
}

.guides-pagination {
  display: flex;
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.guides-pagination a,
.guides-pagination>span {
  display: inline-flex;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dfebea;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: #637b7e;
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}

.guides-pagination a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.guides-pagination a.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  font-weight: 700;
}

.guides-pagination>span:first-child,
.guides-pagination a:last-child {
  min-width: 70px;
}

.guides-pagination .is-disabled {
  color: #b2c0c1;
  background: #f8fbfb;
}

.guides-pagination-ellipsis {
  min-width: 24px !important;
  padding: 0 !important;
  border-color: transparent !important;
  color: #94a6a8 !important;
  background: transparent !important;
}

@media (max-width: 800px) {
  .guides-page {
    padding: 17px 0 48px;
  }

  .guides-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .guides-main {
    padding: 19px 17px;
    border-radius: 8px;
  }

  .guides-tabs {
    margin-bottom: 7px;
    gap: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .guides-tabs a {
    min-height: 36px;
    flex: 0 0 auto;
    font-size: 13px;
  }

  .guide-list-card {
    padding: 14px 0;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
  }

  .guide-list-image {
    height: 92px;
    border-radius: 6px;
  }

  .guide-list-copy {
    padding: 0;
  }

  .guide-list-tag {
    padding: 2px 6px;
    font-size: 10px;
  }

  .guide-list-copy h2 {
    display: -webkit-box;
    margin: 4px 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .guide-list-copy>p {
    display: none;
  }

  .guide-list-meta {
    margin-top: auto;
    padding-top: 3px;
    gap: 8px;
    font-size: 10px;
  }

  .guide-list-meta img {
    width: 10px;
    height: 10px;
  }

  .guides-pagination {
    margin-top: 23px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .guides-pagination a,
  .guides-pagination>span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .guides-pagination>span:first-child,
  .guides-pagination a:last-child {
    min-width: 64px;
  }
}

/* GEO expert directory page. */
.experts-page {
  min-height: 100vh;
  padding: 34px 0 72px;
  background: var(--page);
}

.experts-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 22px;
}

.experts-main {
  padding: 27px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.experts-tabs {
  display: flex;
  margin-bottom: 22px;
  padding: 0 2px;
  border-bottom: 1px solid #e6eeee;
  flex-wrap: wrap;
  gap: 29px;
}

.experts-tabs a {
  position: relative;
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  color: #6b8387;
  font-size: 14px;
  text-decoration: none;
}

.experts-tabs a:hover,
.experts-tabs a.is-active {
  color: var(--teal);
  font-weight: 700;
}

.experts-tabs a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--teal);
}

.expert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.expert-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #e4eded;
  border-radius: 8px;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.expert-card:hover {
  transform: translateY(-2px);
  border-color: #b8d8d7;
  box-shadow: 0 9px 20px #16363d12;
}

.expert-avatar {
  display: grid;
  width: 45px;
  height: 45px;
  margin-bottom: 13px;
  border-radius: 8px;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.expert-avatar.teal {
  background: #007b78;
}

.expert-avatar.blue {
  background: #4e7099;
}

.expert-avatar.coral {
  background: #c87569;
}

.expert-avatar.purple {
  background: #78649a;
}

.expert-avatar.gold {
  background: #ae7a3c;
}

.expert-avatar.logo-card {
  padding: 10px;
  background: #edf7f7;
}

.expert-avatar.logo-card.warm {
  background: #fff5e9;
}

.expert-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.expert-card-top {
  display: flex;
  gap: 8px;
}

.expert-card-top>div {
  min-width: 0;
  flex: 1;
}

.expert-type {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 4px;
  color: #3b7776;
  background: #eaf6f5;
  font-size: 10px;
  font-weight: 700;
}

.expert-type.media {
  color: #6475a1;
  background: #eef1fa;
}

.expert-type.expert {
  color: #a1693a;
  background: #fff2e4;
}

.expert-card h2 {
  margin: 7px 0 6px;
  font-size: 17px;
  line-height: 1.35;
}

.expert-card h2 a:hover {
  color: var(--teal);
}

.expert-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #778a8e;
  font-size: 12px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.expert-arrow {
  align-self: flex-start;
  color: #91a5a6;
  font-size: 22px;
  line-height: 1;
}

.expert-arrow:hover {
  color: var(--teal);
}

.expert-tags {
  display: flex;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 5px;
}

.expert-tags a {
  padding: 3px 6px;
  border-radius: 3px;
  color: #668184;
  background: #f1f6f6;
  font-size: 10px;
}

.expert-tags a:hover {
  color: var(--teal);
  background: #e7f4f2;
}

.expert-card-footer {
  display: flex;
  margin-top: 13px;
  padding-top: 11px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #edf1f1;
  color: #9aa9ab;
  font-size: 10px;
}

.experts-pagination {
  display: flex;
  margin-top: 29px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.experts-pagination a,
.experts-pagination>span {
  display: inline-flex;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dfebea;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: #637b7e;
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}

.experts-pagination a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.experts-pagination a.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  font-weight: 700;
}

.experts-pagination>span:first-child,
.experts-pagination a:last-child {
  min-width: 70px;
}

.experts-pagination .is-disabled {
  color: #b2c0c1;
  background: #f8fbfb;
}

.experts-pagination-ellipsis {
  min-width: 24px !important;
  padding: 0 !important;
  border-color: transparent !important;
  color: #94a6a8 !important;
  background: transparent !important;
}

.experts-page .expert-avatar {
  padding: 0;
  color: transparent;
  font-size: 0;
  background: #dce1ef url("../avatar.png") center / cover no-repeat !important;
}

.experts-page .expert-avatar img {
  display: none;
}

.experts-page .news-sidebar>.ency-calendar {
  display: none;
}

/* GEO report listing page. */
.reports-page {
  min-height: 100vh;
  padding: 34px 0 72px;
  background: var(--page);
}

.reports-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 22px;
}

.reports-main {
  padding: 27px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.reports-tabs {
  display: flex;
  margin-bottom: 22px;
  padding: 0 2px;
  border-bottom: 1px solid #e6eeee;
  flex-wrap: wrap;
  gap: 29px;
}

.reports-tabs a {
  position: relative;
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  color: #6b8387;
  font-size: 14px;
  text-decoration: none;
}

.reports-tabs a:hover,
.reports-tabs a.is-active {
  color: var(--teal);
  font-weight: 700;
}

.reports-tabs a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--teal);
}

.report-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 17px;
}

.report-list-card {
  min-width: 0;
}

.report-list-cover {
  position: relative;
  display: block;
  height: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 9px;
  background: #eaf3f2;
}

.report-list-cover::after,
.report-list-cover span {
  display: none;
}

.report-list-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.report-list-card:hover .report-list-cover img {
  transform: scale(1.055);
}

.report-list-cover.cover-blue {
  background: #e7edf3;
}

.report-list-cover.cover-coral {
  background: #f1e8e2;
}

.report-list-cover.cover-dark {
  background: #e7edef;
}

.report-list-cover.cover-violet {
  background: #eceaf1;
}

.report-list-cover.cover-gold {
  background: #f3ecdf;
}

.report-list-card>div {
  padding: 12px 2px 0;
}

.report-source {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 4px;
  color: #277d7a;
  background: #eaf7f5;
  font-size: 10px;
  font-weight: 700;
}

.report-source.reprint {
  color: #8c633d;
  background: #fff1e3;
}

.report-list-card h2 {
  margin: 9px 0 6px;
  font-size: 17px;
  line-height: 1.42;
}

.report-list-card h2 a:hover {
  color: var(--teal);
}

.report-list-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #75878b;
  font-size: 12px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.report-list-card small {
  display: block;
  margin-top: 9px;
  color: #9aa9ab;
  font-size: 10px;
}

.reports-pagination {
  display: flex;
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.reports-pagination a,
.reports-pagination>span {
  display: inline-flex;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dfebea;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: #637b7e;
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}

.reports-pagination a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.reports-pagination a.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  font-weight: 700;
}

.reports-pagination>span:first-child,
.reports-pagination a:last-child {
  min-width: 70px;
}

.reports-pagination .is-disabled {
  color: #b2c0c1;
  background: #f8fbfb;
}

.reports-pagination-ellipsis {
  min-width: 24px !important;
  padding: 0 !important;
  border-color: transparent !important;
  color: #94a6a8 !important;
  background: transparent !important;
}

.reports-page .news-sidebar>.news-category-list {
  display: none;
}

@media (max-width:800px) {
  .reports-page {
    padding: 17px 0 48px;
  }

  .reports-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .reports-main {
    padding: 19px 17px;
    border-radius: 8px;
  }

  .reports-tabs {
    margin-bottom: 17px;
    gap: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .reports-tabs a {
    min-height: 36px;
    flex: 0 0 auto;
    font-size: 13px;
  }

  .report-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .report-list-cover {
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 7px;
  }

  .report-list-cover span {
    right: 12px;
    bottom: 12px;
    left: 12px;
    font-size: 9px;
  }

  .report-list-cover strong {
    margin-top: 5px;
    font-size: 14px;
  }

  .report-list-card>div {
    padding-top: 9px;
  }

  .report-list-card h2 {
    font-size: 14px;
  }

  .report-list-card p {
    display: none;
  }

  .report-list-card small {
    margin-top: 7px;
    font-size: 9px;
  }

  .reports-pagination {
    margin-top: 23px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .reports-pagination a,
  .reports-pagination>span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .reports-pagination>span:first-child,
  .reports-pagination a:last-child {
    min-width: 64px;
  }
}

/* GEO report detail page. */
.report-detail-page {
  min-height: 100vh;
  padding: 32px 0 76px;
  background: var(--page);
}

.report-detail-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 22px;
}

.report-detail-article {
  padding: 31px 36px 38px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.report-breadcrumb {
  display: flex;
  margin-bottom: 27px;
  flex-wrap: wrap;
  gap: 0 9px;
  color: #9aabac;
  font-size: 12px;
  line-height: 1.8;
}

.report-breadcrumb a {
  color: #71888b;
}

.report-breadcrumb a:hover {
  color: var(--teal);
}

.report-detail-head {
  padding-bottom: 24px;
  border-bottom: 1px solid #e9f0f0;
}

.report-detail-head h1 {
  margin: 10px 0 13px;
  color: var(--ink);
  font-size: 35px;
  line-height: 1.3;
}

.report-detail-head>p {
  max-width: 760px;
  margin: 0 0 17px;
  color: #667e83;
  font-size: 17px;
  line-height: 1.75;
}

.report-detail-head>div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #94a4a7;
  font-size: 12px;
}

.report-detail-head>div span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.report-detail-head img {
  width: 13px;
  height: 13px;
  opacity: .58;
}

.report-detail-cover {
  margin: 27px 0 0;
}

.report-detail-cover img {
  display: block;
  width: 100%;
  height: 350px;
  border-radius: 8px;
  object-fit: cover;
}

.report-detail-cover figcaption {
  margin-top: 8px;
  color: #a0afb1;
  font-size: 11px;
  text-align: right;
}

.report-detail-article>section:not(.report-related) {
  margin-top: 37px;
  scroll-margin-top: 106px;
}

.report-detail-article>section>h2 {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--teal);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.3;
}

.report-detail-article>section>p {
  margin: 0 0 13px;
  color: #50696e;
  font-size: 15px;
  line-height: 1.9;
}

.report-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.report-findings>div {
  padding: 18px 16px;
  border-radius: 8px;
  background: #f5faf9;
}

.report-findings b {
  color: var(--teal);
  font-size: 13px;
}

.report-findings strong {
  display: block;
  margin: 10px 0 6px;
  color: #294b4d;
  font-size: 16px;
  line-height: 1.4;
}

.report-findings p {
  margin: 0;
  color: #6d8387;
  font-size: 13px;
  line-height: 1.7;
}

.report-boundary {
  display: flex;
  padding: 16px 19px;
  border-radius: 8px;
  align-items: flex-start;
  gap: 12px;
  color: #537074;
  background: #f6faf9;
  font-size: 14px;
  line-height: 1.75;
}

.report-boundary strong {
  flex: 0 0 auto;
  color: var(--teal);
}

.report-recommendations {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.report-recommendations li {
  position: relative;
  padding-left: 17px;
  color: #60787c;
  font-size: 14px;
  line-height: 1.75;
}

.report-recommendations li::before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--teal);
}

.report-recommendations strong {
  color: #34585a;
}

.report-detail-sources {
  padding-top: 29px;
  border-top: 1px solid #e8eeee;
}

.report-detail-sources ul {
  margin: 0;
  padding-left: 20px;
}

.report-detail-sources li {
  padding: 4px 0;
  color: #61797d;
  font-size: 14px;
  line-height: 1.7;
}

.report-detail-sources>p {
  margin-top: 13px !important;
  color: #879b9d !important;
  font-size: 13px !important;
}

.report-detail-sources a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report-related {
  margin-top: 36px;
  padding-top: 29px;
  border-top: 1px solid #e8eeee;
}

.report-related>div {
  display: flex;
  margin-bottom: 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.report-related h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
}

.report-related>div a {
  color: #648588;
  font-size: 13px;
}

.report-related>section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.report-related>section a {
  position: relative;
  display: block;
  min-height: 141px;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  background: #315f60;
}

.report-related img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

.report-related span,
.report-related strong {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
}

.report-related span {
  bottom: 48px;
  color: #d6f1ef;
  font-size: 11px;
}

.report-related strong {
  bottom: 13px;
  font-size: 15px;
  line-height: 1.45;
}

.report-related span,
.report-related strong {
  z-index: 2;
}

@media (max-width:800px) {
  .report-detail-page {
    padding: 17px 0 48px;
  }

  .report-detail-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .report-detail-article {
    padding: 21px 17px 26px;
    border-radius: 8px;
  }

  .report-breadcrumb {
    margin-bottom: 20px;
    font-size: 11px;
  }

  .report-detail-head {
    padding-bottom: 20px;
  }

  .report-detail-head h1 {
    margin: 6px 0 10px;
    font-size: 26px;
  }

  .report-detail-head>p {
    margin-bottom: 13px;
    font-size: 15px;
    line-height: 1.7;
  }

  .report-detail-head>div {
    gap: 5px 10px;
    font-size: 11px;
  }

  .report-detail-cover {
    margin-top: 21px;
  }

  .report-detail-cover img {
    height: 190px;
    border-radius: 7px;
  }

  .report-detail-article>section:not(.report-related) {
    margin-top: 29px;
  }

  .report-detail-article>section>h2 {
    margin-bottom: 12px;
    padding-left: 10px;
    font-size: 20px;
  }

  .report-detail-article>section>p {
    font-size: 14px;
  }

  .report-findings {
    grid-template-columns: 1fr;
  }

  .report-findings>div {
    padding: 15px;
  }

  .report-boundary {
    padding: 15px;
    font-size: 13px;
  }

  .report-related>section {
    grid-template-columns: 1fr;
  }
}

/* Keep report reading pages independent from the homepage hero blending layers. */
@media (min-width: 801px) {
  .report-detail-page {
    position: relative;
    overflow-x: clip;
    background: #f4f7fb;
  }

  .report-detail-page::before,
  .report-detail-page::after {
    display: none !important;
    content: none !important;
  }

  .report-detail-layout {
    width: min(var(--max), calc(100% - 48px));
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 22px;
  }

  .report-detail-cover img {
    height: 310px;
  }
}

@media (max-width: 800px) {
  .experts-page {
    padding: 17px 0 48px;
  }

  .experts-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .experts-main {
    padding: 19px 17px;
    border-radius: 8px;
  }

  .experts-tabs {
    margin-bottom: 17px;
    gap: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .experts-tabs a {
    min-height: 36px;
    flex: 0 0 auto;
    font-size: 13px;
  }

  .expert-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .expert-card {
    padding: 15px;
  }

  .expert-avatar {
    float: left;
    margin: 0 13px 0 0;
  }

  .expert-card-top {
    min-height: 67px;
  }

  .expert-card h2 {
    margin-top: 5px;
    font-size: 16px;
  }

  .expert-card p {
    font-size: 12px;
  }

  .expert-tags {
    clear: both;
    margin-top: 12px;
  }

  .experts-pagination {
    margin-top: 22px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .experts-pagination a,
  .experts-pagination>span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .experts-pagination>span:first-child,
  .experts-pagination a:last-child {
    min-width: 64px;
  }
}

/* GEO news listing page. */
.news-page {
  min-height: 100vh;
  padding: 34px 0 72px;
  background: var(--page);
}

.news-layout {
  display: grid;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 22px;
}

.news-main,
.news-side-card {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #16363d0d;
}

.news-main {
  padding: 29px 28px;
}

.news-tabs {
  display: flex;
  margin-bottom: 7px;
  padding: 0 2px;
  border-bottom: 1px solid #e6eeee;
  flex-wrap: wrap;
  gap: 29px;
}

.news-tabs a {
  position: relative;
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  color: #6b8387;
  font-size: 14px;
  text-decoration: none;
}

.news-tabs a:hover,
.news-tabs a.is-active {
  color: var(--teal);
  font-weight: 700;
}

.news-tabs a.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  content: "";
  background: var(--teal);
}

.news-list-item {
  display: grid;
  padding: 17px 0;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 21px;
  border-bottom: 1px solid #e9efef;
}

.news-list-image {
  display: block;
  height: 156px;
  overflow: hidden;
  border-radius: 8px;
  background: #edf4f4;
}

.news-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.news-list-item:hover .news-list-image img {
  transform: scale(1.04);
}

.news-list-copy {
  display: flex;
  min-width: 0;
  padding: 2px 0;
  flex-direction: column;
}

.news-category {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  color: #ef725f;
  font-size: 12px;
  font-weight: 700;
}

.news-category::before {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  content: "";
  background-image: linear-gradient(#ef725f 0 0), linear-gradient(#ef725f 0 0), linear-gradient(#ef725f 0 0), linear-gradient(#ef725f 0 0);
  background-position: 0 0, 7px 0, 0 7px, 7px 7px;
  background-repeat: no-repeat;
  background-size: 4px 4px;
  opacity: .75;
}

.news-category.platform {
  color: #e86768;
}

.news-category.platform::before {
  background-image: linear-gradient(#e86768 0 0), linear-gradient(#e86768 0 0), linear-gradient(#e86768 0 0), linear-gradient(#e86768 0 0);
}

.news-category.guide {
  color: #c36955;
}

.news-category.guide::before {
  background-image: linear-gradient(#c36955 0 0), linear-gradient(#c36955 0 0), linear-gradient(#c36955 0 0), linear-gradient(#c36955 0 0);
}

.news-category.research {
  color: #7a659f;
}

.news-category.research::before {
  background-image: linear-gradient(#7a659f 0 0), linear-gradient(#7a659f 0 0), linear-gradient(#7a659f 0 0), linear-gradient(#7a659f 0 0);
}

.news-list-copy h2 {
  margin: 5px 0 7px;
  font-size: 20px;
  line-height: 1.42;
}

.news-list-copy h2 a:hover {
  color: var(--teal);
}

.news-list-copy>p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #74868a;
  font-size: 14px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-meta {
  display: flex;
  margin-top: auto;
  padding-top: 11px;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 13px;
  color: #98a7aa;
  font-size: 12px;
}

.news-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.news-meta img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  opacity: .55;
}

.news-pagination {
  display: flex;
  margin-top: 27px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.news-pagination a,
.news-pagination>span {
  display: inline-flex;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dfebea;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  color: #637b7e;
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}

.news-pagination a:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.news-pagination a.is-active {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
  font-weight: 700;
}

.news-pagination>span:first-child,
.news-pagination a:last-child {
  min-width: 70px;
}

.news-pagination .is-disabled {
  color: #b2c0c1;
  background: #f8fbfb;
}

.news-pagination-ellipsis {
  min-width: 24px !important;
  padding: 0 !important;
  border-color: transparent !important;
  color: #94a6a8 !important;
  background: transparent !important;
}

.news-sidebar {
  position: sticky;
  top: 94px;
  display: grid;
  align-self: start;
  gap: 16px;
}

.news-side-card {
  padding: 19px;
}

.news-side-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.news-side-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
}

.news-side-title a {
  color: #839598;
  font-size: 12px;
}

.news-reading ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.news-reading li {
  display: grid;
  padding: 11px 0;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  border-top: 1px solid #e8eeee;
}

.news-reading li:first-child {
  border-top: 0;
}

.news-reading b {
  color: #ed755f;
  font-size: 12px;
}

.news-reading li:nth-child(n + 3) b {
  color: #df984d;
}

.news-reading a {
  font-size: 13px;
  line-height: 1.55;
}

.news-reading a:hover {
  color: var(--teal);
}

.news-category-list nav {
  display: grid;
  margin-top: 12px;
  gap: 4px;
}

.news-category-list nav a {
  display: flex;
  padding: 9px 10px;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
  color: #607a7e;
  font-size: 13px;
}

.news-category-list nav a:hover {
  color: var(--teal);
  background: #f0f8f7;
}

.news-category-list nav a.is-active {
  color: var(--teal);
  background: #eaf6f5;
  font-weight: 700;
}

.news-category-list nav b {
  color: #9aa9ab;
  font-size: 11px;
  font-weight: 400;
}

.news-category-list nav a.is-active b {
  color: var(--teal);
}

.news-subscribe-box {
  color: #fff;
  background: var(--teal);
}

.news-subscribe-box>span {
  color: #c4e5e3;
  font-size: 12px;
  font-weight: 700;
}

.news-subscribe-box h2 {
  margin: 8px 0 7px;
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
}

.news-subscribe-box p {
  margin: 0 0 16px;
  color: #d3eceb;
  font-size: 13px;
  line-height: 1.65;
}

.news-subscribe-box button {
  padding: 9px 13px;
  border: 0;
  border-radius: 6px;
  color: var(--teal);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.news-follow-box {
  display: flex;
  min-height: 124px;
  padding: 16px;
  align-items: center;
  gap: 15px;
}

.news-follow-box img {
  display: block;
  width: 88px;
  height: 88px;
  padding: 6px;
  border: 1px solid #d4e5e5;
  border-radius: 7px;
  background: #fff;
  object-fit: contain;
}

.news-follow-box strong {
  display: block;
  color: #25484b;
  font-size: 16px;
  line-height: 1.4;
}

.news-follow-box p {
  margin: 6px 0 0;
  color: #86979a;
  font-size: 12px;
  line-height: 1.65;
}

.news-topic-tags>div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.news-topic-tags a {
  padding: 6px 9px;
  border-radius: 4px;
  color: #4f7577;
  background: #edf7f6;
  font-size: 12px;
}

.news-topic-tags a:nth-child(2n) {
  color: #596e9e;
  background: #eef2fb;
}

.news-topic-tags a:nth-child(3n) {
  color: #996235;
  background: #fff2e3;
}

@media (max-width: 800px) {
  .news-page {
    padding: 17px 0 48px;
  }

  .news-layout {
    display: block;
    width: calc(100% - 28px);
  }

  .news-main {
    padding: 19px 17px;
    border-radius: 8px;
  }

  .news-tabs {
    gap: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .news-tabs a {
    min-height: 36px;
    flex: 0 0 auto;
    font-size: 13px;
  }

  .news-list-item {
    padding: 14px 0;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
  }

  .news-list-image {
    height: 92px;
    border-radius: 6px;
  }

  .news-list-copy {
    padding: 0;
  }

  .news-category {
    font-size: 10px;
  }

  .news-category::before {
    transform: scale(.84);
    transform-origin: left center;
  }

  .news-list-copy h2 {
    display: -webkit-box;
    margin: 3px 0 4px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .news-list-copy>p {
    display: none;
  }

  .news-meta {
    margin-top: auto;
    padding-top: 3px;
    gap: 4px 8px;
    font-size: 10px;
  }

  .news-meta span:nth-child(2) {
    display: none;
  }

  .news-meta img {
    width: 10px;
    height: 10px;
  }

  .news-pagination {
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .news-pagination a,
  .news-pagination>span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .news-pagination>span:first-child,
  .news-pagination a:last-child {
    min-width: 64px;
  }

  .news-sidebar {
    display: none;
  }

  .news-follow-box {
    min-height: 112px;
  }
}

@media (max-width: 800px) {
  .ency-hero-inner {
    width: calc(100% - 28px);
    min-height: 250px;
  }

  .ency-hero-copy {
    width: 100%;
    padding: 35px 0;
  }

  .ency-hero h1 {
    font-size: 34px;
  }

  .ency-hero-copy>p {
    max-width: 300px;
    font-size: 14px;
  }

  .ency-search {
    height: 49px;
  }

  .ency-search button {
    padding: 0 12px;
  }

  .ency-search button span {
    display: none;
  }

  .ency-layout {
    width: calc(100% - 28px);
    display: block;
    margin-top: 15px;
  }

  .ency-main {
    padding: 17px;
  }

  .ency-filter {
    margin: 0 0 18px;
    padding-bottom: 12px;
    gap: 20px;
  }

  .ency-filter a {
    min-height: 27px;
    padding: 0;
    font-size: 13px;
    line-height: 27px;
  }

  .ency-filter a.is-active::after {
    bottom: -13px;
  }

  .ency-term-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .ency-term-card {
    min-height: 166px;
    padding: 15px;
  }

  .term-card-body {
    margin-top: 11px;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 11px;
  }

  .term-card-media {
    min-height: 82px;
  }

  .ency-term-card h3 {
    font-size: 17px;
  }

  .ency-sidebar {
    display: none;
  }

  .ency-pagination {
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 6px;
  }

  .ency-pagination a,
  .pagination-control {
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .pagination-control {
    min-width: 64px;
  }
}

/* Report detail related content uses plain editorial cards, never an image mask. */
.report-detail-page .report-related>section a {
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e4eded;
  border-radius: 8px;
  grid-template-rows: auto auto auto;
  color: #294b4d;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.report-detail-page .report-related>section a:hover {
  border-color: #b8d8d6;
  box-shadow: 0 8px 18px #16363d12;
  transform: translateY(-2px);
}

.report-detail-page .report-related img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 1;
}

.report-detail-page .report-related span,
.report-detail-page .report-related strong {
  position: static;
}

.report-detail-page .report-related span {
  padding: 11px 14px 0;
  color: #5b8887;
  font-size: 11px;
}

.report-detail-page .report-related strong {
  padding: 5px 14px 14px;
  color: #294b4d;
  font-size: 15px;
  line-height: 1.45;
}

.report-detail-actions {
  display: flex;
  margin-top: 21px;
  align-items: center;
  gap: 12px;
}

.report-download {
  display: inline-flex;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  align-items: center;
  gap: 9px;
  color: #fff;
  background: var(--teal);
  font-size: 14px;
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}

.report-download:hover {
  color: #fff;
  background: var(--teal-dark);
  transform: translateY(-1px);
}

.report-download svg {
  width: 17px;
  height: 17px;
}

.report-download small {
  color: #d8f0ee;
  font-size: 11px;
  font-weight: 400;
}

html.page-pending-open {
  overflow: hidden;
}

.page-pending-dialog {
  box-sizing: border-box;
  width: min(360px, calc(100% - 40px));
  max-width: none;
  margin: auto;
  padding: 42px 30px 30px;
  border: 0;
  border-radius: 8px;
  color: #243b3a;
  background: #fff;
  box-shadow: 0 16px 64px #123b3a33;
  text-align: center;
}

.page-pending-dialog[open] {
  animation: page-pending-enter .22s ease-out;
}

.page-pending-dialog::backdrop {
  background: #102c2b66;
}

.page-pending-dialog h2 {
  margin: 0 0 28px;
  font-size: 22px;
  line-height: 1.5;
}

.page-pending-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #657776;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.page-pending-close:hover {
  color: var(--teal);
  background: #edf6f5;
}

.page-pending-confirm {
  min-width: 130px;
  min-height: 42px;
  padding: 10px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.page-pending-confirm:hover {
  background: var(--teal-dark);
  color: #fff;
}

.page-pending-dialog button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@keyframes page-pending-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-pending-dialog[open] {
    animation: none;
  }
}

.report-detail-page .report-related>section {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 800px) {
  .report-detail-actions {
    margin-top: 17px;
  }

  .report-download {
    min-height: 39px;
    padding: 0 13px;
    font-size: 13px;
  }

  .report-detail-page .report-related>section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .report-detail-page .report-related span {
    padding: 9px 10px 0;
    font-size: 10px;
  }

  .report-detail-page .report-related strong {
    padding: 4px 10px 11px;
    font-size: 13px;
  }
}