:root {
  --page-bg: #f6f8fb;
  --surface: #fff;
  --surface-muted: #eef4fb;
  --surface-soft: #f6f8fb;

  --border: #dce3ea;
  --border-strong: #b9c7d8;

  --text: #061322;
  --text-muted: #52627a;
  --text-soft: #6b7a90;

  --accent: #176bff;
  --accent-hover: #0d55d6;
  --accent-strong: #061322;
  --accent-soft: #eaf2ff;
  --accent-soft-hover: #d7e6ff;
  --link-hover: #0a45a5;

  --success: var(--accent);
  --success-strong: #2653a6;
  --success-soft: var(--accent-soft);
  --warning: var(--accent-hover);
  --rating: var(--accent);
  --platform-icon: var(--text-muted);

  --white: #fff;
  --overlay: rgba(6, 19, 34, .36);
  --focus-ring: 0 0 0 3px rgba(23, 107, 255, .12);
  --accent-shadow: 0 12px 30px rgba(23, 107, 255, .18);
  --accent-shadow-lg: 0 18px 38px rgba(23, 107, 255, .20);
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .10);
  --shadow-dialog: 0 20px 60px rgba(0, 0, 0, .5);

  --radius-pill: 999px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-card: 18px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --transition: 180ms ease;
  --transition-panel: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
  --brand-gradient: linear-gradient(135deg, var(--accent), #5b9cff);
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
label[role="button"]:focus-visible,
.icon-btn:focus-visible,
.search-form .search-form-submit:focus-visible,
.dev-link:focus-visible,
.visit-btn:focus-visible,
.download-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: rgba(23, 107, 255, .16);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Shared layout ---------- */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

main.page {
  padding-block: 0 24px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

.content-grid > *,
.main-col {
  min-width: 0;
}

.content-grid > aside {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  align-self: start;
  overscroll-behavior: contain;
}

/* ---------- Shared components ---------- */
.top-download-card,
.mini-card,
.aside-card,
.article-block,
.faq-wrap,
.table-scroll,
.product-hero,
.rating-block,
.shot-btn,
.version-card {
  border: 1px solid var(--border);
  background-color: var(--surface);
}

.top-download-card,
.mini-card,
.aside-card,
.article-block,
.faq-wrap,
.table-scroll,
.product-hero,
.rating-block,
.shot-btn {
  border-radius: var(--radius-card);
}

.icon-btn,
.search-form .search-form-submit,
.search-submit,
.search-panel button[type="submit"],
.visit-btn,
.download-btn,
.version-download-btn,
.read-more-toggle,
.tag-free,
.badge,
.platform-chip,
.toc a,
.related-topics a,
.menu-list a,
.aside-list a {
  transition: var(--transition);
}

.search-submit,
.search-panel button[type="submit"],
.visit-btn,
.download-btn,
.version-download-btn {
  border: 0;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
}

.search-submit:hover,
.search-panel button[type="submit"]:hover,
.visit-btn:hover,
.download-btn:hover,
.version-download-btn:hover {
  background: var(--accent-hover);
  color: var(--white);
}

.read-more-toggle,
.tag-free,
.badge,
.platform-chip,
.search-form input[type="search"],
.search-form .search-form-submit,
.search-submit,
.search-panel input[type="search"],
.search-panel button[type="submit"],
.visit-btn,
.download-btn,
.version-download-btn,
.aside-list a,
.menu-list a,
.related-topics a,
.toc a {
  border-radius: var(--radius-pill);
}

.tag-free,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--success-strong);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
  vertical-align: middle;
  white-space: nowrap;
}

.badge:hover {
  border-color: var(--border-strong);
  background: var(--accent-soft-hover);
  color: var(--success-strong);
  text-decoration: none;
}

.rating-stars,
.review-stars,
.rating-score .total-stars,
.mini-card .meta .star {
  color: var(--rating);
}

.dev-item .dev-avatar,
.reviewer-card .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
  color: var(--white);
  font-weight: 700;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 12px;
  color: var(--text);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
}

h2 {
  font-size: clamp(20px, 2.2vw, 24px);
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 15px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
  backdrop-filter: saturate(1.1) blur(10px);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
}

.header-spacer {
  flex: 1;
}

.header-utils {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text-muted);
}

.icon-btn:hover {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}

.brand picture {
  display: inline-flex;
  align-items: center;
}

.brand img,
.brand svg {
  width: auto;
  height: 40px;
}

.brand-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.search-form {
  position: relative;
  flex: 1;
  max-width: 460px;
}

.search-form input[type="search"] {
  width: 100%;
  height: 40px;
  padding: 0 48px 0 38px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
}

.search-form input[type="search"]:focus,
.search-panel input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.search-form input[type="search"]:focus {
  background: var(--surface);
}

.search-form .search-ico {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-soft);
  pointer-events: none;
  transform: translateY(-50%);
}

.search-form .search-form-submit {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--white);
  transform: translateY(-50%);
}

.search-form .search-form-submit:hover {
  background: var(--accent-hover);
  color: var(--white);
}

.search-form .search-form-submit svg {
  width: 16px;
  height: 16px;
}

.header-search-toggle {
  display: none;
}

/* ---------- Menu & dialogs ---------- */
.menu-toggle-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: opacity var(--transition), visibility var(--transition);
}

.menu-toggle-input:checked ~ .menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-dialog,
.search-dialog,
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu-dialog::backdrop,
.search-dialog::backdrop {
  background: var(--overlay);
}

.menu-dialog[open],
.search-dialog[open] {
  display: flex;
  flex-direction: column;
  inset: 0;
}

.menu-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: clamp(280px, 28vw, 340px);
  max-width: calc(100vw - 52px);
  min-height: 100dvh;
  padding: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: var(--transition-panel);
}

.menu-toggle-input:checked ~ .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.menu-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.menu-head strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 18px 28px;
}

.menu-list,
.aside-list,
.dev-list,
.related-topics ul,
.toc ul,
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list {
  display: grid;
  gap: 10px;
}

.menu-list a {
  display: block;
  padding: 10px 8px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.menu-list a:hover,
.aside-list a:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

.menu-list-primary a {
  font-size: 14px;
  font-weight: 700;
}

.menu-list-secondary a {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.menu-list-utility a {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

.menu-open,
.menu-close {
  cursor: pointer;
}

.search-dialog .search-panel {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.search-panel input[type="search"] {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 16px;
}

.search-submit,
.search-panel button[type="submit"] {
  height: 40px;
  padding: 0 18px;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  padding: 14px 0 8px;
  color: var(--text-soft);
  font-size: 13px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--text-soft);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Sections & category intro ---------- */
.cat-intro {
  margin-bottom: 20px;
}

.cat-intro h1 {
  margin-bottom: 6px;
}

.cat-intro .lead {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 15px;
}

.cat-intro .desc {
  max-width: 800px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.section {
  margin-bottom: 32px;
}

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

.section-head h2 {
  margin: 0;
}

.section-head h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.section-head .view-all {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- Top downloads ---------- */
.top-downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.top-download-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 12px;
  padding: 20px;
  overflow: hidden;
  box-shadow: none;
}

.top-download-card::before {
  display: none;
}

.top-download-card:hover,
.mini-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  text-decoration: none;
}

.top-download-card:hover {
  box-shadow: var(--shadow-lg);
}

.top-card-icon-link {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  line-height: 0;
}

.top-card-icon-link:hover {
  text-decoration: none;
}

.top-download-card .app-icon,
.mini-card-media .app-icon,
.mini-card > .app-icon,
.hero-top .app-icon {
  object-fit: cover;
}

.top-download-card .app-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.top-card-body {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-card-body .app-name {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.top-card-body .app-name a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  line-height: inherit;
}

.top-card-body .app-name a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

.app-version {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.security-line {
  display: flex;
  grid-column: 1 / span 2;
  grid-row: 3;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 13px;
}

.security-line svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--success);
}

.top-card-foot {
  display: flex;
  grid-column: 1 / span 2;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  letter-spacing: 1px;
}

.platform-chip--primary {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
}

.platform-chip--primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.platform-chip--primary svg {
  stroke: var(--white);
  color: var(--white);
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 12px;
}

.platform-chip:hover {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--text-muted);
  text-decoration: none;
}

.platform-chip svg {
  width: 12px;
  height: 12px;
}

/* ---------- Mini app cards ---------- */
.mini-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.mini-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mini-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mini-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  min-height: 0;
  padding: 10px;
  text-align: left;
}

.mini-card:hover {
  box-shadow: var(--shadow);
}

.mini-card-media {
  display: block;
  align-self: start;
  width: 56px;
  height: 56px;
}

.mini-card-media .app-icon,
.mini-card > .app-icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
}

.mini-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding-top: 1px;
}

.mini-card .name {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.18;
}

.mini-card .meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.mini-card .platform-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  color: var(--platform-icon);
}

.mini-card .platform-icons svg,
.mini-card .platform-icons img {
  display: block;
  width: 12px;
  height: 12px;
	fill: #6F685D;
}

/* ---------- Aside ---------- */
.aside-card {
  padding: 16px;
  margin-bottom: 16px;
}

.aside-card h3 {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.aside-list,
.dev-list {
  display: grid;
}

.aside-list {
  gap: 0;
}

.aside-list a {
  display: block;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.dev-list {
  gap: 12px;
}

.dev-item {
  margin: 0;
}

.dev-link {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: -6px -8px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

.dev-link:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.dev-item .dev-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.dev-item .dev-name {
  margin: 0;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
}

.dev-item .dev-desc {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- Reviewer card ---------- */
.reviewer-card {
  display: inline-grid;
  grid-template-columns: 36px auto;
  align-items: center;
  gap: 14px;
  width: auto;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.reviewer-card .avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  font-size: 18px;
  line-height: 1;
}

.reviewer-card .label {
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}

.reviewer-card .name {
  margin: 1px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}

.reviewer-card .role {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.25;
}

/* ---------- Article block ---------- */
.article-block {
  padding: 24px;
  margin-bottom: 16px;
}

.article-block p {
  margin: 0 0 14px;
  color: var(--text);
  line-height: 1.65;
}

.article-block > p:first-child {
  font-size: 17px;
  color: var(--text-muted);
}

.article-block h2 {
  margin-top: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.article-block h2:first-child {
  margin-top: 0;
}

.article-block h3 {
  margin-top: 22px;
  color: var(--accent-strong);
}

.article-block ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.article-block ul {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

.article-block ul > li {
  position: relative;
  padding-left: 22px;
}

.article-block ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.article-block li {
  margin-bottom: 8px;
  line-height: 1.55;
}

/* Tables authored in the WYSIWYG editor come as a bare <table> (no <thead>),
   wrapped by Gutenberg's own <figure class="wp-block-table">. Style that
   figure as the bordered/rounded card (matching .table-scroll elsewhere)
   and treat the table's first row as the header since there's no <th>. */
.article-block .wp-block-table {
  /* overflow-y: hidden (not just overflow-x: auto) so the wrapper's rounded
     corners reliably clip the header row's square corners. border-radius on
     the <th>/<td> cells themselves is unreliable with border-collapse:
     collapse - some browsers just don't round collapsed cell borders. */
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

/* WordPress core block-library CSS (style.min.css) puts its own
   border-bottom: 3px solid (currentColor, so it renders near-black) on
   .wp-block-table thead - unrelated to our table/th/td rules above, since it
   targets the <thead> element itself. Strip it explicitly. */
.article-block .wp-block-table thead {
  border-bottom: 0;
}

/* Editors can pick the core "Stripes" table style variant
   (<figure class="wp-block-table is-style-stripes">), which paints its own
   background-color on odd <tr>s. Our <td>s don't set their own background,
   so that row color shows straight through and muddies the header/hover
   treatment above. Neutralize it so every table looks the same regardless
   of which block style variant an editor happened to pick. */
.article-block .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: transparent;
}

.article-block table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  font-size: 14px;
}

/* Main home-page comparison table only (.compare-table-main, set on the
   figure in post content) - table-layout: auto let columns take width
   unpredictably depending on content across rows, which is what let a
   single short word like "Curaçao" end up in a column narrow enough to
   break mid-word ("Curaça/o"). Fixed proportions, sized for this table's
   actual 6 columns, make every column’s width predictable instead. */
.article-block .compare-table-main table {
  table-layout: fixed;
  min-width: 640px;
}

.article-block .compare-table-main th:nth-child(1),
.article-block .compare-table-main td:nth-child(1) { width: 15%; }
.article-block .compare-table-main th:nth-child(2),
.article-block .compare-table-main td:nth-child(2) { width: 19%; }
.article-block .compare-table-main th:nth-child(3),
.article-block .compare-table-main td:nth-child(3) { width: 13%; }
.article-block .compare-table-main th:nth-child(4),
.article-block .compare-table-main td:nth-child(4) { width: 23%; }
.article-block .compare-table-main th:nth-child(5),
.article-block .compare-table-main td:nth-child(5) { width: 20%; }
.article-block .compare-table-main th:nth-child(6),
.article-block .compare-table-main td:nth-child(6) { width: 10%; }

.article-block .compare-table-main td,
.article-block .compare-table-main th {
  overflow-wrap: normal;
  word-break: normal;
}

.article-block .compare-table-main td:first-child {
  white-space: normal;
}

/* WordPress core block-library CSS puts a 1px solid border on every side of
   every <td>/<th> (.wp-block-table td,.wp-block-table th{border:1px solid}),
   which is what shows as the vertical rule between columns. Zero every side
   with !important first, then re-add just the row-separator bottom border
   (also !important, since a plain declaration can't win against one) on
   <td> only - <th> stays borderless, same as before. */
.article-block .wp-block-table td,
.article-block .wp-block-table th {
  border-width: 0 !important;
}

.article-block .wp-block-table td {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--border) !important;
}

/* App/bookmaker header inside an editorial review block: logo and heading
   as one unit instead of a standalone image above a separate <h3>, on a
   soft gradient band so it reads as a clearly separate entry instead of
   running into the end of the previous app's block - the band itself
   provides the visual break, on top of the generous top margin. */
.article-block .app-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 12px;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
}

.article-block .app-head img {
  flex-shrink: 0;
  border-radius: 8px;
}

.article-block .app-head h3 {
  margin: 0;
}

/* Pros/cons under an app's review paragraph: framed card (same card
   language as .mini-card/.aside-card elsewhere). Two separate lists side by
   side - pros always on the left, cons always on the right - rather than one
   grid auto-flowing pro/con items into whichever column comes next; with an
   uneven count (e.g. 3 pros, 1 con) that auto-flow interleaved a con into the
   middle of the pros column, which read as mismatched. Stacks on mobile. */
.article-block .app-pros-cons {
  display: flex;
  gap: 6px 24px;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.article-block .app-pros-cons .pros-list,
.article-block .app-pros-cons .cons-list {
  flex: 1 1 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-block .app-pros-cons li {
  padding-left: 22px;
  position: relative;
  color: var(--text);
  margin-bottom: 0;
}

/* .article-block ul > li::before (the generic round bullet dot) also matches
   these <li>s and, despite losing on `content`, still wins any property this
   rule does not itself set (CSS cascades per-property, not per-rule) - its
   width/height/background/border-radius/top were bleeding through behind the
   +/- character as a small circle. Reset all of them explicitly here so this
   rule fully owns the marker instead of only overriding `content`. */
.article-block .app-pros-cons li.pro::before,
.article-block .app-pros-cons li.con::before {
  position: absolute;
  left: 2px;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-weight: 700;
  /* Same colour and weight for both marks - a plain hyphen-minus (not the
     visually heavier en dash) pairs with "+" at matching stroke weight, so
     pro/con read as one consistent system instead of "thin blue" vs
     "thick black". */
  color: var(--accent);
}

.article-block .app-pros-cons li.pro::before {
  content: "+";
}

.article-block .app-pros-cons li.con::before {
  content: "-";
}

@media (max-width: 480px) {
  .article-block .app-pros-cons {
    flex-direction: column;
    gap: 6px;
  }
}

/* "Best for" line under an app's pros/cons: a small pill-shaped tag label
   instead of bold text with a colon. */
.article-block .app-best-for {
  color: var(--text);
}

.article-block .best-for-tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 10px;
  margin-right: 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* Every other table on the site (betting/casino/NBA/etc.) has an "App,
   Best for, Key fact, Rating, Licence"-style structure (4-5 columns, no
   rank number any more) and inherited the same bug the old home-page table
   had: table-layout: auto let an unlucky column end up narrower than a
   single word, so names like "1xBet" or "Melbet" split mid-word
   ("1xB-et"). Fixed layout (set on the shared .article-block table rule
   above, with a wide enough min-width) already prevents that; this just
   makes sure wrapping only ever happens at a space, never mid-word, and
   gives the app-name column - always first, always short, across every
   shape this table comes in - just enough room that it never needs to
   wrap at all, without reserving so much that a long column like Key fact
   is left to split the remaining space into fragments. No nowrap on the
   last column here, unlike compare-table-main/-bonus below: on most of
   these tables the last column is Licence, which can be long ("UK
   Gambling Commission") and would overflow its cell if forced onto one
   line. The home-page tables (.compare-table-main / .compare-table-bonus)
   have their own full sets of column widths above, which win here on
   specificity. */
.article-block table td,
.article-block table th {
  overflow-wrap: normal;
  word-break: normal;
}

.article-block table td:first-child,
.article-block table th:first-child {
  width: 110px;
  white-space: nowrap;
}

/* The 3rd column is "Key fact" (or similarly long free text) on every one
   of these tables except a couple of shorter 4-column ones, where giving
   it extra room just leaves harmless blank space rather than squeezing
   anything else. Worth the trade-off: without this, the longest column on
   the page got the exact same width as short ones like Rating, so its
   sentence-length text fragmented into a wall of tiny wrapped lines. */
.article-block table td:nth-child(3),
.article-block table th:nth-child(3) {
  width: 28%;
}

/* App pages (single posts): tables authored in the editor (Promo / Value,
   Method / Min Deposit / Processing Time / Fees, etc.) are not the "App, Best
   for, Key fact" comparison shape the first-column and third-column rules
   above were written for. A 110px nowrap first column let long text such as
   "OVO, DANA, LinkAja, ShopeePay, QRIS" spill over into the next column.
   Scoped to .single-post + core table blocks only, so the home page,
   category pages and collections (.table-scroll) keep their own sizing. */
.single-post .article-block .wp-block-table table td:first-child,
.single-post .article-block .wp-block-table table th:first-child {
  width: auto;
  white-space: normal;
}

.single-post .article-block .wp-block-table table td:nth-child(3),
.single-post .article-block .wp-block-table table th:nth-child(3) {
  width: auto;
}

/* Developer pages: editor tables are short key/value or 2-3 column tables, not the
   "App, Best for, Key fact" comparison shape. Same fix as for app pages: no fixed
   first/third column, normal wrapping, no forced minimum width. Scoped to
   .single-developer so home, categories and collections keep their sizing. */
.single-developer .article-block .wp-block-table table {
  min-width: 0;
  table-layout: auto;
}

.single-developer .article-block .wp-block-table table td:first-child,
.single-developer .article-block .wp-block-table table th:first-child {
  width: auto;
  white-space: normal;
}

.single-developer .article-block .wp-block-table table td:nth-child(3),
.single-developer .article-block .wp-block-table table th:nth-child(3) {
  width: auto;
}

.compare-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.compare-logo img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Rating star in the comparison table: same colour as the review/rating
   stars used elsewhere on the site (.mini-card .meta .star etc.), instead
   of the default text colour the bare &#9733; character rendered in. */
.article-block table .star {
  color: var(--rating);
}

.article-block .wp-block-table tbody tr:last-child td {
  border-bottom-width: 0 !important;
}

/* Real <thead>/<th> tables get the header treatment there. Tables authored
   without a <thead> at all (everything as plain <td> in one <tbody>) get it
   applied to their first row instead - :not(:has(thead)) keeps the two rules
   from double-matching the same table (tr:first-child alone would otherwise
   match both the thead's row AND the tbody's first row, since each is the
   first child of its own parent). The background tint alone marks it as a
   header row, so it doesn't need its own border; corner rounding is handled
   by the wrapper's overflow: hidden above, not here. */
.article-block table th,
.article-block table thead td,
.article-block table:not(:has(thead)) tbody tr:first-child td {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  text-align: left;
  border: 0;
}

.article-block table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.article-block table th {
  padding: 12px 14px;
  vertical-align: top;
}

.article-block table tbody tr:last-child td {
  border-bottom: 0;
}

.article-block table tbody tr:hover td {
  background: var(--surface-muted);
}

/* Definition-style bullet lists ("App Features": each <li> starts with a bold
   term) as full-width icon rows with a divider, instead of the plain
   dot-bullet list below. adc_inject_feature_list_icons() in
   functions.php detects the original <li><strong>Label</strong>... structure
   server-side, rewrites it to <li><span class="feature-icon ...">
   <span class="feature-text"><strong>...</strong></span></li>, and tags the
   <li> with data-adc-icon-done - so :has() must match on THAT marker here,
   not on the original <strong>-first-child shape, which no longer exists by
   the time this reaches the browser. Lists the filter didn't touch (no bold
   first term) keep the plain dot-bullet style above. The icon itself is a
   CSS mask-image, not an inline <svg>, because the template runs this
   content through wp_kses_post() on output, which strips <svg>/<path> as
   disallowed tags. */
.article-block ul:has(> li[data-adc-icon-done]) {
  padding-left: 0;
  list-style: none;
}

.article-block ul:has(> li[data-adc-icon-done]) > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
}

.article-block ul:has(> li[data-adc-icon-done]) > li:last-child {
  border-bottom: 0;
}

.article-block ul:has(> li[data-adc-icon-done]) > li::before {
  content: none;
}

.article-block ul:has(> li[data-adc-icon-done]) > li .feature-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.article-block ul:has(> li[data-adc-icon-done]) > li .feature-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background-color: var(--accent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.article-block ul:has(> li[data-adc-icon-done]) > li .feature-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.feature-icon--bell::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22/%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22/%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22/%3E%3C/svg%3E");
}

.feature-icon--lock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22/%3E%3C/svg%3E");
}

.feature-icon--headset::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2014v-2a9%209%200%200%201%2018%200v2%22/%3E%3Cpath%20d%3D%22M21%2015.5a2.5%202.5%200%200%201-2.5%202.5H17v-6h1.5a2.5%202.5%200%200%201%202.5%202.5z%22/%3E%3Cpath%20d%3D%22M3%2015.5A2.5%202.5%200%200%200%205.5%2018H7v-6H5.5A2.5%202.5%200%200%200%203%2015.5z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2014v-2a9%209%200%200%201%2018%200v2%22/%3E%3Cpath%20d%3D%22M21%2015.5a2.5%202.5%200%200%201-2.5%202.5H17v-6h1.5a2.5%202.5%200%200%201%202.5%202.5z%22/%3E%3Cpath%20d%3D%22M3%2015.5A2.5%202.5%200%200%200%205.5%2018H7v-6H5.5A2.5%202.5%200%200%200%203%2015.5z%22/%3E%3C/svg%3E");
}

.feature-icon--gauge::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2014%2015%209%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M4%2014a8%208%200%201%201%2016%200%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2014%2015%209%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M4%2014a8%208%200%201%201%2016%200%22/%3E%3C/svg%3E");
}

.feature-icon--smartphone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2220%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%2211%22%20y1%3D%2218%22%20x2%3D%2213%22%20y2%3D%2218%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2220%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%2211%22%20y1%3D%2218%22%20x2%3D%2213%22%20y2%3D%2218%22/%3E%3C/svg%3E");
}

.feature-icon--shield::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.4%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202%204%206v6c0%205%203.5%208.5%208%2010%204.5-1.5%208-5%208-10V6l-8-4z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.4%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202%204%206v6c0%205%203.5%208.5%208%2010%204.5-1.5%208-5%208-10V6l-8-4z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E");
}

.feature-icon--wallet::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2z%22/%3E%3Cpath%20d%3D%22M16%207V5a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v2%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213%22%20r%3D%221.5%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2z%22/%3E%3Cpath%20d%3D%22M16%207V5a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v2%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2213%22%20r%3D%221.5%22/%3E%3C/svg%3E");
}

.feature-icon--heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.6l-1-1a5.5%205.5%200%201%200-7.8%207.8l1%201L12%2021l7.8-7.6%201-1a5.5%205.5%200%200%200%200-7.8z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.6l-1-1a5.5%205.5%200%201%200-7.8%207.8l1%201L12%2021l7.8-7.6%201-1a5.5%205.5%200%200%200%200-7.8z%22/%3E%3C/svg%3E");
}

.feature-icon--check::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.4%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.4%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E");
}

/* Callout box for important notes. Applies to the standard Quote block
   (<blockquote>) - editors can use it going forward for warnings/disclaimers;
   existing plain-paragraph disclaimers aren't auto-converted. */
.article-block blockquote {
  position: relative;
  margin: 0 0 16px;
  padding: 14px 16px 14px 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.article-block blockquote::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.article-block blockquote p {
  margin: 0;
  color: inherit;
}

/* Monospace treatment for hashes/technical strings wrapped in <code> */
.article-block code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-muted);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  word-break: break-all;
}

.read-more-toggle {
  margin-top: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.read-more-toggle:hover {
  background: var(--accent-soft);
}

.collapsible {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.collapsible.is-open {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* ---------- Comparison table ---------- */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.compare-table thead th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.compare-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table tbody tr:hover {
  background: var(--surface-muted);
}

.compare-table .app-cell {
  color: var(--accent-strong);
  font-weight: 700;
  white-space: nowrap;
}

.yes-mark,
.limited-mark,
.rating-cell {
  font-weight: 700;
}

.yes-mark {
  color: var(--success-strong);
}

.limited-mark {
  color: var(--warning);
}

.rating-cell {
  color: var(--accent-strong);
  font-weight: 700;
}

.visit-form {
  margin: 0;
}

.visit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 13px;
}

/* ---------- FAQs ---------- */
.faq-wrap {
  padding: 8px 16px;
  margin-bottom: 16px;
}

.faq-wrap h2 {
  padding-top: 12px;
}

.faq-item {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.faq-wrap .faq-item:first-of-type {
  border-top: 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  color: var(--accent-strong);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent);
  font-size: 20px;
  font-weight: 400;
  transition: transform 200ms ease;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-item p {
  margin: 10px 0 0;
  color: var(--text-muted);
}

/* ---------- Related topics & TOC ---------- */
.related-topics {
  margin-bottom: 24px;
}

.related-topics h2 {
  font-size: 18px;
}

.related-topics .meta {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.related-topics ul,
.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.related-topics a,
.toc a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
	
  color: var(--text);
  font-size: 13px;
}

@media (max-width: 640px) {
.related-topics a,
.toc a {
	padding: 0px 2px;
	border:0;
	
	}
	
}

.related-topics a {
  font-weight: 500;
}

.toc a {
  font-weight: 600;
}

.related-topics a:hover,
.toc a:hover {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

.toc {
  margin-bottom: 20px;
}

#versions {
  margin-bottom: 16px;
}

/* App page mobile anchors: remove only the pill background on small screens. */
@media (max-width: 640px) {
  .app-toc a {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .app-toc a:hover,
  .app-toc a:focus-visible {
    background: transparent;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 0;
  padding-block: 32px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 20px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand .legal {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.footer-brand .legal a {
  color: var(--accent);
}

.footer-col h4 {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.footer-col ul {
  display: grid;
  gap: 8px;
}

.footer-col a {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  max-width: 150px;
}

.footer-socials img {
  width: auto;
  height: 22px;
  max-width: 150px;
  object-fit: contain;
}

/* =====================================================
   Product page — app.html specific
   ===================================================== */

.product-hero {
  padding: 24px;
  margin-bottom: 20px;
  background-image:
    radial-gradient(900px 220px at 8% -15%, rgba(23, 107, 255, .10), transparent 65%),
    radial-gradient(700px 240px at 105% 0%, rgba(234, 242, 255, .90), transparent 60%);
  box-shadow: var(--shadow);
}

.hero-top {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 20px;
}

.hero-top .app-icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

.hero-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-title-row h1 {
  margin: 0;
  font-size: 30px;
}

.dev-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
	margin-bottom: 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* Popover */
.popover-wrap {
  position: relative;
  display: inline-flex;
}

.popover-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success-strong);
  transition: var(--transition);
}

.popover-trigger.official-trigger,
.popover-trigger.verified-trigger {
  background: transparent;
  border-radius: 0;
}

.popover-trigger.official-trigger {
  color: #43bb4d;
}

.popover-trigger.verified-trigger {
  color: var(--accent);
}

.official-app-label {
  color: #43bb4d;
  font-weight: 600;
}

.popover-trigger:hover {
  transform: scale(1.08);
}

.popover-trigger:focus-visible,
.shot-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.popover-trigger svg,
.popover-trigger img {
  width: 14px;
  height: 14px;
}

.popover-trigger.official-trigger img,
.popover-trigger.verified-trigger img {
  width: 16px;
  height: 16px;
  display: block;
}

.popover-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  display: none;
  min-width: 220px;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-strong);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  line-height: 1.4;
  transform: translateX(-50%);
}

.popover-content::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--accent-strong);
  rotate: 45deg;
  transform: translateX(-50%);
}

.popover-wrap.open .popover-content,
.popover-wrap:hover .popover-content,
.popover-wrap:focus-within .popover-content {
  display: block;
}

/* Stats & download */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.stat {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  text-align: left;
}

.stat .stat-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stat .stat-value {
  margin: 4px 0 0;
  color: var(--accent-strong);
  font-size: 16px;
  font-weight: 600;
}

.stat .stat-sub {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
}

.download-form {
  margin: 20px 0 0;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 16px 24px;
  font-size: 18px;
  box-shadow: var(--accent-shadow);
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--accent-shadow-lg);
}

.download-btn svg {
  width: 22px;
  height: 22px;
}

.download-btn .size {
  font-size: 13px;
  font-weight: 600;
  opacity: .85;
}

/* Screenshots & lightbox */
.screenshots {
  margin-bottom: 20px;
}

.shots-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--border);
}

.shots-grid::-webkit-scrollbar {
  height: 6px;
}

.shots-grid::-webkit-scrollbar-track {
  background: var(--border);
  border-radius: 3px;
}

.shots-grid::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

.shot-btn {
  flex: 0 0 clamp(100px, 18vw, 160px);
  width: clamp(100px, 18vw, 160px);
  min-width: clamp(100px, 18vw, 160px);
  overflow: hidden;
  padding: 0;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  scroll-snap-align: start;
}

.shot-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.shot-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.shot-btn:hover img {
  transform: scale(1.02);
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, .85);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
}

.lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 56px;
  /* pointer-events: none — клики на пустую область идут к dialog,
     где мы их ловим и закрываем лайтбокс по координатам */
  pointer-events: none;
}

/* Восстанавливаем pointer-events на интерактивных элементах внутри */
.lightbox-inner > *,
.lightbox-img,
.lb-btn {
  pointer-events: auto;
}

.lightbox-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dialog);
}

.lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}

.lb-btn:hover {
  background: rgba(255, 255, 255, .25);
}

.lb-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.lb-close {
  top: 16px;
  right: 16px;
}

.lb-prev {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.lb-next {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.lb-btn svg {
  width: 22px;
  height: 22px;
}

/* Specs */
.spec-group {
  margin-bottom: 24px;
}

.spec-group > h3 {
  margin-bottom: 12px;
  font-size: 16px;
}

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

.spec-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: var(--transition);
}

.spec-item:hover {
  border-color: var(--border-strong);
}

.spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.spec-icon svg {
  width: 20px;
  height: 20px;
}

.spec-item strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.spec-item p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* Rating & Reviews */
.rating-block {
  padding: 20px;
  margin-bottom: 20px;
}

.rating-summary {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.rating-score {
  text-align: center;
}

.rating-score .num {
  margin: 0;
  color: var(--accent-strong);
  font-size: 48px;
  font-weight: 700;
  line-height: .95;
}

.rating-score .total-stars {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
}

.rating-score .reviews-count {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
}

.rating-bars {
  display: grid;
  gap: 6px;
}

.rating-row {
  display: grid;
  grid-template-columns: 36px 1fr 34px;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.2;
}

.rating-row .bar {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
}

.rating-row .bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rating), var(--accent-hover));
}

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

.review-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-head .name {
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 700;
}

.review-head .date {
  color: var(--text-soft);
  font-size: 11px;
}

.review-stars {
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 1px;
}

.review-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

/* Versions */
.versions-list {
  display: grid;
  gap: 12px;
}

#versions .versions-list {
  margin-bottom: 0;
}

.version-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
}

.version-card .version-info {
  display: grid;
  gap: 2px;
}

.version-card .v-name {
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 700;
}

.version-card .v-meta {
  color: var(--text-muted);
  font-size: 12px;
}

.version-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
}

.version-download-btn svg {
  width: 16px;
  height: 16px;
}

/* Small page-specific helpers */
.cat-top-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.verified-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.verified-mark svg {
  width: 11px;
  height: 11px;
}


/* ---------- Search results ---------- */
.search-intro {
  margin-bottom: 22px;
}

.search-intro h1 em {
  font-style: italic;
}

.search-results-list {
  counter-reset: search-results;
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.search-results-list__item {
  counter-increment: search-results;
  min-width: 0;
}

.search-results-list__link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.search-results-list__link::before {
  content: counter(search-results);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.search-results-list__title {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results-list__meta {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.search-results-list__link:hover {
  color: var(--text);
  text-decoration: none;
}

.search-results-list__link:hover .search-results-list__title {
  color: var(--link-hover);
  text-decoration: underline;
}

main.page .search-no-results {
  max-width: 720px;
  margin: 0 0 32px;
  color: var(--text-muted);
}

main.page .search-no-results h2 {
  color: var(--text);
}

@media (max-width: 767px) {
  .search-results-list {
    gap: 12px;
  }

  .search-results-list__link {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
  }

  .search-results-list__meta {
    grid-column: 2;
    text-align: left;
  }

  .search-results-list__title {
    white-space: normal;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .top-downloads-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .top-downloads-grid {
    gap: 16px;
  }

  .mini-grid.cols-4,
  .mini-grid.cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid > aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .shots-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 19px;
  }

  .header-inner {
    height: 56px;
    gap: 8px;
  }

  .search-form {
    display: none;
  }

  .header-search-toggle {
    display: inline-flex;
  }

  .brand img,
  .brand svg {
    height: 36px;
	  margin-left: 10px;
  }

  .brand span.brand-text {
    display: inline;
    font-size: 15px;
  }

  .menu-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .product-hero {
    padding: 16px;
  }

  .hero-top {
    grid-template-columns: 72px 1fr;
    gap: 14px;
  }

  .hero-top .app-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-card);
  }

  .hero-title-row h1 {
    font-size: 22px;
  }

  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
  }

  .stat {
    grid-column: span 2;
    min-height: 74px;
    padding: 10px 12px;
  }

  .stat .stat-value {
    font-size: 14px;
  }

  .stat:nth-child(5) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    min-height: auto;
    padding: 11px 14px;
  }

  .stat:nth-child(5) .stat-value {
    margin-top: 0;
    font-size: 16px;
  }

  .download-form {
    margin-top: 14px;
  }

  .download-btn {
    padding: 14px 20px;
  }

  .screenshots {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .shots-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .shots-grid::-webkit-scrollbar {
    height: 6px;
  }

  .shot-btn {
    flex: 0 0 clamp(88px, 24vw, 108px);
    width: clamp(88px, 24vw, 108px);
    min-width: clamp(88px, 24vw, 108px);
    max-width: clamp(88px, 24vw, 108px);
    aspect-ratio: 9 / 16;
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .mini-grid {
    gap: 10px;
  }

  .mini-grid.cols-4,
  .mini-grid.cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-card {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 9px;
    padding: 9px;
    border-radius: var(--radius-md);
  }

  .mini-card-media,
  .mini-card-media .app-icon,
  .mini-card > .app-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .mini-card-body {
    gap: 4px;
    padding-top: 0;
  }

  .mini-card .name {
    font-size: 12px;
    line-height: 1.15;
  }

  .mini-card .meta {
    gap: 4px;
    font-size: 11px;
  }

  .mini-card .platform-icons,
  .mini-card .platform-icons svg,
  .mini-card .platform-icons img {
    width: 14px;
    height: 14px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
  }

  .footer-brand,
  .footer-col {
    width: min(100%, 320px);
  }

  .footer-col h4,
  .footer-col ul {
    text-align: left;
  }

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

  .spec-grid {
    grid-template-columns: 1fr;
  }

  .rating-block {
    padding: 16px;
  }

  .rating-summary {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .rating-score {
    align-self: start;
    text-align: left;
  }

  .rating-score .num {
    font-size: 44px;
  }

  .rating-score .total-stars {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  .rating-score .reviews-count {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  .rating-bars {
    gap: 5px;
    padding-top: 4px;
  }

  .rating-row {
    grid-template-columns: 24px minmax(0, 1fr) 30px;
    gap: 8px;
    font-size: 12px;
  }

  .rating-row .bar {
    height: 6px;
  }
}

@media (max-width: 480px) {
  .top-download-card {
    column-gap: 12px;
    padding: 16px;
  }

  .top-card-icon-link {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
}

/* =====================================================
   Best / Top listing
   ===================================================== */

.best-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.best-item {
  display: grid;
  grid-template-columns: 32px 64px 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: box-shadow .15s;
}

.best-item:hover {
  box-shadow: var(--shadow);
}

.best-item-rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  min-width: 28px;
}

.best-item-icon .app-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-card);
  display: block;
}

.best-item-body {
  min-width: 0;
}

.best-item-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.best-item-name a {
  color: var(--accent-strong);
  text-decoration: none;
}

.best-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.best-item-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.best-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.best-item-details {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 640px) {
  .best-item {
    grid-template-columns: 28px 48px 1fr;
    grid-template-rows: auto auto;
  }
  .best-item-action {
    grid-column: 2 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

/* =====================================================
   Rate My Post widget wrapper
   ===================================================== */

.rmp-widget-wrap {
  margin-top: 24px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.rmp-widget-title,
.rmp-widget-wrap h2,
.rmp-widget-wrap h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

.rmp-widget-hint {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* =====================================================
   CF7 Review Form
   ===================================================== */

.review-form-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-form-wrap .wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.review-form-wrap .wpcf7-form input[type="text"],
.review-form-wrap .wpcf7-form input[type="email"],
.review-form-wrap .wpcf7-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .15s;
}

.review-form-wrap .wpcf7-form input[type="text"]:focus,
.review-form-wrap .wpcf7-form input[type="email"]:focus,
.review-form-wrap .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.review-form-wrap .wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

.review-form-wrap .wpcf7-submit {
  align-self: flex-start;
  padding: 12px 28px;
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}

.review-form-wrap .wpcf7-submit:hover {
  opacity: .9;
}

.review-form-wrap .wpcf7-response-output {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-top: 8px;
}

.section-lead {
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* =====================================================
   Editor card
   ===================================================== */

.editor-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.editor-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  flex-shrink: 0;
}

.editor-name {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
}

.editor-position {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 8px;
}

.editor-short-bio {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  max-width: 480px;
}

/* =====================================================
   ADC Rating Widget (custom, replaces Rate My Post)
   ===================================================== */

.adc-rating-widget {
  text-align: center;
  padding: 24px;
}

.adc-widget-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text);
}

.adc-stars {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
}

.adc-star {
  background: none;
  border: none;
  font-size: 2.4rem;
  color: #ccc;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color .1s, transform .1s;
}

.adc-star:hover,
.adc-star.active {
  color: #f5a623;
}

.adc-star:hover {
  transform: scale(1.15);
}

.adc-star[disabled] {
  cursor: default;
  transform: none;
}

.adc-vote-hint {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.adc-vote-stats {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.adc-rating-widget.adc-voted .adc-vote-hint {
  color: var(--accent);
  font-weight: 600;
}

.adc-rating-widget.adc-loading .adc-stars {
  opacity: .5;
  pointer-events: none;
}

/* ── Developer logo image ────────────────────────────── */
.dev-avatar--img {
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--card-bg);
  border: 1px solid var(--border);
}

/* Front page description paragraph */
.front-desc {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 640px;
}

/* Reviewer / editor photo (image instead of initials) */
.avatar--img {
  border-radius: 50%;
  object-fit: cover;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* App subtitle under developer */
.app-subtitle-text {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Developer "By" prefix */
.dev-by {
  color: var(--text-muted);
  font-size: 13px;
  margin-right: 2px;
}

/* Developer link — grey */
.dev-link-grey {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
}

.dev-link-grey:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ── Best listing stars fix ── */
.best-item-rating .stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.best-item-rating .star {
  display: inline-block;
  fill: none;
  stroke: var(--text-muted);
  vertical-align: middle;
}
.best-item-rating .star.filled {
  fill: var(--accent);
  stroke: var(--accent);
}
.best-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}
.best-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  list-style: none;
}
.best-item-icon img,
.best-item-icon .icon-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #f0f0f0);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}
.best-item-rank {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  min-width: 28px;
  text-align: center;
}
.best-item-name {
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  color: var(--text);
}
.best-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0;
}
.best-item-info {
  flex: 1;
  min-width: 0;
}
.best-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}
.best-list {
  padding: 0;
  margin: 0;
}
.best-page .section-title {
  font-size: 18px;
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .best-layout {
    grid-template-columns: 1fr;
  }
  .best-item {
    flex-wrap: wrap;
  }
  .best-item-actions {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ── Best listing mobile layout fix ── */
@media (max-width: 767px) {
  .best-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    align-items: center;
  }
  .best-item-rank   { grid-column: 1; grid-row: 1; }
  .best-item-icon   { grid-column: 2; grid-row: 1; }
  .best-item-info   { grid-column: 3; grid-row: 1; }
  .best-item-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-left: 0;
  }
  .best-item-actions .platform-chip { flex: 1; justify-content: center; }
}

/* ── Best item actions — right aligned ── */
.best-item-actions {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* App review form */
.review-form-block,
.review-form-wrap,
.adc-cf7-app-review,
.article-block .wpcf7 {
  margin-top: 28px;
}

.review-form-block h3,
.article-block .wpcf7 + h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
}

.review-form-wrap,
.adc-cf7-app-review,
.article-block .wpcf7 {
  max-width: 820px;
}

.review-form-wrap .wpcf7-form,
.adc-cf7-app-review .wpcf7-form,
.article-block .wpcf7-form {
  display: grid;
  gap: 18px;
  width: 100%;
}

.review-form-wrap .wpcf7-form p,
.adc-cf7-app-review .wpcf7-form p,
.article-block .wpcf7-form p,
.review-form-wrap .adc-form-row,
.adc-cf7-app-review .adc-form-row,
.article-block .adc-form-row {
  margin: 0;
}

.review-form-wrap .adc-form-grid,
.adc-cf7-app-review .adc-form-grid,
.article-block .adc-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.review-form-wrap .adc-form-row--full,
.adc-cf7-app-review .adc-form-row--full,
.article-block .adc-form-row--full {
  grid-column: 1 / -1;
}

.review-form-wrap .wpcf7-form label,
.review-form-wrap .adc-form-row label,
.adc-cf7-app-review .wpcf7-form label,
.adc-cf7-app-review .adc-form-row label,
.article-block .wpcf7-form label,
.article-block .adc-form-row label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.review-form-wrap .wpcf7-form input:not([type="submit"]),
.review-form-wrap .wpcf7-form select,
.review-form-wrap .wpcf7-form textarea,
.adc-cf7-app-review .wpcf7-form input:not([type="submit"]),
.adc-cf7-app-review .wpcf7-form select,
.adc-cf7-app-review .wpcf7-form textarea,
.article-block .wpcf7-form input:not([type="submit"]),
.article-block .wpcf7-form select,
.article-block .wpcf7-form textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 13px 15px;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(6, 19, 34, .02);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.review-form-wrap .wpcf7-form input:not([type="submit"]):focus,
.review-form-wrap .wpcf7-form select:focus,
.review-form-wrap .wpcf7-form textarea:focus,
.adc-cf7-app-review .wpcf7-form input:not([type="submit"]):focus,
.adc-cf7-app-review .wpcf7-form select:focus,
.adc-cf7-app-review .wpcf7-form textarea:focus,
.article-block .wpcf7-form input:not([type="submit"]):focus,
.article-block .wpcf7-form select:focus,
.article-block .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.review-form-wrap .wpcf7-form select,
.adc-cf7-app-review .wpcf7-form select,
.article-block .wpcf7-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.review-form-wrap .wpcf7-form textarea,
.adc-cf7-app-review .wpcf7-form textarea,
.article-block .wpcf7-form textarea {
  min-height: 180px;
  resize: vertical;
}

.review-form-wrap .wpcf7-submit,
.review-form-wrap .adc-review-submit,
.adc-cf7-app-review .wpcf7-submit,
.adc-cf7-app-review .adc-review-submit,
.article-block .wpcf7-submit,
.article-block .adc-review-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 168px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: #fff;
  padding: 14px 26px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--accent-shadow);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.review-form-wrap .wpcf7-submit:hover,
.review-form-wrap .adc-review-submit:hover,
.adc-cf7-app-review .wpcf7-submit:hover,
.adc-cf7-app-review .adc-review-submit:hover,
.article-block .wpcf7-submit:hover,
.article-block .adc-review-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--accent-shadow-lg);
}

.review-form-wrap .wpcf7-not-valid-tip,
.adc-cf7-app-review .wpcf7-not-valid-tip,
.article-block .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
}

.review-form-wrap .wpcf7-response-output,
.adc-cf7-app-review .wpcf7-response-output,
.article-block .wpcf7-response-output {
  margin: 4px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .review-form-wrap .adc-form-grid,
  .adc-cf7-app-review .adc-form-grid,
  .article-block .adc-form-grid {
    grid-template-columns: 1fr;
  }

  .review-form-wrap .wpcf7-submit,
  .review-form-wrap .adc-review-submit,
  .adc-cf7-app-review .wpcf7-submit,
  .adc-cf7-app-review .adc-review-submit,
  .article-block .wpcf7-submit,
  .article-block .adc-review-submit {
    width: 100%;
  }
}

/* App written reviews */
.app-reviews-list {
  display: grid;
  gap: 18px;
}

.app-reviews-list h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.15;
  letter-spacing: -.035em;
  font-weight: 560;
}

.review-form-wrap .adc-rating-select,
.adc-cf7-app-review .adc-rating-select,
.article-block .adc-rating-select {
  font-size: 18px;
  letter-spacing: .01em;
}

.app-reviews-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
}

.app-review-items {
  display: grid;
  gap: 14px;
}

.app-review-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.app-review-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.app-review-card__author {
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.app-review-card__date {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.app-review-card__rating {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.app-review-card__text {
  color: var(--text-muted);
  line-height: 1.65;
}

.app-review-card__text p {
  margin: 0;
}

.app-review-card__text p + p {
  margin-top: 10px;
}

.app-reviews-preview {
  margin-top: 28px;
}

.app-reviews-list--main-page .app-review-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .app-reviews-list--main-page .app-review-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .app-review-card {
    padding: 16px;
  }

  .app-review-card__head {
    display: grid;
    gap: 8px;
  }

  .app-reviews-list--main-page .app-review-items {
    grid-template-columns: 1fr;
  }
}

/* v61: Hide redundant TOC toggle on app pages; tab links remain visible. */
.single-post .toc-toggle,
.app-page .toc-toggle,
.toc-toggle {
  display: none !important;
}

/* v63: App Specs links should look like regular text with underline. */
.spec-item a,
.spec-item p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.spec-item a:hover,
.spec-item a:focus,
.spec-item p a:hover,
.spec-item p a:focus {
  color: inherit;
  text-decoration: underline;
}

/* ── Best listing: right-align action block on desktop ───────────── */
@media (min-width: 768px) {
  .best-item {
    display: flex;
    align-items: center;
  }

  .best-item-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .best-item-action,
  .best-item-actions {
    margin-left: auto;
    margin-right: 0;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
  }
}

/* v64: Keep horizontal scrolling inside app-page widgets on mobile. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  main.page,
  main.page > .container,
  .product-hero,
  .section,
  .faq-wrap,
  .article-block,
  .rating-block,
  .toc,
  .screenshots,
  .spec-group,
  .spec-grid,
  .mini-grid,
  .rating-summary,
  .footer-top,
  .footer-bottom {
    max-width: 100%;
    min-width: 0;
  }

  .product-hero,
  .section,
  .faq-wrap,
  .article-block,
  .rating-block,
  .spec-item,
  .mini-card,
  .app-review-card,
  .footer-brand,
  .footer-col {
    overflow-wrap: anywhere;
  }

  .screenshots {
    margin-inline: 0;
    padding-inline: 0;
    overflow: hidden;
  }

  .shots-grid {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .toc {
    overflow: hidden;
  }

  .toc ul {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .toc li {
    flex: 0 0 auto;
  }

  .menu-panel {
    inset: 0 0 0 0;
    width: auto;
    max-width: none;
  }
}


/* App review success popup */
.adc-review-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .46);
}

.adc-review-popup[hidden] {
  display: none;
}

.adc-review-popup__dialog {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.adc-review-popup__text {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.adc-review-popup__close {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.adc-cf7-app-review .wpcf7 form.sent .wpcf7-response-output,
.review-form-wrap .wpcf7 form.sent .wpcf7-response-output {
  display: none !important;
}

/* =====================================================
   Standard page hero
   ===================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 46px 32px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-card) + 8px);
  background:
    radial-gradient(circle at 8% 20%, rgba(80, 34, 255, .12), transparent 28%),
    radial-gradient(circle at 92% 25%, rgba(0, 180, 216, .14), transparent 24%),
    var(--surface);
  text-align: center;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 42px;
  background: var(--accent);
  opacity: .08;
  transform: rotate(45deg);
  pointer-events: none;
}

.page-hero::before {
  left: -90px;
  top: 36px;
}

.page-hero::after {
  right: -80px;
  bottom: -70px;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto;
}

.page-hero-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.page-hero-lead {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
}

.page-hero-desc {
  max-width: 760px;
  margin: 8px auto 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 767px) {
  .page-hero {
    margin-bottom: 20px;
    padding: 34px 18px;
  }

  .page-hero-lead {
    font-size: 15px;
  }
}

/* =====================================================
   Editors directory page
   ===================================================== */

.editors-directory-page {
  overflow-x: hidden;
}

.editors-directory-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 46px 32px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-card) + 8px);
  background:
    radial-gradient(circle at 8% 20%, rgba(80, 34, 255, .12), transparent 28%),
    radial-gradient(circle at 92% 25%, rgba(0, 180, 216, .14), transparent 24%),
    var(--surface);
  text-align: center;
}

.editors-directory-hero::before,
.editors-directory-hero::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 42px;
  background: var(--accent);
  opacity: .08;
  transform: rotate(45deg);
  pointer-events: none;
}

.editors-directory-hero::before {
  left: -90px;
  top: 36px;
}

.editors-directory-hero::after {
  right: -80px;
  bottom: -70px;
}

.editors-directory-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto;
}

.editors-directory-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.editors-directory-hero h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.editors-directory-lead {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
}

.editors-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.editor-directory-card {
  min-width: 0;
}

.editor-directory-card-link {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.editor-directory-card-link:hover,
.editor-directory-card-link:focus-visible {
  border-color: rgba(80, 34, 255, .32);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.editor-directory-avatar-wrap {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(80, 34, 255, .16), rgba(0, 180, 216, .16));
}

.editor-directory-avatar {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  object-fit: cover;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.editor-directory-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.editor-directory-name {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.editor-directory-position {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.editor-directory-bio {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.editor-directory-stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.editor-directory-stats span {
  display: block;
  padding: 8px 6px;
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
}

.editor-directory-stats b {
  display: block;
  color: var(--text);
  font-size: 16px;
}

.editors-directory-content .article-block {
  margin-top: 6px;
}

@media (max-width: 767px) {
  .editors-directory-hero {
    margin-bottom: 20px;
    padding: 34px 18px;
  }

  .editors-directory-lead {
    font-size: 15px;
  }

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

  .editor-directory-card-link {
    padding: 20px 16px;
  }
}

/* =====================================================
   Developers directory page
   ===================================================== */

.developers-directory-page {
  overflow-x: hidden;
}

.developers-directory-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  padding: 46px 32px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius-card) + 8px);
  background:
    radial-gradient(circle at 8% 20%, rgba(80, 34, 255, .12), transparent 28%),
    radial-gradient(circle at 92% 25%, rgba(0, 180, 216, .14), transparent 24%),
    var(--surface);
  text-align: center;
}

.developers-directory-hero::before,
.developers-directory-hero::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 42px;
  background: var(--accent);
  opacity: .08;
  transform: rotate(45deg);
  pointer-events: none;
}

.developers-directory-hero::before {
  left: -90px;
  bottom: -70px;
}

.developers-directory-hero::after {
  right: -80px;
  top: 36px;
}

.developers-directory-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0 auto;
}

.developers-directory-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.developers-directory-hero h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.developers-directory-lead {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.7;
}

.developers-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.developer-directory-card {
  min-width: 0;
}

.developer-directory-card-link {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.developer-directory-card-link:hover,
.developer-directory-card-link:focus-visible {
  border-color: rgba(80, 34, 255, .32);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.developer-directory-logo-wrap {
  display: block;
  width: 86px;
  height: 86px;
  border-radius: 26px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(80, 34, 255, .16), rgba(0, 180, 216, .16));
}

.developer-directory-logo {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  object-fit: cover;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
}

.developer-directory-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.developer-directory-name {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.developer-directory-legal {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.developer-directory-profile {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.developer-directory-stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.developer-directory-stats span {
  display: block;
  padding: 8px 6px;
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.developer-directory-stats b {
  display: block;
  color: var(--text);
  font-size: 16px;
}

.developer-directory-brands {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.developers-directory-content .article-block {
  margin-top: 6px;
}

@media (max-width: 767px) {
  .developers-directory-hero {
    margin-bottom: 20px;
    padding: 34px 18px;
  }

  .developers-directory-lead {
    font-size: 15px;
  }

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

  .developer-directory-card-link {
    padding: 20px 16px;
  }
}

/* Directory cards: keep the whole card clickable, underline only the title on hover. */
.editor-directory-card-link:hover,
.editor-directory-card-link:focus-visible,
.editor-directory-card-link:hover *,
.editor-directory-card-link:focus-visible *,
.developer-directory-card-link:hover,
.developer-directory-card-link:focus-visible,
.developer-directory-card-link:hover *,
.developer-directory-card-link:focus-visible * {
  text-decoration: none;
}

.editor-directory-card-link:hover .editor-directory-name,
.editor-directory-card-link:focus-visible .editor-directory-name,
.developer-directory-card-link:hover .developer-directory-name,
.developer-directory-card-link:focus-visible .developer-directory-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Front page hero uses the shared page hero layout with edge-to-edge top styling. */
body.home main.page > .container > .page-hero--home {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}

/* Mobile developers directory: center the card header/content while keeping the full card clickable. */
@media (max-width: 767px) {
  .developer-directory-card-link {
    align-items: center;
    text-align: center;
  }

  .developer-directory-logo-wrap {
    margin-inline: auto;
  }

  .developer-directory-body {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .developer-directory-stats {
    width: 100%;
  }
}

/* Review rating select: custom UI keeps the dropdown inside the form/card on mobile. */
.review-form-wrap .adc-rating-select--enhanced,
.adc-cf7-app-review .adc-rating-select--enhanced,
.article-block .adc-rating-select--enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.adc-rating-select-ui {
  position: relative;
  width: 100%;
  min-width: 0;
}

.adc-rating-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 13px 15px;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(6, 19, 34, .02);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.adc-rating-select-trigger:focus-visible,
.adc-rating-select-ui.is-open .adc-rating-select-trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.adc-rating-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adc-rating-select-arrow {
  width: 0;
  height: 0;
  margin-left: 12px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--text-muted);
  flex: 0 0 auto;
}

.adc-rating-select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  padding: 6px;
  box-sizing: border-box;
}

.adc-rating-select-menu[hidden] {
  display: none;
}

.adc-rating-select-option {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.adc-rating-select-option:hover,
.adc-rating-select-option:focus-visible,
.adc-rating-select-option.is-selected {
  outline: none;
  background: rgba(98, 27, 255, .10);
  color: var(--accent);
}

@media (max-width: 767px) {
  .review-form-wrap,
  .adc-cf7-app-review,
  .article-block .wpcf7,
  .review-form-wrap .wpcf7-form,
  .adc-cf7-app-review .wpcf7-form,
  .article-block .wpcf7-form,
  .review-form-wrap .adc-form-row,
  .adc-cf7-app-review .adc-form-row,
  .article-block .adc-form-row,
  .review-form-wrap .wpcf7-form label,
  .adc-cf7-app-review .wpcf7-form label,
  .article-block .wpcf7-form label,
  .adc-rating-select-ui,
  .adc-rating-select-trigger,
  .adc-rating-select-menu {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .adc-rating-select-option {
    white-space: nowrap;
  }
}

/* ---------- No-affiliate conversion popup ---------- */
button.platform-chip {
  font-family: inherit;
  cursor: pointer;
}

.adc-affiliate-popup-open,
.adc-affiliate-popup-open body {
  overflow: hidden;
}

.adc-affiliate-popup[hidden] {
  display: none !important;
}

.adc-affiliate-popup {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.adc-affiliate-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 19, 34, .68);
  backdrop-filter: blur(3px);
}

.adc-affiliate-popup__dialog {
  position: relative;
  width: min(900px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(6, 19, 34, .98));
  box-shadow: var(--shadow-dialog);
  color: var(--white);
}

.adc-affiliate-popup__dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 10%, rgba(23, 107, 255, .20), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(91, 156, 255, .18), transparent 28%);
}

.adc-affiliate-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  cursor: pointer;
}

.adc-affiliate-popup__close:hover {
  background: rgba(255, 255, 255, .16);
}

.adc-affiliate-popup__close svg {
  width: 18px;
  height: 18px;
}

.adc-affiliate-popup__head,
.adc-affiliate-popup__list {
  position: relative;
  z-index: 1;
}

.adc-affiliate-popup__head {
  padding: 34px 34px 18px;
  text-align: center;
}

.adc-affiliate-popup__eyebrow {
  margin: 0 0 6px;
  color: #ff735d;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.adc-affiliate-popup__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  font-weight: 700;
}

.adc-affiliate-popup__list {
  display: grid;
  gap: 14px;
  padding: 18px 34px 34px;
}

.adc-affiliate-popup__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(220, 227, 234, .90);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
}

.adc-affiliate-popup__logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--surface-soft);
}

.adc-affiliate-popup__logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--brand-gradient);
  font-weight: 700;
}

.adc-affiliate-popup__item-title {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 30px;
  line-height: 1.2;
	font-weight: 560;
	    font-family: Inter, "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	
}

.adc-affiliate-popup__stars {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.adc-affiliate-popup__body p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.adc-affiliate-popup__form {
  margin: 0;
}

.adc-affiliate-popup__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--accent-shadow);
  transition: var(--transition);
}

.adc-affiliate-popup__button:hover {
  background: var(--accent-hover);
}

@media (max-width: 640px) {
  .adc-affiliate-popup {
    padding: 14px;
  }

  .adc-affiliate-popup__dialog {
    max-height: 88vh;
    border-radius: 22px;
  }

  .adc-affiliate-popup__close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }

  .adc-affiliate-popup__head {
    padding: 60px 18px 14px;
  }

  .adc-affiliate-popup__list {
    padding: 14px 14px 18px;
  }

  .adc-affiliate-popup__item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .adc-affiliate-popup__logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .adc-affiliate-popup__form {
    grid-column: 1 / -1;
  }

  .adc-affiliate-popup__button {
    width: 100%;
  }
}

/* PWA/Web listing icon */
.platform-icons--pwa {
  width: auto !important;
  min-width: 24px;
  height: auto !important;
  color: #8a94a6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.platform-icons--pwa .pwa-icon {
  display: inline-block;
  color: inherit;
}

.mini-card .platform-icons--pwa {
  width: auto !important;
  min-width: 24px;
  height: 12px !important;
  margin-top: 2px;
}


.best-item-action .download-form,
.best-item-action .best-item-download-form {
  margin: 0;
}

.best-item-action .best-item-download-form {
  display: flex;
  justify-content: flex-end;
}

/* Fixed download button size in best/filter listings */
.best-item-action .platform-chip--primary {
  justify-content: center;
  width: 144px;
  min-height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
}

.best-item-action .platform-chip--primary .size {
  white-space: nowrap;
}

/* ---------- APK install HowTo block (/how-to-install-apk-on-android/, en/id/ph) ----------
   Moved out of an inline <style> block duplicated in each language's post
   content into the theme stylesheet. .apk-howto originally carried its own
   card look (padding/border/background/shadow/radius); since this block
   always renders inside page.php's <article class="section article-block">,
   which already provides that exact card, it produced two nested
   backgrounds. Dropped here so only the outer .article-block card remains. */
.apk-howto-wrap,
.apk-howto-wrap * {
  box-sizing: border-box;
}

.apk-howto-wrap {
  margin: 0;
  font-family: inherit;
  color: #162033;
}

.apk-howto {
  font-family: inherit;
}

.apk-howto__label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef6e6;
  color: #4f7f18;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.apk-howto h2 {
  margin: 0 0 8px;
  color: #071b46;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.18;
}

.apk-howto__intro {
  max-width: 760px;
  margin: 0 0 20px;
  color: #4b5870;
  font-size: 16px;
  line-height: 1.6;
}

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

.apk-step {
  padding: 18px;
  border: 1px solid #e3e8f1;
  border-radius: 18px;
  background: #f9fbff;
}

.apk-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.apk-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #071b46;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}

.apk-step__icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}

.apk-step h3 {
  margin: 0 0 10px;
  color: #071b46;
  font-size: 18px;
  line-height: 1.25;
}

.apk-step p {
  margin: 0;
  color: #4b5870;
  font-size: 14px;
  line-height: 1.55;
}

.apk-howto__note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f7f9fc;
  border: 1px solid #e3e8f1;
  color: #4b5870;
  font-size: 14px;
  line-height: 1.55;
}

.apk-howto__note strong {
  color: #071b46;
}

@media (max-width: 1100px) {
  .apk-howto__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .apk-howto__steps {
    grid-template-columns: 1fr;
  }

  .apk-step {
    padding: 16px;
  }
}