/* ==========================================================================
   NetReckon — Design System v4 "Blueprint"
   All-white · blue primary · orange accent · flat (no gradients)
   Plus Jakarta Sans / Source Sans 3
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink (dark chrome) */
  --ink-950: #FFFFFF;
  --ink-900: #FFFFFF;
  --ink-850: #FBFCFE;
  --ink-800: #F6F8FB;
  --ink-700: #EFF2F7;
  --ink-600: #E4E8F0;
  --ink-line: rgba(16, 24, 40, 0.09);

  /* Surface (light content) */
  --surface: #F8FAFD;
  --surface-2: #EFF2F7;
  --card: #FFFFFF;
  --line: #E6E9F0;
  --line-soft: #F0F2F7;

  /* Brand */
  --brand: #1D4ED8;
  --brand-strong: #1E40AF;
  --brand-soft: #E8F0FE;
  --brand-softer: #F5F8FF;
  --orange: #EA580C;
  --coral: #EA580C;
  /* legacy alias */
  --fuchsia: #EA580C;
  /* legacy alias */
  --aurora: #1D4ED8;
  /* flat — no gradients in v4 */
  --aurora-text: #EA580C;
  /* flat accent text */

  /* Text */
  --text: #101828;
  --text-2: #475467;
  --text-3: #98A2B3;
  --text-inv: #101828;
  --text-inv-2: #475467;
  --text-inv-3: #667085;

  /* Semantic */
  --star: #F59E0B;
  --good: #0FA97D;
  --good-soft: #E5F8F1;
  --bad: #F43F5E;
  --bad-soft: #FEEEF1;
  --info: #2E90FA;
  --info-soft: #EAF3FF;
  --warn: #F79009;
  --warn-soft: #FEF4E6;

  /* Type */
  --font-display: 'Hanken Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2.125rem;
  --fs-display: clamp(2.25rem, 4.5vw, 3.5rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-9: 2.25rem;
  --sp-11: 2.75rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-full: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-sm: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-md: 0 6px 16px rgba(16, 24, 40, 0.07), 0 2px 5px rgba(16, 24, 40, 0.05);
  --sh-lg: 0 16px 40px rgba(16, 24, 40, 0.10), 0 4px 10px rgba(16, 24, 40, 0.05);
  --sh-xl: 0 28px 70px rgba(16, 24, 40, 0.16), 0 8px 20px rgba(16, 24, 40, 0.07);
  --sh-brand: 0 6px 18px rgba(29, 78, 216, 0.22);
  --ring: 0 0 0 3px rgba(29, 78, 216, 0.16);

  /* Motion */
  --t-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container: 1200px;
  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 64px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--brand-strong);
}

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

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.72rem 1.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn i {
  font-size: 1.15em;
}

.btn:active {
  transform: scale(0.98);
}

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

.btn--brand {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}

.btn--brand:hover {
  color: #fff;
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.45);
  transform: translateY(-1px);
}

.btn--dark {
  background: var(--ink-800);
  color: #fff;
  border: 1px solid var(--ink-600);
}

.btn--dark:hover {
  background: var(--ink-700);
  color: #fff;
}

.btn--ghost-dark {
  background: rgba(16, 24, 40, 0.04);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.btn--ghost-dark:hover {
  background: rgba(16, 24, 40, 0.08);
  color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--ink-900);
  box-shadow: var(--sh-md);
}

.btn--white:hover {
  color: var(--brand-strong);
  transform: translateY(-1px);
  box-shadow: var(--sh-lg);
}

.btn--line {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
}

.btn--line:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn--soft {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.btn--soft:hover {
  background: #DBEAFE;
  color: var(--brand-strong);
}

.btn--sm {
  padding: 0.5rem 0.9rem;
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}

.btn--lg {
  padding: 0.95rem 1.9rem;
  font-size: var(--fs-base);
  border-radius: var(--r-lg);
}

.btn--full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Badges & chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.66rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--r-full);
}

.badge i {
  font-size: 1em;
}

.badge--brand {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.badge--good {
  background: var(--good-soft);
  color: var(--good);
}

.badge--warn {
  background: var(--warn-soft);
  color: #B85C00;
}

.badge--info {
  background: var(--info-soft);
  color: var(--info);
}

.badge--muted {
  background: var(--surface-2);
  color: var(--text-2);
}

.badge--glass {
  background: rgba(16, 24, 40, 0.05);
  color: #fff;
  border: 1px solid rgba(16, 24, 40, 0.12);
}

.badge--aurora {
  background: var(--aurora);
  color: #fff;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.pill i {
  color: var(--text-3);
  font-size: 1.05em;
}

/* Star rating */
.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--star);
  font-size: var(--fs-sm);
}

.stars--lg {
  font-size: var(--fs-lg);
  gap: 2px;
}

.stars i.ph.ph-star {
  color: #D0D5DD;
}

.stars--on-dark i.ph.ph-star {
  color: #D0D5DD;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-line);
  height: var(--header-h);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--aurora);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}

.logo__text {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.logo__text em {
  font-style: normal;
  color: #BFDBFE;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.main-nav__item {
  position: relative;
}

.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-inv-2);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.main-nav__link:hover,
.main-nav__link[aria-expanded="true"] {
  color: #fff;
  background: rgba(16, 24, 40, 0.04);
}

.main-nav__link i {
  font-size: 0.85em;
  transition: transform var(--t-fast);
}

.main-nav__link[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 236px;
  background: var(--ink-850);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 60;
}

.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dropdown--right {
  left: auto;
  right: 0;
}

.dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  font-size: var(--fs-sm);
  color: var(--text-inv-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.dropdown__link i {
  font-size: 1.15rem;
  color: var(--text-inv-3);
  transition: color var(--t-fast);
}

.dropdown__link:hover {
  background: rgba(29, 78, 216, 0.14);
  color: #fff;
}

.dropdown__link:hover i {
  color: #BFDBFE;
}

.dropdown__split {
  height: 1px;
  margin: var(--sp-2) 0;
  background: var(--ink-line);
}

.dropdown__head {
  padding: 0.55rem 0.8rem 0.65rem;
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: var(--sp-2);
}

.dropdown__head-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}

.dropdown__head-mail {
  font-size: var(--fs-xs);
  color: var(--text-inv-3);
}

.dropdown__link--danger,
.dropdown__link--danger i {
  color: #FB7185;
}

.dropdown__link--danger:hover {
  background: rgba(244, 63, 94, 0.12);
  color: #FDA4AF;
}

.dropdown__link--danger:hover i {
  color: #FDA4AF;
}

/* Search */
.search {
  flex: 1;
  max-width: 400px;
}

.search__box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 42px;
  padding: 0 0.9rem;
  background: rgba(16, 24, 40, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.search__box:focus-within {
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: var(--ring);
}

.search__box i {
  color: var(--text-inv-3);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-sm);
  color: #fff;
}

.search__input::placeholder {
  color: var(--text-inv-3);
}

.search__kbd {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.28rem 0.45rem;
  color: var(--text-inv-3);
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 6px;
}

/* User */
.user {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}

.user__btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0.6rem 0.32rem 0.35rem;
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}

.user__btn:hover,
.user__btn[aria-expanded="true"] {
  background: rgba(16, 24, 40, 0.04);
}

.user__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--aurora);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-inv-2);
}

.user__btn i {
  font-size: 0.8rem;
  color: var(--text-inv-3);
  transition: transform var(--t-fast);
}

.user__btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Mobile header buttons */
.header-mob {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.icon-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: 1.3rem;
  color: var(--text-inv-2);
  transition: background var(--t-fast), color var(--t-fast);
}

.icon-btn:hover {
  background: rgba(16, 24, 40, 0.04);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 220;
  width: min(340px, 88vw);
  height: 100dvh;
  background: var(--ink-900);
  border-left: 1px solid var(--ink-line);
  transform: translateX(105%);
  transition: transform var(--t-slow);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.drawer.is-open {
  transform: none;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ink-line);
}

.drawer__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  flex: 1;
}

.drawer__group {
  border-bottom: 1px solid var(--ink-line);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 0;
  font-size: var(--fs-base);
  font-weight: 500;
  color: #fff;
}

.drawer__link i {
  color: var(--text-inv-3);
  transition: transform var(--t-fast);
}

.drawer__link.is-open i {
  transform: rotate(180deg);
}

.drawer__sub {
  display: none;
  padding-bottom: var(--sp-3);
}

.drawer__sub.is-open {
  display: block;
}

.drawer__sub a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  font-size: var(--fs-sm);
  color: var(--text-inv-2);
  border-radius: var(--r-sm);
}

.drawer__sub a:hover {
  background: rgba(16, 24, 40, 0.03);
  color: #fff;
}

.drawer__sub a i {
  color: var(--text-inv-3);
  font-size: 1.1rem;
}

.drawer__user {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-line);
}

.drawer__user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-4);
}

.drawer__user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
}

.drawer__user-mail {
  font-size: var(--fs-xs);
  color: var(--text-inv-3);
}

.drawer__user a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  font-size: var(--fs-sm);
  color: var(--text-inv-2);
}

.drawer__user a i {
  color: var(--text-inv-3);
  font-size: 1.1rem;
}

.drawer__user a:hover {
  color: #fff;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(16, 24, 40, 0.35);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow), visibility var(--t-slow);
}

.scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   Hero (shared dark canvas)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
}

.hero::before {
  /* aurora glows */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(transparent, transparent),
    linear-gradient(transparent, transparent);
  pointer-events: none;
}

.hero::after {
  /* dot grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent, transparent);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 75%);
  pointer-events: none;
}

.hero>.container {
  position: relative;
  z-index: 1;
}

/* Breadcrumb (on dark) */
.crumbs {
  padding: var(--sp-5) 0 0;
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.crumbs__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--text-inv-3);
}

.crumbs__item a {
  color: var(--text-inv-2);
}

.crumbs__item a:hover {
  color: #fff;
}

.crumbs__item[aria-current] {
  color: #fff;
  font-weight: 500;
}

.crumbs__sep {
  font-size: 0.75rem;
  color: var(--text-inv-3);
}

.hero__body {
  padding: var(--sp-10) 0 var(--sp-24);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #DBEAFE;
  background: rgba(29, 78, 216, 0.14);
  border: 1px solid rgba(29, 78, 216, 0.36);
  border-radius: var(--r-full);
}

.eyebrow i {
  font-size: 1.05em;
}

.hero__title {
  font-size: var(--fs-display);
  color: #fff;
  max-width: 800px;
  margin: var(--sp-5) 0 var(--sp-4);
}

.hero__title .grad {
  background: var(--aurora-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--text-inv-2);
  max-width: 640px;
  line-height: 1.65;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
}

.hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-inv-2);
}

.hero__fact i {
  color: #93C5FD;
  font-size: 1.1rem;
}

.hero__fact strong {
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: var(--sp-16) 0;
}

.section--tight {
  padding: var(--sp-12) 0;
}

.section--white {
  background: var(--card);
}

.section--tint {
  background: var(--card);
}

.section--line-b {
  border-bottom: 1px solid var(--line);
}

.section--dark {
  background: var(--ink-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.sec-head {
  margin-bottom: var(--sp-8);
  max-width: 720px;
}

.sec-head__kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-2);
}

.sec-head__title {
  font-size: var(--fs-3xl);
}

.sec-head__sub {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-base);
}

.sec-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section--dark .sec-head__title {
  color: #fff;
}

.section--dark .sec-head__sub {
  color: var(--text-inv-2);
}

.section--dark .sec-head__kicker {
  color: #93C5FD;
}

/* --------------------------------------------------------------------------
   Float card — original product summary (overlaps hero)
   -------------------------------------------------------------------------- */
/* White backdrop behind the floating origin card — flow-root stops the negative
   margin collapsing through, so the white never paints over the dark hero. */

/* --------------------------------------------------------------------------
   Listing layout: filter rail + results
   -------------------------------------------------------------------------- */
.listing {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.rail {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}

.rail__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
}

.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.rail__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rail__title i {
  color: var(--brand);
}

.rail__clear {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  transition: color var(--t-fast);
}

.rail__clear:hover {
  color: var(--brand);
}

.rail__group {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-soft);
}

.rail__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

.rail__opts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.f-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.f-opt:hover {
  background: var(--brand-softer);
  color: var(--text);
}

.f-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.f-opt__box {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 1.5px solid #D0D5DD;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.f-opt__box i {
  font-size: 0.75rem;
  color: #fff;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.f-opt input:checked+.f-opt__box {
  background: var(--brand);
  border-color: var(--brand);
}

.f-opt input:checked+.f-opt__box i {
  opacity: 1;
  transform: none;
}

.f-opt input:focus-visible+.f-opt__box {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.f-opt__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* Results toolbar */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.results-bar__count {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.results-bar__count strong {
  color: var(--text);
  font-weight: 700;
}

.results-bar__sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.results-bar__sort label {
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.select {
  appearance: none;
  padding: 0.5rem 2.1rem 0.5rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234E5165' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Ranked alternative cards
   -------------------------------------------------------------------------- */
.alt-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.alt {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.alt:hover {
  transform: translateY(-2px);
  border-color: #BFDBFE;
  box-shadow: var(--sh-lg);
}

.alt.is-flash {
  border-color: var(--brand);
  box-shadow: var(--ring), var(--sh-lg);
}

.alt--featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--aurora) border-box;
}

.alt__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.alt__main {
  min-width: 0;
}

.alt__name-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.alt__name {
  font-size: var(--fs-xl);
}

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

.alt__name a:hover {
  color: var(--brand);
}

.alt__desc {
  margin-top: 0.55rem;
  font-size: var(--fs-md);
  color: var(--text-2);
  max-width: 60ch;
}

.alt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.no-results {
  display: none;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--r-xl);
  color: var(--text-3);
}

.no-results.is-visible {
  display: block;
}

.no-results i {
  font-size: 2rem;
  color: #D0D5DD;
  display: block;
  margin-bottom: var(--sp-3);
}

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}

.pager__btn {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.pager__btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.pager__btn.is-now {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.pager__btn.is-off {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   At-a-glance table
   -------------------------------------------------------------------------- */


.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 760px;
}

.cmp th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 0.9rem;
  background: var(--ink-900);
  color: var(--text-inv-2);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cmp td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  font-size: 0.86rem;
}

.cmp tr:last-child td {
  border-bottom: none;
}

.cmp tbody tr {
  transition: background var(--t-fast);
}

.cmp tbody tr:nth-child(even) {
  background: var(--surface);
}

/* Origin product row — pinned first on alternatives pages for comparison.
   Blue = informational/reference; green stays reserved for pros semantics. */

/* The badge's soft-blue bg vanishes on the soft-blue row — go solid */

.cmp tbody tr:hover {
  background: var(--brand-softer);
}

/* Merged price + pricing-model cell — crisp contained chip */

/* Built-for chips inside the table — same full-radius as the product page badges */
.cmp td .pill {
  border-radius: var(--r-full);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  margin: 1px 2px 1px 0;
}

.cmp tr.is-link {
  cursor: pointer;
}

.cmp-card__head a {
  color: var(--text);
}

.cmp-card__head a:hover {
  color: var(--brand);
}

/* Mobile table stack */


.cmp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.cmp-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   Methodology ("How we rank")
   -------------------------------------------------------------------------- */














/* --------------------------------------------------------------------------
   Category cloud
   -------------------------------------------------------------------------- */
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--ink-900);
  border-radius: 0;
  padding: var(--sp-20) 0;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(transparent, transparent);
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
}

.cta__title {
  font-size: var(--fs-3xl);
  color: #fff;
  margin-bottom: var(--sp-4);
}

.cta__text {
  color: var(--text-inv-2);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-8);
}

.cta__row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

.newsletter {
  display: flex;
  gap: var(--sp-2);
  max-width: 440px;
  margin: var(--sp-8) auto 0;
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  background: rgba(16, 24, 40, 0.04);
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: var(--r-md);
  color: #fff;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.newsletter__input::placeholder {
  color: var(--text-inv-3);
}

.newsletter__input:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------------------
   Pre-footer directory strip
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */


























/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */

/* Hero */

.stat__label {
  font-size: var(--fs-xs);
  color: var(--text-inv-3);
  margin-top: 0.2rem;
}

/* Glass fact card */

/* Sticky subnav */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: rgba(16, 24, 40, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Detail sections */

/* Overview split */
.overview {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-12);
  align-items: start;
}

.prose h3 {
  font-size: var(--fs-xl);
  margin: var(--sp-8) 0 var(--sp-3);
}

.prose p {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
}

.prose ul {
  padding-left: 1.3rem;
  margin-bottom: var(--sp-4);
  list-style: none;
}

.prose ul li {
  position: relative;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 0.55rem;
  padding-left: 0.4rem;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: 0.62rem;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--aurora);
  transform: rotate(45deg);
}

.prose ol {
  list-style: decimal;
  /* global reset strips list-style — restore it for prose */
  padding-left: 1.5rem;
  margin-bottom: var(--sp-4);
}

.prose ol li {
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 0.55rem;
  padding-left: 0.25rem;
}

.prose ol li::marker {
  color: var(--brand);
  font-weight: 600;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.prose table th {
  text-align: left;
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2, rgba(0, 0, 0, 0.03));
}

.prose table td {
  color: var(--text-2);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}

.prose table tr:last-child td {
  border-bottom: none;
}

.glance {
  position: sticky;
  top: calc(var(--header-h) + 70px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: var(--sp-6);
}

.glance__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
}

.glance__item:last-of-type {
  border-bottom: none;
}

.glance__item-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform var(--t-fast);
}

.glance__item:hover .glance__item-logo {
  transform: scale(1.06);
}

.glance__item-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  transition: color var(--t-fast);
}

.glance__item:hover .glance__item-name {
  color: var(--brand);
}

.glance__item-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.glance__item-rating i {
  color: var(--star);
  font-size: 0.8rem;
}

.glance__item>i {
  margin-left: auto;
  color: var(--text-3);
  font-size: 0.9rem;
  transition: color var(--t-fast), transform var(--t-fast);
}

.glance__item:hover>i {
  color: var(--brand);
  transform: translateX(3px);
}

.glance .btn {
  margin-top: var(--sp-4);
}

/* Screens gallery (CSS mockups) */
.screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.screen {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  background: var(--card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.screen:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* Feature cards — uniform, dynamic-data friendly (heading + sub-text only) */


.feat {
  counter-increment: feat;
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.feat::before {
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--surface-2);
  transition: color var(--t-base);
}

.feat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--aurora);
  transition: width var(--t-slow);
}

.feat:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: #BFDBFE;
}

.feat:hover::before {
  color: #DBEAFE;
}

.feat:hover::after {
  width: 100%;
}

/* Bento features */






























/* Pricing */


























/* Pros & cons — enhancements */
.pc__head {
  align-items: center;
}

/* Pros & cons */
.pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.pc__col {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
  position: relative;
  overflow: hidden;
}

.pc__col::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
}

.pc__col--pro::before {
  background: #10B981;
}

.pc__col--con::before {
  background: #F43F5E;
}

.pc__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

.pc__head i {
  font-size: 1.35rem;
}

.pc__col--pro .pc__head {
  color: var(--good);
}

.pc__col--con .pc__head {
  color: var(--bad);
}

.pc__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}

.pc__list li+li {
  border-top: 1px solid var(--line-soft);
}

.pc__col--pro .pc__list li:hover {
  background: var(--good-soft);
  transform: translateX(4px);
  color: var(--text);
}

.pc__col--con .pc__list li:hover {
  background: var(--bad-soft);
  transform: translateX(4px);
  color: var(--text);
}

.pc__list li i {
  font-size: 1.05rem;
  margin-top: 0.16rem;
  flex-shrink: 0;
}

.pc__col--pro .pc__list i {
  color: var(--good);
}

.pc__col--con .pc__list i {
  color: var(--bad);
}

/* Reviews */


.rev-summary {
  display: flex;
  gap: var(--sp-10);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  padding: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.rev-summary__score {
  text-align: center;
  flex-shrink: 0;
}

.rev-summary__big {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  background: var(--aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rev-summary__stars {
  margin: var(--sp-2) 0;
  justify-content: center;
  display: flex;
}

.rev-summary__count {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.rev-summary__bars {
  flex: 1;
}

.rbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 0.6rem;
}

.rbar:last-child {
  margin-bottom: 0;
}

.rbar__k {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  min-width: 44px;
}

.rbar__track {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}

.rbar__fill {
  display: block;
  /* span: inline width/height are ignored without this */
  height: 100%;
  border-radius: var(--r-full);
  background: var(--aurora);
}

.rbar__v {
  font-size: var(--fs-xs);
  color: var(--text-3);
  min-width: 34px;
  text-align: right;
}

.rev-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.rev {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
}

.rev__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.rev__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.rev__avatar--1 {
  background: #3B82F6;
}

.rev__avatar--2 {
  background: #FB923C;
}

.rev__avatar--3 {
  background: #FBBF24;
}

.rev__avatar--4 {
  background: #38BDF8;
}

.rev__who {
  flex: 1;
  min-width: 0;
}

.rev__name {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.rev__meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.rev__title {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

.rev__body {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.7;
}

.rev-more {
  text-align: center;
  margin-top: var(--sp-6);
}

.write-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: var(--sp-6);
}

.write-box__title {
  font-size: var(--fs-lg);
  margin-bottom: 0.4rem;
}

.write-box__sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: var(--sp-5);
}











/* Related cards */
.related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.rel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
}

.rel:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
  border-color: #BFDBFE;
}

.rel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.rel__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.rel__name {
  font-size: var(--fs-base);
}

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

.rel__name a:hover {
  color: var(--brand);
}

.rel__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  font-size: var(--fs-sm);
}

.rel__rating strong {
  color: var(--text);
}

.rel__desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
  flex: 1;
}

.rel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {






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

  .screens .screen:last-child {
    grid-column: span 2;
  }


}

@media (max-width: 1024px) {
  :root {
    --header-h: 64px;
  }

  .main-nav,
  .search,
  .user {
    display: none;
  }

  .header-mob {
    display: flex;
  }

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

  .rail {
    position: static;
  }

  .rail__card {
    padding: var(--sp-4) var(--sp-5);
  }

  .rail__group {
    padding: var(--sp-3) 0;
  }

  .rail__opts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .f-opt {
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    padding: 0.35rem 0.75rem;
  }

  .f-opt__count {
    margin-left: 0.2rem;
  }



  .overview {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .glance {
    position: static;
  }







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


}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--sp-4);
  }

  .section {
    padding: var(--sp-12) 0;
  }



  .sec-head__title {
    font-size: var(--fs-2xl);
  }







  .alt {
    padding: var(--sp-5);
  }





  .alt__logo {
    grid-row: 1;
    width: 48px;
    height: 48px;
  }

  .alt__main {
    grid-column: 1 / -1;
  }













  /* The at-a-glance table stays visible on mobile — .table-shell scrolls horizontally.
     (The .cmp-stack card fallback is deprecated: it truncated to 4 rows and duplicated content.) */

  .results-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .results-bar__sort {
    justify-content: space-between;
  }



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

  .screens .screen:last-child {
    grid-column: auto;
  }



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

  .rev-summary {
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-6);
  }





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

  .cta {
    padding: var(--sp-16) 0;
  }

  .cta__title {
    font-size: var(--fs-2xl);
  }

  .newsletter {
    flex-direction: column;
  }








}

@media (max-width: 480px) {


  .hero__facts {
    gap: var(--sp-2) var(--sp-4);
  }
}

/* ==========================================================================
   HOME / ABOUT / CATEGORIES
   ========================================================================== */

/* Centered hero variant */
.hero--center .hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-16) 0 var(--sp-20);
}

.hero--center .hero__title {
  max-width: 880px;
}

.hero--center .hero__lead {
  margin-left: auto;
  margin-right: auto;
}

.hero--center .hero__facts {
  justify-content: center;
}

/* Compact hero (author archive etc.) */
.hero--compact .hero__body {
  padding: var(--sp-8) 0 var(--sp-10);
}

.hero--compact .hero__title {
  font-size: var(--fs-3xl);
  margin: var(--sp-3) 0;
}

.hero--compact .hero__lead {
  font-size: var(--fs-base);
  max-width: 580px;
}

.hero--compact .crumbs {
  padding-top: 0;
  margin-bottom: var(--sp-8);
}

/* Balanced left-aligned hero (archive headers) */
.hero--flush .hero__body {
  padding: var(--sp-6) 0 var(--sp-10);
}

.hero--flush .hero__body:first-child {
  padding-top: var(--sp-10);
}

.hero--flush .hero__lead {
  margin-bottom: var(--sp-5);
}

/* Big hero search */
.hero-search {
  width: 100%;
  max-width: 660px;
}

.hero-search__box {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.45rem 0.45rem 1.3rem;
  background: rgba(16, 24, 40, 0.04);
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: var(--r-full);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.hero-search__box:focus-within {
  border-color: var(--brand);
  background: rgba(16, 24, 40, 0.05);
  box-shadow: var(--ring);
}

.hero-search__box>i {
  font-size: 1.3rem;
  color: var(--text-inv-3);
  flex-shrink: 0;
}

.hero-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-base);
  color: #fff;
  padding: 0.55rem 0;
}

.hero-search__input::placeholder {
  color: var(--text-inv-3);
}

.hero-search__btn {
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--sp-5);
}

.hero-chips__label {
  font-size: var(--fs-xs);
  color: var(--text-inv-3);
  align-self: center;
  margin-right: 0.3rem;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-inv-2);
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: var(--r-full);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.hero-chip:hover {
  background: rgba(16, 24, 40, 0.05);
  color: #fff;
  border-color: rgba(16, 24, 40, 0.2);
}

.hero-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.hero-chips--left {
  justify-content: flex-start;
  margin-top: var(--sp-6);
}

/* Category cards */


.cat {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.cat:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
  border-color: #BFDBFE;
}

.cat__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  aspect-ratio: 1/1;
}

.cat__icon--violet {
  background: #E8F0FE;
  color: #1D4ED8;
}

.cat__icon--blue {
  background: #EAF3FF;
  color: #2E90FA;
}

.cat__icon--pink {
  background: #FFF1E6;
  color: #C2410C;
}

.cat__icon--amber {
  background: #FEF4E6;
  color: #E17A00;
}

.cat__icon--rose {
  background: #FEEEF1;
  color: #F43F5E;
}

.cat__icon--indigo {
  background: #EBEEFE;
  color: #1D4ED8;
}

.cat__icon--cyan {
  background: #E7F8FB;
  color: #0E90A8;
}

.cat__icon--slate {
  background: #EEF1F6;
  color: #47566B;
}

/* Guide cards (comparison guides) */
.guides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.guide {
  display: block;
  background: var(--ink-850);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.guide:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 78, 216, 0.5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

/* Testimonials */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.quote {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
}

.quote__stars {
  margin-bottom: var(--sp-3);
}

.quote__text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.75;
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--sp-5);
}

.quote__name {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.quote__role {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* About: story + timeline */
.story {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-12);
  align-items: center;
}

.tl {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Team */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.person {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.person:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: #BFDBFE;
}

/* Responsive for new components */
@media (max-width: 1024px) {


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

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

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

  .story {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

@media (max-width: 768px) {
  .hero--center .hero__body {
    padding: var(--sp-12) 0 var(--sp-16);
  }

  .hero-search__btn {
    display: none;
  }





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

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

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

/* ==========================================================================
   FORMS (shared: auth, contact, submit)
   ========================================================================== */
.field {
  margin-bottom: var(--sp-4);
}

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.field__label a {
  font-size: var(--fs-xs);
  font-weight: 600;
}

.field__control {
  position: relative;
}

.field__input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--text);
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.field__input::placeholder {
  color: var(--text-3);
}

.field__input:focus {
  border-color: var(--brand);
  background: var(--card);
  box-shadow: var(--ring);
}

textarea.field__input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234E5165' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.field__eye {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 1.15rem;
  transition: color var(--t-fast), background var(--t-fast);
}

.field__eye:hover {
  color: var(--text);
  background: var(--surface-2);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 0.4rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.check a {
  font-weight: 600;
}

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
}

.auth__title {
  font-size: var(--fs-2xl);
  margin-bottom: 0.45rem;
}

.auth__sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-5);
}

.auth__row a {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.auth__foot {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: var(--sp-6);
}

.auth__foot a {
  font-weight: 700;
}

.auth__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-5);
}

.auth__back:hover {
  color: var(--brand);
}

.auth__notice {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--brand-softer);
  border: 1px solid #D7E3FB;
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: var(--sp-5);
}

.auth__notice i {
  color: var(--brand);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.rules {
  margin: var(--sp-4) 0 var(--sp-5);
}

.rules li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
  padding: 0.22rem 0;
}

.rules li i {
  font-size: 0.9rem;
  color: #D0D5DD;
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: var(--sp-12);
  align-items: start;
}

.sidenav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sidenav__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
}

.sidenav__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

.sidenav__link {
  display: block;
  padding: 0.45rem 0.7rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.sidenav__link:hover {
  color: var(--text);
  background: var(--surface);
}

.sidenav__link.is-active {
  color: var(--brand);
  background: var(--brand-softer);
  border-left-color: var(--brand);
  font-weight: 600;
}

.sidenav__doc {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-radius: var(--r-sm);
}

.sidenav__doc i {
  color: var(--text-3);
  font-size: 1.05rem;
}

.sidenav__doc:hover {
  background: var(--surface);
  color: var(--text);
}

.sidenav__doc[aria-current] {
  background: var(--brand-softer);
  color: var(--brand);
  font-weight: 600;
}

.sidenav__doc[aria-current] i {
  color: var(--brand);
}

.legal-doc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xs);
  padding: var(--sp-10);
}

.legal-doc .prose h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-10) 0 var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-soft);
}

.legal-doc .prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
}

/* ==========================================================================
   CAREERS
   ========================================================================== */
.job-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}















/* ==========================================================================
   BLOG
   ========================================================================== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.post {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.post:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
  border-color: #BFDBFE;
}

.post__cover {
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent, transparent);
  background-size: 22px 22px;
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.5), transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.5), transparent 70%);
}

.post__cover i {
  font-size: 2.6rem;
  color: rgba(16, 24, 40, 0.92);
  position: relative;
  z-index: 1;
}

.post__cover--1 {
  background: #3B82F6;
}

.post__cover--2 {
  background: #2563EB;
}

.post__cover--3 {
  background: #C2410C;
}

.post__cover--4 {
  background: #EA580C;
}

.post__cover--5 {
  background: #0E7490;
}

.post__cover--6 {
  background: #1D4ED8;
}

/* Author archive hero */

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article-hero .crumbs {
  padding-top: var(--sp-5);
}

.article-hero__body {
  max-width: 780px;
  padding: var(--sp-6) 0 var(--sp-10);
}

.article-hero__title {
  font-size: var(--fs-display);
  color: #fff;
  margin-bottom: var(--sp-4);
}

.article-hero__excerpt {
  font-size: var(--fs-lg);
  color: var(--text-inv-2);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.byline {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.byline__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.byline__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fff;
}

.byline__name a {
  color: #fff;
}

.byline__name a:hover {
  color: #DBEAFE;
}

.byline__role {
  font-size: var(--fs-xs);
  color: var(--text-inv-3);
}

.toc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-xs);
  margin-bottom: var(--sp-8);
}

.toc__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-3);
}

.toc__title i {
  color: var(--brand);
}

.toc ol {
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
}

.toc a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.4rem 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand);
}

.toc a:hover {
  color: var(--brand);
}

.article-body .prose h2 {
  font-size: var(--fs-2xl);
  margin: var(--sp-12) 0 var(--sp-4);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.article-body .prose h2:first-of-type {
  margin-top: 0;
}

.article-body .prose h3 {
  margin-top: var(--sp-8);
}

.article-body .prose p {
  font-size: var(--fs-md);
}

.prose blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--brand-softer);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.prose blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-lg) !important;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 0;
}

.prose blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.callout {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--info-soft);
  border: 1px solid #C7DFFC;
}

.callout>i {
  font-size: 1.4rem;
  color: var(--info);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.callout__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.callout p {
  font-size: var(--fs-sm) !important;
  color: var(--text-2);
  margin-bottom: 0 !important;
  line-height: 1.6;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */














.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-md);
  padding: var(--sp-8);
}

.form-card__title {
  font-size: var(--fs-xl);
  margin-bottom: 0.4rem;
}

.form-card__sub {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: var(--sp-6);
}

/* ==========================================================================
   ARTICLE DISCUSSION (comments)
   ========================================================================== */
.discussion {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

/* Standalone discussion section (alternatives pages) — not appended to an article column */

.discussion__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-6);
}

.discussion__count {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--brand-soft);
  color: var(--brand-strong);
  padding: 0.2rem 0.75rem;
  border-radius: var(--r-full);
}

.disc-form {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.disc-form__avatar {
  flex-shrink: 0;
}

.disc-form__main {
  flex: 1;
}

.disc-form textarea.field__input {
  min-height: 90px;
  margin-bottom: var(--sp-3);
}

.disc-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.disc-form__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.comment {
  display: flex;
  gap: var(--sp-4);
}

.comment--reply {
  margin-left: 3.4rem;
}

.comment__main {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}

.comment__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.comment__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

.comment__badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-softer);
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-full);
}

.comment__date {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.comment__body {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.65;
}

.comment__reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  transition: color var(--t-fast);
}

.comment__reply-btn:hover {
  color: var(--brand);
}

/* Blog cover image (posts.cover_image) — gradient variants remain the no-image fallback */


/* ==========================================================================
   Responsive — new page templates
   ========================================================================== */
@media (max-width: 1024px) {
  .auth {
    grid-template-columns: 1fr;
  }





  .legal-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .sidenav {
    position: static;
  }

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












}

@media (max-width: 768px) {
  .comment--reply {
    margin-left: 1.5rem;
  }





  .field-row {
    grid-template-columns: 1fr;
  }

  .legal-doc {
    padding: var(--sp-6);
  }

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





  .article-hero__title {
    font-size: var(--fs-2xl);
  }






}

/* ==========================================================================
   A11y
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

}

/* ==================== DASHBOARD SETTINGS ==================== */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.settings-grid .form-card {
  min-width: 0;
}

.settings-grid textarea.field__input {
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 980px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== FIXES: avatars with photos + search focus ring ==================== */
/* Uploaded profile pictures: clip to the round avatar shape everywhere */
.user__avatar,
.rev__avatar,
.byline__avatar {
  overflow: hidden;
}

.user__avatar img,
.rev__avatar img,
.byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Search inputs: the pill container shows its own focus ring (:focus-within) —
   suppress the global :focus-visible outline that doubled it */
.search__input:focus-visible,
.hero-search__input:focus-visible,
.newsletter__input:focus-visible {
  outline: none;
}

/* ==================== ARTICLE PREV/NEXT — polished ==================== */

/* when only "next" exists, keep it on the right side */

/* Author page: designation under the name */


/* ==================== ABOUT PAGE (revamp) ==================== */
/* Hero stats: one row of four */

/* "Old way / Our way" duo panel */




































/* Signal flow (dark section) */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-10);
}

/* Manifesto + mission/vision */


























/* Promise cards */












@media (max-width: 980px) {



  .flow {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }




}



/* Quick Facts header: compact save-tool bookmark */

/* --------------------------------------------------------------------------
   Sponsorship — 3-up pricing + example placement demo
   -------------------------------------------------------------------------- */






.spon-demo {
  max-width: 720px;
  margin: 0 auto;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
}

.spon-demo__slot {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  background: linear-gradient(120deg, var(--brand-softer), #FDF6FF);
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
}

.spon-demo__slot::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--aurora);
}

.spon-demo__logo {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--aurora);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}

.spon-demo__slot-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.spon-demo__slot-text {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.spon-demo__note {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.spon-demo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: spon-rank;
}

.spon-demo__list li {
  counter-increment: spon-rank;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.8rem 0.25rem;
  border-top: 1px solid var(--line-soft);
}

.spon-demo__list li::before {
  content: counter(spon-rank);
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  flex-shrink: 0;
}

.spon-demo__thumb {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.spon-demo__bar {
  height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
}

.spon-demo__list li:nth-child(1) .spon-demo__bar {
  width: 46%;
}

.spon-demo__list li:nth-child(2) .spon-demo__bar {
  width: 34%;
}

.spon-demo__list li:nth-child(3) .spon-demo__bar {
  width: 40%;
}

/* --------------------------------------------------------------------------
   Sponsored slots (category + alternatives pages)
   -------------------------------------------------------------------------- */


.rel--sponsored {
  position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--aurora) border-box;
}

/* All 3-column product cards (sponsored + regular rel cards): clamp text to 3 lines */
.rel__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Whole-card click: the card's main anchor (.stretch-link) stretches over the card.
   Secondary links inside a stretched card need position:relative + z-index 2. */
.rel,
.post {
  position: relative;
}

.stretch-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Share rail: copied-state feedback on the copy-link button */


/* Auth checkboxes (.check reuses .f-opt__box — these give it the checked/focus states) */
.check input:checked+.f-opt__box {
  background: var(--brand);
  border-color: var(--brand);
}

.check input:checked+.f-opt__box i {
  opacity: 1;
  transform: none;
}

.check input:focus-visible+.f-opt__box {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Listing-platform additions (2026-09-08): star input, hero social/share,
   media section, review sub-rating pills
   -------------------------------------------------------------------------- */
/* Star radio picker (rendered 5→1, visually flipped back) */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}

.star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.star-input label {
  cursor: pointer;
  color: #D0D5DD;
  font-size: 1.45rem;
  line-height: 1;
  transition: color 0.12s ease, transform 0.12s ease;
}

.star-input label:hover {
  transform: scale(1.12);
}

.star-input label:hover,
.star-input label:hover~label,
.star-input input:checked~label {
  color: var(--star);
}

.star-input input:focus-visible+label {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hero: social profiles + share row */

.soc-link {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-2);
  font-size: 1.1rem;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.soc-link:hover {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-1px);
}

/* Hero rating strip (stars + rank badge + updated) */

/* Media: video + screenshot */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.media-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.media-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #F2F4F7;
}

.media-card__frame iframe,
.media-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.media-card__caption {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Review card: sub-rating pills */
.rev__subs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.rev__subs .pill i {
  color: var(--star);
}

/* Write-a-review form fields */
.write-box .field {
  margin-bottom: var(--sp-4);
}

/* Overview lead — the tool's intro shown above the AI overview prose */
.prose__lead {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--text);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}

/* Reviews restructure: full-width write box on top, snapshot left + cards right below */
.write-box--wide {
  margin-bottom: var(--sp-8);
}

.write-box__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

/* Narrow-column summary: stack score above the bars */
.rev-summary--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-5);
}

.rev-summary--stack .rev-summary__bars {
  width: 100%;
}

/* Compact write box + always-on snapshot */
.write-box--wide {
  padding: var(--sp-5) var(--sp-6);
}

.write-box--wide .write-box__title {
  font-size: var(--fs-base);
  margin-bottom: 0.15rem;
}

.write-box--wide .write-box__sub {
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-4);
}

.write-box--wide .field {
  margin-bottom: var(--sp-3);
}

.write-box--wide .field__label {
  font-size: var(--fs-xs);
  margin-bottom: 0.25rem;
}

.write-box--wide .star-input label {
  font-size: 1.2rem;
}

.write-box--wide .write-box__actions {
  margin-top: var(--sp-3);
}

/* Compact snapshot column */


.rev-summary--stack {
  padding: var(--sp-5);
  gap: var(--sp-4);
  margin-bottom: 0;
}

.rev-summary--stack .rev-summary__big {
  font-size: 2.75rem;
}

.rev-summary--stack .rbar {
  margin-bottom: 0.45rem;
}

.rev-summary--stack .rbar:last-child {
  margin-bottom: 0;
}

.write-box--wide textarea.field__input {
  min-height: 76px;
}

/* Slim write-review strip: 3 dense rows */
.write-box--slim {
  padding: var(--sp-4) var(--sp-5);
}

.write-box--slim .write-box__title {
  margin: 0;
}

.wr-hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.wr-title {
  flex: 1;
  min-width: 220px;
}

.wr-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wr-sub .star-input label {
  font-size: 1.15rem;
}

/* Dedicated review page (write + edit) */

.rp-tool {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.rp-tool__name {
  font-weight: 700;
  font-size: var(--fs-sm);
}

.rp-tool__tag {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.rp-tips {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.rp-tips i {
  color: var(--good);
  margin-right: 0.35rem;
}

.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.rate-row__label {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.rate-row__label em {
  color: var(--bad);
  font-style: normal;
}

.rate-row__label small {
  color: var(--text-3);
  font-weight: 400;
}

.rate-row--main {
  background: var(--brand-softer);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-2);
}

.rate-row .star-input label {
  font-size: 1.35rem;
}

/* Review-page rail polish: bordered logo tile + hanging tip list */
.rp-tool__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

.rp-tips li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.rp-tips i {
  margin-right: 0;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Review status card: icon | text block | edit button, all cleanly aligned */
.rev-status {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.rev-status__icon {
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.rev-status__main {
  flex: 1;
  min-width: 0;
}

.rev-status .write-box__title {
  margin-bottom: 0.15rem;
}

.rev-status .write-box__sub {
  margin-bottom: 0;
}

.rev-status__edit {
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 640px) {
  .rev-status {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}

/* Social row in the Quick Facts card + share row under the Overview */


.overview-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.overview-share__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: var(--sp-2);
}

/* Hero "Top Features" — glassy checklist strips with a green accent edge */

/* ==========================================================================
   v4 "Blueprint" — all-white overrides
   Former dark-chrome components re-grounded on white; flat blue/orange accents.
   ========================================================================== */
/* Chrome */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
}

.logo__text,
.drawer__user-name,
.dropdown__head-name,
.main-nav__link[aria-expanded="true"],
.drawer__link,
.drawer__sub a:hover,
.dropdown__link:hover,
.icon-btn:hover,
.search__input,
.crumbs__item a:hover,
.crumbs__item[aria-current] {
  color: var(--text);
}

.logo__text em {
  color: var(--text);
  font-style: normal;
}

.dropdown,
.drawer {
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}



/* Heros & former dark sections: white ground, dark type */
.hero,
.section--dark,
.cta {
  background: #FFFFFF;
  color: var(--text);
}

.hero {
  border-bottom: 1px solid var(--line-soft);
}

.hero__title,
.hero__fact strong,
.section--dark .sec-head__title,
.cta__title {
  color: var(--text);
}

.hero__lead,
.cta__text,
.section--dark .sec-head__sub {
  color: var(--text-2);
}

.eyebrow {
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid #BFDBFE;
}

.grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--orange);
}

/* Chips & badges on former dark surfaces */
.badge--glass {
  background: #F6F8FB;
  color: var(--text-2);
  border: 1px solid var(--line);
}

.badge--aurora {
  background: var(--orange);
  color: #fff;
}

.hero-chip {
  background: #FFFFFF;
  border: 1px solid var(--line);
  color: var(--text-2);
}

.hero-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft, #EFF6FF);
}

.hero-chip.is-active,
.hero-chip.is-active:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.hero-search__box {
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-md);
}

.hero-search__input {
  color: var(--text);
}

/* Buttons: flat only */
.btn--brand {
  background: var(--brand);
  color: #fff;
}

.btn--brand:hover {
  background: var(--brand-strong);
  color: #fff;
}

.btn--dark {
  background: var(--text);
  color: #fff;
}

.btn--dark:hover {
  background: #1E3A8A;
  color: #fff;
}

.btn--white {
  background: var(--orange);
  color: #fff;
  border: none;
}

.btn--white:hover {
  background: #C2410C;
  color: #fff;
}

.btn--ghost-dark {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--text);
}

.btn--ghost-dark:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Cards that lived on dark grounds */
.guide {
  background: #FFFFFF;
  border: 1px solid var(--line);
  color: var(--text);
}



.cta {
  border-top: 1px solid var(--line);
}

.newsletter__input {
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  color: var(--text);
}

.cmp th {
  background: var(--surface);
  color: var(--text-2);
}

.pager__btn.is-now {
  background: var(--brand);
  color: #fff;
}

.stars--on-dark i.ph.ph-star {
  color: #D0D5DD;
}

/* Product-page hero details on white */

.soc-link {
  background: #FFFFFF;
}

/* v4: remaining former-dark text flipped to ink */
.drawer__user a:hover,
.article-hero__title,
.byline__name,
.byline__name a {
  color: var(--text);
}

/* Card rating row (listing-platform style) */
.rel__score {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}

.rel__score strong {
  color: var(--text);
}

.rel__score-count {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   v4.1 — crisp card refresh (tool, category, review cards)
   Flat outline cards: tighter radius, no resting shadow, brand-blue hover lift.
   ========================================================================== */
/* Tool card */
.rel {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: var(--sp-5);
}

.rel:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.10);
}

.rel__logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid var(--line);
}

.rel__name {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.rel__rating {
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.rel__rating strong {
  color: var(--text);
  font-weight: 700;
}

.rel__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rel__meta {
  margin-bottom: 0;
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

/* Category card */
.cat {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: none;
}

.cat:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.10);
}

.cat__icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  font-size: 1.35rem;
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  transition: background var(--t-fast), color var(--t-fast);
}

.cat:hover .cat__icon {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Review card */
.quote {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  box-shadow: none;
  padding: var(--sp-6);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.10);
}

.quote__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.quote__mark {
  font-size: 1.7rem;
  color: var(--orange);
  line-height: 1;
}

.quote__stars {
  margin-bottom: 0;
}

.quote__text {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.7;
}

.quote__who {
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  justify-content: space-between;
}

.quote__who-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.quote__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  flex-shrink: 0;
}

.quote__tool:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.quote .rev__avatar {
  width: 38px;
  height: 38px;
  font-size: var(--fs-xs);
}

/* v4.2 — restrained section tints (grey / blue / warm) for rhythm between sections */
.section--tint {
  background: var(--surface);
}

.section--blue {
  background: #F4F8FF;
  border-top: 1px solid #EDF3FD;
  border-bottom: 1px solid #EDF3FD;
}

.section--warm {
  background: #FFF9F3;
  border-top: 1px solid #FCF1E6;
  border-bottom: 1px solid #FCF1E6;
}

.cta {
  background: #F4F8FF;
}

/* v4.3 — SaaS-style faded gradient orbs (homepage hero only, via .hero--orbs) */
.hero--orbs {
  position: relative;
  overflow: hidden;
}

.hero--orbs::before {
  content: '';
  position: absolute;
  inset: -100px;
  background:
    radial-gradient(circle closest-side, rgba(29, 78, 216, 0.36), transparent),
    radial-gradient(circle closest-side, rgba(234, 88, 12, 0.28), transparent),
    radial-gradient(circle closest-side, rgba(59, 130, 246, 0.24), transparent),
    radial-gradient(circle closest-side, rgba(249, 115, 22, 0.16), transparent);
  background-size: 560px 560px, 500px 500px, 380px 380px, 420px 420px;
  background-repeat: no-repeat;
  background-position: 86% 14%, 8% 86%, 16% 6%, 94% 88%;
  filter: blur(24px);
  pointer-events: none;
}

.hero--orbs>.container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   v4.4 — navigation overhaul (header, dropdowns, mobile drawer)
   ========================================================================== */
/* Logo with badge */
.logo__badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

/* Nav links as soft pills */
.main-nav__link {
  border-radius: var(--r-full);
  padding: 0.5rem 0.95rem;
  font-weight: 600;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}

.main-nav__link:hover,
.main-nav__link[aria-expanded="true"] {
  background: var(--surface-2);
  color: var(--text);
}

/* Dropdown panels */
.dropdown {
  border-radius: 14px;
  padding: 0.5rem;
  min-width: 250px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.14), 0 2px 8px rgba(16, 24, 40, 0.06);
}

.dropdown--rich {
  min-width: 288px;
}

.dropdown__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.5rem 0.75rem 0.35rem;
}

.dropdown__link {
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dropdown__link:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.dd-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.dropdown__link:hover .dd-ico {
  background: var(--brand);
  color: #fff;
}

.dd-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.dd-txt__name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-sm);
}

.dropdown__link:hover .dd-txt__name {
  color: var(--brand);
}

.dd-txt__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.dropdown__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}

.dropdown__more:hover {
  background: var(--brand-soft);
}

/* Header search */
.search__box {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.search__box:focus-within {
  background: #fff;
  border-color: var(--brand);
}

/* ---- Mobile drawer ---- */
.drawer {
  width: min(340px, 88vw);
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: -18px 0 50px rgba(16, 24, 40, 0.14);
}

.drawer__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.6rem 1rem;
  margin-bottom: var(--sp-5);
  color: var(--text-3);
}

.drawer__search input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font: inherit;
  color: var(--text);
}

.drawer__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: var(--sp-5) 0 var(--sp-2);
}

.drawer__label:first-child {
  margin-top: 0;
}

.drawer__group {
  border: none;
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  font-weight: 600;
  color: var(--text);
}

.drawer__link>span {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.drawer__link>span i {
  color: var(--brand);
  font-size: 1.15rem;
}

.drawer__link:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.drawer__caret {
  color: var(--text-3);
  transition: transform var(--t-fast);
}

.drawer__link.is-open .drawer__caret {
  transform: rotate(180deg);
}

.drawer__sub a {
  border-radius: 8px;
  padding: 0.5rem 0.65rem 0.5rem 2.35rem;
  color: var(--text-2);
}

.drawer__sub a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.drawer__auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.scrim {
  background: rgba(16, 24, 40, 0.4);
  backdrop-filter: blur(2px);
}

/* v4.5 — auth pages inside the standard chrome: centered card on the page ground */
.auth-page {
  min-height: calc(100dvh - var(--header-h) - 320px);
  display: flex;
  align-items: flex-start;
  padding: var(--sp-16) 0 var(--sp-20);
}

.auth-page .container {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   v4.6 — category page revamp: icon hero + leaderboard cards + rail polish
   ========================================================================== */
.cat-hero__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.cat-hero__icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  flex-shrink: 0;
  border: 1px solid #D7E3FB;
}

.cat-hero .hero__title {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
}

.cat-hero .hero__lead {
  max-width: 720px;
}

/* Leaderboard card */
.alt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4) var(--sp-5);
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: none;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.alt:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(29, 78, 216, 0.10);
}

.alt--featured {
  border-color: #F6C9A8;
  background: #FFFDFA;
}

.alt__logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alt__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.alt__name {
  font-size: var(--fs-lg);
  font-weight: 700;
}

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

.alt__name a:hover {
  color: var(--brand);
}

.alt__verified {
  color: var(--info);
  font-size: 1.05rem;
}

.alt__type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.alt__score {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.4rem;
  font-size: var(--fs-sm);
}

.alt__score-count {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.alt__desc {
  margin-bottom: 0;
  max-width: none;
}

.alt__tags {
  margin-top: var(--sp-3);
}

.alt-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Filter rail on white */
.rail__card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}

.rail__clear {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
}

.rail__apply {
  width: 100%;
  margin-top: var(--sp-4);
}

#results-region {
  transition: opacity 160ms ease;
}

@media (max-width: 760px) {
  .alt {
    grid-template-columns: auto 1fr;
  }

  .alt__main {
    grid-column: 1 / -1;
  }



  .cat-hero__row {
    flex-direction: column;
  }
}

/* ==========================================================================
   v4.7 — category page polish: tinted hero band, labeled sponsor section,
   category link cards, buttonless leaderboard aside
   ========================================================================== */
/* Hero band */
.cat-hero {
  background: #F4F8FF;
  border-bottom: 1px solid #E3ECFB;
}

.cat-hero__icon {
  background: #FFFFFF;
  border-color: #D7E3FB;
}

.cat-hero .hero__facts {
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cat-hero .hero__fact {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.45rem 0.95rem;
  color: var(--text-2);
}

/* Sponsored section — visibly separate, warm-labeled */
.sponsor-sec {
  padding: var(--sp-10) 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line-soft);
}

.sponsor-sec__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.sponsor-sec__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  padding: 0.35rem 0.8rem;
}

.rel--sponsored {
  border-color: #F6C9A8;
  background: #FFFDFA;
}

.rel--sponsored:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.10);
}

.rel__visit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand);
}

/* Category link cards (replaces the tag cloud) */
.catlink-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

.catlink {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.catlink__ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}

.catlink__name {
  min-width: 0;
  font-size: var(--fs-sm);
}

.catlink__arrow {
  margin-left: auto;
  color: var(--text-3);
  transition: transform var(--t-fast), color var(--t-fast);
}

.catlink:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}

.catlink:hover .catlink__ico {
  background: var(--brand);
  color: #fff;
}

.catlink:hover .catlink__arrow {
  color: var(--brand);
  transform: translateX(3px);
}

.catlink--all .catlink__ico {
  background: var(--surface-2);
  color: var(--text-2);
}

/* Leaderboard aside: badges only, vertically centered */


@media (max-width: 1000px) {
  .catlink-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .catlink-grid {
    grid-template-columns: 1fr;
  }
}

/* v4.8 — category hero breathing room; sponsor CTA; full-width leaderboard rows */
.cat-hero {
  padding: var(--sp-12) 0 var(--sp-12);
}

.cat-hero .crumbs {
  padding: 0;
  margin-bottom: var(--sp-6);
}

.cat-hero .hero__title {
  margin: 0 0 var(--sp-3);
}

.cat-hero .hero__lead {
  margin-bottom: 0;
  line-height: 1.7;
}

.cat-hero__row {
  gap: var(--sp-8);
}

.rel__visit {
  color: var(--orange);
}

/* Leaderboard card: two columns only, prices live in the name row */
.alt {
  grid-template-columns: auto 1fr;
}

.alt__prices {
  margin-left: auto;
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ==========================================================================
   v4.9 — product profile revamp: tinted identity hero + clean facts card
   ========================================================================== */

a.hero__fact {
  transition: border-color var(--t-fast), color var(--t-fast);
}

a.hero__fact:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Quick facts card — plain white, bordered, icon keys */

/* Feature cards — quieter numbering, no top bar */
.feat::after {
  display: none;
}

.feat::before {
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--brand);
  background: var(--brand-soft);
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-full);
}

.feat:hover::before {
  color: var(--brand);
}

/* Share strip under the overview — soft tinted band */
.overview-share {
  border-top: 0;
  background: var(--brand-softer);
  border: 1px solid #E3ECFB;
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

/* ==========================================================================
   v5.0 — product profile 2.0: compact header + stat bar + panel layout
   ========================================================================== */
/* Header */

/* Stat bar */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--sp-7);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.pp-stat {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border-left: 1px solid var(--line-soft);
  min-width: 0;
}

.pp-stat:first-child {
  border-left: 0;
}

a.pp-stat {
  transition: background var(--t-fast);
}

a.pp-stat:hover {
  background: var(--brand-softer);
}

.pp-stat__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}

.pp-stat__value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.pp-stat__value i {
  color: var(--brand);
  font-size: 1.1rem;
}

/* Body canvas + layout */

/* Panels */
.panel {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
}

.panel__count {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-full);
}

.panel .prose .sec-head {
  display: none;
}

.panel .overview-share {
  margin-top: var(--sp-6);
}

/* Feature list */
.pp-featlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-7);
}

.pf {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.pf__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.pf__title {
  display: block;
  font-size: var(--fs-base);
  color: var(--text);
  margin-bottom: 0.2rem;
}

.pf__text {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

/* Pros / cons */
.pp-pc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
}

.pp-pc__head {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}

.pp-pc__head--pro {
  background: var(--good-soft);
  color: var(--good);
}

.pp-pc__head--con {
  background: var(--bad-soft);
  color: var(--bad);
}

.pp-pc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pp-pc__list li {
  display: flex;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.pp-pc__list li i {
  flex-shrink: 0;
  transform: translateY(2px);
}

.pp-pc__list--pro li i {
  color: var(--good);
}

.pp-pc__list--con li i {
  color: var(--bad);
}

/* Reviews inside a panel: snapshot left, cards right; quieter sub-cards */
.pp-revgrid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.panel .rev-summary {
  box-shadow: none;
  margin-bottom: 0;
  padding: var(--sp-5);
  background: #FAFBFE;
}

.panel .write-box {
  box-shadow: none;
  background: #FAFBFE;
  margin-bottom: var(--sp-6);
}

/* Alternatives: two-up inside the main column */


/* Rail */

a.pill:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Responsive */


@media (max-width: 900px) {
  .pp-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .pp-stat:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }

  .pp-stat:nth-child(3) {
    border-left: 0;
  }

  .pp-revgrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {






  .pp-featlist,
  .pp-pc {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: var(--sp-5);
  }
}

@media (max-width: 520px) {
  .pp-stats {
    grid-template-columns: 1fr;
  }

  .pp-stat {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .pp-stat:first-child {
    border-top: 0;
  }
}

/* ==========================================================================
   v5.1 — product profile 3.0: editorial flow — open sections, no boxes.
   App-store hero, spec sheet, hairline-ruled section headings.
   ========================================================================== */
/* Hero */

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Open sections, separated by a single hairline */

/* Spec sheet */

/* Reviews: flatten the snapshot card into the open layout */
.pd-snapshot {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* Responsive */


@media (max-width: 760px) {




  .pd-actions .btn {
    flex: 1;
    justify-content: center;
  }






}

/* ==========================================================================
   v5.2 — product profile 4.0: compact zoned layout (G2-style).
   Dense hero carrying full product info; media banner; alternating tints.
   ========================================================================== */
/* Hero */
.pv-hero {
  background: #FFFFFF;
  padding: var(--sp-6) 0 var(--sp-7);
  border-bottom: 1px solid var(--line);
}

.pv-hero .crumbs {
  padding: 0;
  margin-bottom: var(--sp-5);
}

.pv-hero__grid {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

.pv-hero__logo {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.pv-hero__id {
  flex: 1;
  min-width: 0;
}

.pv-hero__toprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.pv-hero__name {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pv-hero__verified {
  font-size: 1.3rem;
  color: var(--brand);
  display: inline-flex;
}

.pv-hero__tag {
  margin: 0.3rem 0 0;
  font-size: var(--fs-base);
  color: var(--text-2);
  max-width: 640px;
  line-height: 1.5;
}

.pv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.pv-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
}

.pv-meta__item strong {
  color: var(--text);
}

a.pv-meta__item:hover,
a.pv-meta__item:hover strong {
  color: var(--brand);
}

.pv-meta__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
}

.pv-hero__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}





.pv-actions {
  display: flex;
  gap: var(--sp-2);
}

/* Spec strip: all remaining product info on one dense line */
.pv-specbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-7);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.pv-spec {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pv-spec i {
  color: var(--brand);
  font-size: 1rem;
}

.pv-spec b {
  font-weight: 600;
  color: var(--text);
}

.pv-spec__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--brand);
  font-weight: 600;
}

.pv-spec__link:hover {
  color: var(--orange);
}

.pv-spec--social {
  gap: var(--sp-2);
  margin-left: auto;
}

.soc-link--sm {
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
}

.pv-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--sp-4);
}

.pill--soft {
  background: var(--brand-softer);
  border-color: #E3ECFB;
}

/* Zones: compact, alternating tint */
.pv-zone {
  padding: var(--sp-9) 0;
}

.pv-zone--tint {
  background: #F7FAFF;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.pv-zone--media {
  padding: var(--sp-7) 0 var(--sp-2);
}

/* Compact section heading with orange accent bar */

/* About + features split */
.pv-about {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

.pv-prose p {
  margin-bottom: 0.9rem;
}

.pv-featlist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.pv-zone .overview-share {
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  background: #FFFFFF;
}

/* Media banner cards: compact captions */
.pv-zone--media .media-card__caption {
  padding: 0.55rem var(--sp-4);
  font-size: var(--fs-xs);
}

/* Tighter pros/cons + reviews inside compact zones */
.pv-zone .pp-pc {
  gap: var(--sp-10);
}

.pv-zone .write-box {
  box-shadow: none;
  background: #FAFBFE;
  margin-bottom: var(--sp-5);
}

/* Responsive */
@media (max-width: 980px) {
  .pv-hero__grid {
    flex-wrap: wrap;
  }

  .pv-hero__side {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pv-about {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .pv-spec--social {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .pv-hero__logo {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }

  .pv-hero__side {
    flex-direction: column;
    align-items: stretch;
  }



  .pv-actions {
    width: 100%;
  }

  .pv-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .pv-zone {
    padding: var(--sp-8) 0;
  }

  .pv-specbar {
    gap: var(--sp-2) var(--sp-5);
  }

  .pp-pc {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   v5.3 — profile polish: site-standard sec-heads in zones, boxed
   highlights/limitations, side column feature+more lists
   ========================================================================== */
.sec-head--z {
  margin-bottom: var(--sp-6);
  max-width: none;
}

.sec-head--z .sec-head__title {
  font-size: var(--fs-2xl);
}

.sec-head--sm {
  margin-bottom: var(--sp-4);
}

.sec-head--sm .sec-head__title {
  font-size: var(--fs-lg);
}

/* Section heading + CTA on one line */
.pv-zonebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.pv-zonebar .sec-head {
  margin-bottom: 0;
}

.pv-zonebar__cta {
  flex-shrink: 0;
  margin-bottom: 0.3rem;
}

/* Side column: features + "more in" list */
.pv-side {
  min-width: 0;
}

.pv-side__gap {
  margin-top: var(--sp-8);
}

.pv-morelist {
  display: flex;
  flex-direction: column;
}

.pv-morelist .glance__item:first-of-type {
  padding-top: 0;
}

.pv-morelink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
}

.pv-morelink:hover {
  color: var(--orange);
}

.pv-about--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
}

/* Boxed highlights & limitations */
.pv-box {
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  background: #FFFFFF;
}

.pv-box--pro {
  background: #F2FBF7;
  border-color: #D3F0E3;
}

.pv-box--con {
  background: #FEF5F6;
  border-color: #FADCE2;
}

.pv-zone .pp-pc {
  gap: var(--sp-6);
}

/* v5.4 — profile tweaks: boxed "keep exploring" card, consistent base font
   size for section body copy, carded review snapshot */
.pv-morebox {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
}

.pv-morebox .btn {
  margin-top: var(--sp-4);
}

.pp-pc__head {
  font-size: var(--fs-base);
}

.pp-pc__list li {
  font-size: var(--fs-base);
  gap: 0.65rem;
}

.pp-pc__list li i {
  transform: translateY(3px);
}

.pf__text {
  font-size: var(--fs-base);
}

.pd-snapshot {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-xs);
}

/* v5.5 — heading inside the explore box, narrower side column, review filter */
.pv-about {
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
}

.pv-morebox .sec-head {
  margin-bottom: var(--sp-4);
}

.rev-col {
  min-width: 0;
}

.rev-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sp-4);
}

.rev-filter__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: var(--sp-2);
}

.rev-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-2);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.rev-filter__btn i {
  color: var(--star);
  font-size: 0.85em;
}

.rev-filter__btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.rev-filter__btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}

.rev-filter__btn.is-active i {
  color: #FFFFFF;
}

/* ==========================================================================
   v5.6 — blog revamp: tinted compact heroes on all blog pages, article
   cover banner, chips row inside the band
   ========================================================================== */
.cat-hero .hero-chips {
  justify-content: flex-start;
  margin: 0 0 var(--sp-5);
}

.cat-hero.article-hero .article-hero__body {
  padding: 0;
  max-width: 820px;
}

.cat-hero .article-hero__title {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
}

.cat-hero .article-hero__excerpt {
  margin-bottom: var(--sp-5);
}

/* ==========================================================================
   v5.7 — blog card 2.0 (.bcard, replaces .post), article TOC rail layout,
   richer author hero
   ========================================================================== */
/* Blog card */
.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.bcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: #BFDBFE;
}

.bcard__cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--brand-softer);
  border-bottom: 1px solid var(--line-soft);
}

.bcard__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}

.bcard:hover .bcard__cover img {
  transform: scale(1.04);
}

.bcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1;
}

.bcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.bcard__cat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}

a.bcard__cat:hover {
  background: var(--brand);
  color: #FFFFFF;
}

.bcard__cat--featured {
  background: #FDEEE3;
  color: var(--orange);
}

.bcard__date {
  margin-left: auto;
  white-space: nowrap;
}

.bcard__title {
  font-size: var(--fs-lg);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bcard__title a {
  color: var(--text);
  transition: color var(--t-fast);
}

.bcard:hover .bcard__title a {
  color: var(--brand);
}

.bcard__excerpt {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bcard__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
}

.bcard__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.bcard__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcard__author {
  position: relative;
  z-index: 2;
  font-weight: 600;
  color: var(--text-2);
}

.bcard__author:hover {
  color: var(--brand);
}

.bcard__arrow {
  margin-left: auto;
  color: var(--text-3);
  transition: color var(--t-fast), transform var(--t-fast);
}

.bcard:hover .bcard__arrow {
  color: var(--brand);
  transform: translateX(3px);
}

/* Wide/featured variant — spans the grid, cover on the left */
.bcard--wide {
  grid-column: 1 / -1;
  flex-direction: row;
}

.bcard--wide .bcard__cover {
  width: 46%;
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--line-soft);
  flex-shrink: 0;
}

.bcard--wide .bcard__body {
  padding: var(--sp-7);
}

.bcard--wide .bcard__title {
  font-size: var(--fs-xl);
}

@media (max-width: 860px) {
  .bcard--wide {
    flex-direction: column;
  }

  .bcard--wide .bcard__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .bcard--wide .bcard__body {
    padding: var(--sp-5);
  }
}

@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* Article: sticky TOC rail + content */
.article-cols {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}

.article-rail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.article-rail .toc {
  margin-bottom: 0;
}

.article-share {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
}

.article-share__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: var(--sp-2);
}

@media (max-width: 980px) {
  .article-cols {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .article-rail {
    position: static;
  }
}

/* Author hero */
.author-hero {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}

.author-hero__avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: 700;
  border: 3px solid #FFFFFF;
  box-shadow: var(--sh-sm);
}

.author-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-hero__body {
  min-width: 0;
}

.author-hero__toprow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.author-hero__toprow .hero__title {
  margin: 0;
}

.author-hero__handle {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
}

.author-hero__role {
  margin-top: 0.3rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--brand);
}

.author-hero .hero__lead {
  margin-top: var(--sp-3);
}

.author-hero .hero__facts {
  margin-top: var(--sp-5);
}

a.hero__fact {
  transition: border-color var(--t-fast), color var(--t-fast);
}

a.hero__fact:hover {
  border-color: var(--brand);
  color: var(--brand);
}

@media (max-width: 640px) {
  .author-hero {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .author-hero__avatar {
    width: 72px;
    height: 72px;
  }
}

/* ==========================================================================
   v5.8 — article body polish: boxed tables, accented content headings
   ========================================================================== */
/* Boxed tables (border-collapse: separate keeps the rounded frame) */
.prose table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: var(--sp-5) 0 var(--sp-6);
}

.prose table th {
  background: #F4F8FF;
  color: var(--text);
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
}

.prose table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}

.prose table th:last-child,
.prose table td:last-child {
  border-right: 0;
}

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

.prose table tbody tr:nth-child(even) td {
  background: #FAFBFE;
}

/* Content headings: brand accent bar on h2, tighter h3/h4 hierarchy */
.article-body .prose h2 {
  position: relative;
  padding-left: 0.95rem;
  margin: var(--sp-10) 0 var(--sp-4);
  font-size: var(--fs-xl);
}

.article-body .prose h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 4px;
  border-radius: 2px;
  background: var(--brand);
}

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

.article-body .prose h3 {
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--fs-lg);
}

.article-body .prose h4 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* v5.8b — article tables have no <th>: tint the first row as the header
   (single-cell callout tables get the tint across the whole box) */
.prose table tr:first-child td {
  background: #F4F8FF;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

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

.prose table td p {
  margin-bottom: 0.5rem;
}

.prose table td p:last-child {
  margin-bottom: 0;
}

/* v5.9 — search page: centered search hero on the tinted band */
.search-hero {
  text-align: center;
}

.search-hero .hero__title {
  margin-bottom: var(--sp-3);
}

.search-hero .hero__lead {
  margin: 0 auto;
  max-width: 560px;
}

.search-hero .hero-search {
  max-width: 640px;
  margin: var(--sp-6) auto 0;
}

.search-hero .hero__facts {
  justify-content: center;
  margin-top: var(--sp-5);
}

.search-hero__try-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  align-self: center;
}

.sec-head--z .panel__count {
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* ==========================================================================
   v6.0 — categories page: filterable hero + ccard category cards
   ========================================================================== */
.cats-hero .hero-search {
  max-width: 560px;
  margin: 0 0 var(--sp-5);
}

.ccard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.ccard:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: #BFDBFE;
}

.ccard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ccard__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  border: 1px solid #D7E3FB;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.ccard__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  background: #F4F6FA;
  border-radius: var(--r-full);
  padding: 0.25rem 0.65rem;
  white-space: nowrap;
}

.ccard__name {
  font-size: var(--fs-lg);
  color: var(--text);
  margin: 0;
  transition: color var(--t-fast);
}

.ccard:hover .ccard__name {
  color: var(--brand);
}

.ccard__desc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ccard__foot {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.ccard__logos {
  display: flex;
  gap: 0.3rem;
}

.ccard__logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ccard__more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
}

.ccard__more i {
  transition: transform var(--t-fast);
}

.ccard:hover .ccard__more i {
  transform: translateX(3px);
}

@media (max-width: 980px) {
  .ccard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .ccard-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   v6.1 — account pages: tinted hero + sidebar-nav shell (subnav retired)
   ========================================================================== */
.acct-hero__row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.acct-hero__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 700;
  border: 3px solid #FFFFFF;
  box-shadow: var(--sh-sm);
}

.acct-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-hero__row .hero__title {
  margin: 0 0 0.25rem;
}

.acct-hero__row .hero__lead {
  margin: 0;
}

.acct-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.acct-nav {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}

.acct-nav__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.acct-nav__link i {
  font-size: 1.1rem;
  color: var(--brand);
}

.acct-nav__link:hover {
  background: var(--brand-softer);
  color: var(--text);
}

.acct-nav__link.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}

.acct-nav__split {
  height: 1px;
  background: var(--line-soft);
  margin: 0.3rem 0.4rem;
}

.acct-nav__link--danger,
.acct-nav__link--danger i {
  color: var(--bad);
}

.acct-nav__link--danger:hover {
  background: var(--bad-soft);
  color: var(--bad);
}

.acct-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.acct-panel {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.acct-panel .sec-head--sm {
  margin-bottom: var(--sp-5);
}

.acct-main .pp-stats {
  margin-top: 0;
}

.acct-main .settings-grid {
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (max-width: 900px) {
  .acct-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .acct-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .acct-nav::-webkit-scrollbar {
    display: none;
  }

  .acct-nav__split {
    width: 1px;
    height: auto;
    margin: 0.4rem 0.3rem;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   v6.2 — auth pages: split shell (tinted brand panel + form column)
   ========================================================================== */
.auth-page {
  min-height: calc(100dvh - var(--header-h) - 320px);
  display: flex;
  align-items: flex-start;
  padding: var(--sp-12) 0 var(--sp-16);
  background: #F7FAFF;
  border-bottom: 1px solid var(--line-soft);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.auth-shell--center {
  grid-template-columns: 1fr;
  max-width: 480px;
}

.auth-side {
  background: #F4F8FF;
  border-right: 1px solid #E3ECFB;
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.auth-side__badge {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--brand);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}

.auth-side__title {
  font-size: var(--fs-2xl);
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.01em;
}

.auth-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.auth-side__list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-2);
}

.auth-side__list li i {
  color: var(--good);
  flex-shrink: 0;
  transform: translateY(2px);
}

.auth-side__stats {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid #E3ECFB;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.auth-side__stat strong {
  color: var(--text);
}

.auth-side__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
}

.auth-form {
  padding: var(--sp-10);
}

/* The old lone-card wrapper is gone; keep spacing sane inside the column */
.auth-form .auth__title {
  margin-top: 0;
}

@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .auth-side {
    display: none;
  }

  .auth-form {
    padding: var(--sp-7);
  }

  .auth-page {
    padding: var(--sp-8) 0 var(--sp-12);
  }
}

/* ==========================================================================
   v6.3 — error pages: giant soft code number on the tinted band
   ========================================================================== */
.err-page {
  background: #F7FAFF;
  border-bottom: 1px solid var(--line-soft);
  min-height: calc(100dvh - var(--header-h) - 320px);
  display: flex;
  align-items: center;
  padding: var(--sp-16) 0;
  text-align: center;
}

.err-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 17vw, 9.5rem);
  line-height: 0.9;
  color: #DBE7FB;
  letter-spacing: -0.04em;
  user-select: none;
}

.err-title {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: -0.01em;
  margin: var(--sp-4) 0 var(--sp-3);
}

.err-lead {
  color: var(--text-2);
  font-size: var(--fs-lg);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto var(--sp-6);
}

.err-search {
  max-width: 560px;
  margin: 0 auto var(--sp-6);
}

.err-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ==========================================================================
   v6.4 — write-review page: contextual hero + panel form with rail
   ========================================================================== */
.wr-hero__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.wr-hero__logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #D7E3FB;
  box-shadow: var(--sh-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.wr-hero__row .hero__title {
  margin: 0 0 0.25rem;
}

.wr-hero__row .hero__lead {
  margin: 0;
}

.wr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}

.wr-rail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.wr-rail .rp-tool {
  margin-bottom: var(--sp-4);
}

.wr-rail .btn {
  margin-bottom: 0;
}

.wr-subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-8);
}

.wr-step2 {
  margin-top: var(--sp-7);
}

.wr-form .sec-head--sm {
  margin-bottom: var(--sp-4);
}

@media (max-width: 900px) {
  .wr-layout {
    grid-template-columns: 1fr;
  }

  .wr-rail {
    position: static;
  }

  .wr-subs {
    grid-template-columns: 1fr;
  }
}

/* v6.5 — product side column: compact type (cards got bulky after font change) */
.pv-side .sec-head--sm .sec-head__title {
  font-size: var(--fs-base);
}

.pv-side .sec-head--sm {
  margin-bottom: var(--sp-3);
}

.pv-side .pf__title {
  font-size: var(--fs-md);
  margin-bottom: 0.1rem;
}

.pv-side .pf__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.pv-side .pv-featlist {
  gap: var(--sp-3);
}

.pv-side .pf__icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.75rem;
}

.pv-morelist .glance__item-name {
  font-size: var(--fs-sm);
}

.pv-morelist .glance__item-rating {
  font-size: 0.75rem;
  line-height: 1.45;
}

/* v6.6 — "keep exploring" list: bigger bordered logo tile, larger name,
   readable description (overrides the v6.5 shrink for this card) */
.pv-morelist .glance__item {
  padding: 0.8rem 0;
  gap: var(--sp-3);
  align-items: flex-start;
}

.pv-morelist .glance__item-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--line);
}

.pv-morelist .glance__item-name {
  font-size: var(--fs-base);
  font-weight: 600;
}

.pv-morelist .glance__item-rating {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 0.15rem;
}

.pv-morelist .glance__item>i {
  align-self: center;
}

/* v6.7 — side-column card titles larger */
.pv-side .sec-head--sm .sec-head__title {
  font-size: var(--fs-xl);
}


/* v6.8 — consistency pass: shared required-marker style */
.field__label em,
.rate-row__label em {
  color: var(--bad);
  font-style: normal;
}


/* ==========================================================================
   v6.9 — unified interactive states: one card hover, one input focus
   ========================================================================== */
.rel:hover,
.alt:hover,
.bcard:hover,
.ccard:hover {
  transform: translateY(-2px);
  border-color: #BFDBFE;
  box-shadow: var(--sh-md);
}

.rel__name a,
.alt__name a {
  transition: color var(--t-fast);
}

.rel:hover .rel__name a,
.alt:hover .alt__name a {
  color: var(--brand);
}

/* Text fields show the ring only — never the stacked global outline */
.field__input:focus-visible,
.search__input:focus-visible,
.hero-search__input:focus-visible,
.newsletter__input:focus-visible {
  outline: none;
}

.select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}


/* ==========================================================================
   v7.0 — footer redesign: tinted band, brand+social row, trust markers
   ========================================================================== */
.footer2 {
  background: #F4F8FF;
  border-top: 1px solid #E3ECFB;
  padding-top: var(--sp-10);
  margin-top: 0;
}

.footer2__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid #E3ECFB;
}

.footer2__social {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.footer2__social-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: var(--sp-2);
}

.footer2 .soc-link {
  background: #FFFFFF;
  border: 1px solid var(--line);
}

.footer2 .soc-link:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.footer2__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  padding: var(--sp-8) 0;
}

.footer2__tag {
  color: var(--text-2);
  line-height: 1.65;
  max-width: 300px;
  margin: 0 0 var(--sp-5);
}

.footer2__pitch h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-3);
}

.footer2__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sp-5);
  max-width: 340px;
}

.footer2__cats .pill {
  background: #FFFFFF;
}

.footer2__stats {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-5);
}

.footer2__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.footer2__stat span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}

.footer2__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--t-fast);
}

.footer2__mail:hover {
  color: var(--brand);
}

.footer2__mail i {
  color: var(--brand);
}

.footer2__col h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-4);
}

.footer2__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer2__col a {
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: color var(--t-fast);
}

.footer2__col a:hover {
  color: var(--brand);
}

.footer2__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: 1px solid #E3ECFB;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

@media (max-width: 900px) {
  .footer2__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer2__pitch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer2__grid {
    grid-template-columns: 1fr;
  }

  .footer2__top,
  .footer2__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   v7.1 — fix round: scrollable sticky rails, hero spacing, hero CTA row
   ========================================================================== */
/* 1+2. Sticky rails taller than the viewport scroll internally */
.rail,
.article-rail {
  max-height: max(480px, calc(100dvh - var(--header-h) - 40px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* 4. Blog archive: air between the lead and the category chips */
.cat-hero .hero-chips {
  margin: var(--sp-5) 0;
}

/* 8. Categories page: air between the lead and the filter box */
.cats-hero .hero-search {
  margin: var(--sp-5) 0;
}

/* 9. Search hero: center the title block itself */
.search-hero .hero__title,
.search-hero .hero__lead {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* 12. Product hero: rating + write-review inline on the right */
.pv-hero__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .pv-hero__cta {
    width: 100%;
    justify-content: space-between;
  }
}

/* v7.2 — careers/contact revamp: role cards, channel cards, centered form */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.role__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.role .pf__text {
  margin-bottom: var(--sp-4);
}

.role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--sp-4);
}

.channel .ccard__icon {
  margin-bottom: 0;
}

.form-wrap {
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .role-grid {
    grid-template-columns: 1fr;
  }
}

/* v7.3 — rank badge keeps its colors on hover (darker orange, white text) */
a.badge--aurora:hover {
  background: #C2410C;
  color: #FFFFFF;
}

/* v7.4 — bare dropdown icons (account menu) match the text color on hover;
   direct-child only so it can't touch glyphs inside .dd-ico tiles, which
   invert to white-on-brand on hover */
.dropdown__link:hover>i {
  color: var(--brand);
}

.dropdown__link:hover .dd-ico i {
  color: #FFFFFF;
}

/* v7.5 — rail card micro-title (was never defined; blade said pv-card__title,
   the old CSS said pp-card__title) */
.pv-card__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

/* v7.6 — responsive repair: re-assert mobile stacking that later unconditional
   overrides were defeating (append-order cascade bug), and give stacked grid
   tracks minmax(0,·) so wide content (tables) scrolls instead of inflating them */
@media (max-width: 980px) {
  .pv-about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

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

.article-body {
  min-width: 0;
}

/* v7.6b — wide article tables scroll inside their own box on small screens */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* v7.6c — zonebar wraps and its trailing item may shrink on small screens */
.pv-zonebar {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .pv-zonebar__cta {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* ==========================================================================
   v7.7 — CKEditor content restyle: one shared rhythm for every .prose block
   (articles, legal docs, tool overviews). One body size, a clearly stepped
   heading scale, framed images with figure-style captions, boxed striped
   tables that work with or without a <thead>, and coverage for the rest of
   what CKEditor can emit (links, code, mark, hr, sub/sup, kbd, figures).
   ========================================================================== */

/* ---- Body rhythm: p / li read at the same size (tables one step down) ---- */
.prose p,
.prose ul li,
.prose ol li {
  font-size: var(--fs-base);
  color: var(--text-2);
}

.prose p {
  line-height: 1.8;
  margin-bottom: var(--sp-4);
}

.article-body .prose p {
  /* v5.8 dropped article paragraphs to fs-md — re-unify with legal pages */
  font-size: var(--fs-base);
}

.prose ul li,
.prose ol li {
  line-height: 1.75;
  margin-bottom: 0.6rem;
}

.prose li>ul,
.prose li>ol {
  margin: 0.6rem 0 0.2rem;
}

.prose li>ul li::before {
  /* nested bullets step down to a hollow diamond */
  background: var(--card);
  border: 1.5px solid var(--aurora);
}

.prose> :first-child {
  margin-top: 0;
}

.prose> :last-child {
  margin-bottom: 0;
}

/* ---- Headings: four visibly different steps ---- */
.prose h2 {
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: var(--text);
}

.article-body .prose h2 {
  font-size: var(--fs-2xl);
  margin: var(--sp-12) 0 var(--sp-4);
}

.prose h3 {
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--text);
  margin: var(--sp-9) 0 var(--sp-3);
}

.article-body .prose h3 {
  font-size: var(--fs-xl);
  margin: var(--sp-9) 0 var(--sp-3);
}

.prose h4,
.article-body .prose h4 {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin: var(--sp-8) 0 var(--sp-2);
}

.prose h5,
.prose h6 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  margin: var(--sp-6) 0 var(--sp-2);
}

/* Tighter gap when a heading opens directly under its parent heading */
.prose h2+h3,
.prose h3+h4 {
  margin-top: var(--sp-2);
}

/* ---- Inline elements ---- */
.prose strong {
  color: var(--text);
  font-weight: 700;
}

.prose i,
.prose em {
  font-style: italic;
}

.prose a:not(.btn) {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(29, 78, 216, 0.3);
  text-underline-offset: 3px;
  transition: color var(--t-fast, 0.15s), text-decoration-color var(--t-fast, 0.15s);
}

.prose a:not(.btn):hover {
  color: #1E40AF;
  text-decoration-color: currentColor;
}

.prose mark {
  background: #FFEDD5;
  color: var(--text);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: #F3F6FC;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 0.12em 0.4em;
  color: var(--text);
}

.prose pre {
  background: #F8FAFC;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.prose kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125em;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0.1em 0.45em;
  color: var(--text);
}

.prose sub,
.prose sup {
  font-size: 0.72em;
}

.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--sp-10) 0;
}

/* ---- Images: framed, rounded, centered ---- */
.prose img {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  margin-left: auto;
  margin-right: auto;
}

.prose p:has(img) {
  text-align: center;
  margin: var(--sp-8) 0 var(--sp-4);
}

/* CKEditor/AI convention: the paragraph after an image holds an <i> caption */
.prose p:has(img)+p:has(> i:only-child) {
  text-align: center;
  margin: calc(-1 * var(--sp-2)) auto var(--sp-8);
  max-width: 56ch;
}

.prose p:has(img)+p>i:only-child {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-3);
}

/* ---- Figures (CKEditor wraps images and tables in <figure>) ---- */
.prose figure {
  margin: var(--sp-8) 0;
}

.prose figure.image {
  text-align: center;
}

.prose figure.image.image-style-align-left {
  text-align: left;
}

.prose figure.image.image-style-align-right {
  text-align: right;
}

.prose figcaption {
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
  margin: var(--sp-3) auto 0;
  max-width: 56ch;
}

/* ---- Tables: boxed + striped, with or without a <thead> ---- */
.prose figure.table {
  margin: var(--sp-8) 0;
  width: fit-content;
}

.prose figure.table>table {
  margin: 0;
}

.prose table {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin: var(--sp-8) 0;
}

.prose table th,
.prose table td {
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding: 0.75rem 1rem;
  border-right: 0;
  /* stripes + row rules carry the grid — no vertical lines */
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.65;
}

.prose table thead th {
  background: #EDF3FF;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

/* No-thead convention (AI content): the first row acts as the header… */
.prose table tr:first-child td {
  background: #EDF3FF;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.prose table thead+tbody tr:first-child td {
  /* …unless a real <thead> exists — then the first body row is a normal row */
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-weight: 400;
  border-bottom: 1px solid var(--line-soft);
}

.prose table tbody tr:nth-child(even) td {
  background: #F7FAFE;
}

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

/* Single-cell tables act as callout boxes — tint all, keep sentence case */
.prose table tr:first-child:last-child td:first-child:last-child {
  background: var(--brand-softer);
  color: var(--text-2);
  font-family: inherit;
  font-weight: 400;
  font-size: var(--fs-base);
  /* callouts read as body prose, not tabular data */
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--brand);
}

.prose table td p {
  font-size: inherit;
}

/* ---- Blockquote refinements (base style lives in v4) ---- */
.prose blockquote {
  margin: var(--sp-8) 0;
}

.prose blockquote p:first-child::before {
  content: '\201C';
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  margin-right: 0.15em;
}

/* ---- CKEditor alignment classes ---- */
.prose .text-center,
.prose [style*='text-align:center'],
.prose [style*='text-align: center'] {
  text-align: center;
}

/* Tool overview prose lives inside a zone whose own title is fs-2xl —
   step its content headings down one notch so hierarchy stays clear */
.pv-prose h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-8) 0 var(--sp-3);
}

.pv-prose h3 {
  font-size: var(--fs-lg);
  margin: var(--sp-6) 0 var(--sp-2);
}

/* v7.9 — discussion moved out of the article column into its own full-width
   tinted section (above Related articles) — strip the old appended-block chrome */
.discussion--section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* v8.5 — featured products section + cards (homepage) — dark theme */
.featured-sec {
  background: #1B2536;
}

.featured-sec .sec-head__kicker {
  color: var(--orange);
}

.featured-sec .sec-head__title {
  color: #FFFFFF;
}

.featured-sec .sec-head__sub {
  color: rgba(255, 255, 255, 0.6);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

.fcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.fcard:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.fcard__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

.fcard__name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

.fcard__rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}

.fcard__rating strong {
  color: #FFFFFF;
  font-weight: 700;
}

.fcard__desc {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
  flex: 1;
}

.fcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-full);
}

@media (max-width: 1024px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* v8.5 — footer contact list */
.footer2__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer2__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

.footer2__contact-item>i {
  color: var(--brand);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.footer2__contact-item a {
  color: var(--text-2);
  font-weight: 500;
  transition: color var(--t-fast);
}

.footer2__contact-item a:hover {
  color: var(--brand);
}

.footer2__addr {
  font-style: normal;
  max-width: 260px;
}

/* v8.5 — CTA band: subtle gradient background, tighter padding */
.cta {
  padding: var(--sp-16) 0;
  background: linear-gradient(135deg, #EEF4FF 0%, #F8FAFF 40%, #FFF7ED 100%);
  border-top: 1px solid #E0EAFF;
  border-bottom: 0;
}

@media (max-width: 640px) {
  .cta {
    padding: var(--sp-12) 0;
  }
}

/* v8.5 — cookie consent bar */
.cookie-bar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 960px;
  z-index: 9999;
  background: #1B2536;
  color: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: var(--sp-6) var(--sp-8);
}

.cookie-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.cookie-bar__text {
  flex: 1;
  min-width: 0;
}

.cookie-bar__text strong {
  display: block;
  font-size: var(--fs-base);
  color: #fff;
  margin-bottom: 0.35rem;
}

.cookie-bar__text p {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.cookie-bar__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.cookie-bar__actions .btn--brand {
  background: #fff;
  color: #1B2536;
}

.cookie-bar__actions .btn--brand:hover {
  background: #EEF4FF;
}

.cookie-bar__actions .btn--line {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.cookie-bar__actions .btn--line:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .cookie-bar {
    bottom: 0.75rem;
    width: calc(100% - 1.5rem);
    padding: var(--sp-5);
  }

  .cookie-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }

  .cookie-bar__actions {
    justify-content: stretch;
  }

  .cookie-bar__actions .btn {
    flex: 1;
  }
}

/* v8.6 — sponsorship plan cards + FAQ accordion */
.sp-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}

.sp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
}

.sp-plan--top {
  border: 2px solid var(--text);
  box-shadow: 0 22px 44px -28px rgba(20, 22, 31, .45);
}

.sp-plan__flag {
  position: absolute;
  top: -13px;
  left: 2rem;
  background: var(--text);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: var(--r-full);
}

.sp-plan__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 0 .35rem;
  color: var(--text);
}

.sp-plan__for {
  margin: 0 0 1.4rem;
  color: var(--text-2);
  font-size: .93rem;
  line-height: 1.5;
  min-height: 2.8em;
}

.sp-plan__price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .2rem;
}

.sp-plan__price b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text);
}

.sp-plan__price span {
  color: var(--text-2);
  font-size: .9rem;
}

.sp-plan__time {
  font-size: .85rem;
  color: var(--text-2);
  margin: 0 0 1.4rem;
}

.sp-plan .btn {
  justify-content: center;
  width: 100%;
}

.sp-plan__list {
  list-style: none;
  padding: 1.4rem 0 0;
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .75rem;
}

.sp-plan__list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  line-height: 1.5;
  font-size: .95rem;
  color: var(--text);
}

.sp-plan__list i {
  color: #1f9d55;
  margin-top: .2rem;
  flex: none;
}

.sp-plan__list li.sp-plan__inherit {
  font-weight: 600;
}

.sp-plans__note {
  margin: var(--sp-4) auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: .88rem;
  color: var(--text-2);
}

.sp-faq {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.sp-faq details {
  border-bottom: 1px solid var(--line);
}

.sp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}

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

.sp-faq summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-2);
  transition: transform .2s;
}

.sp-faq details[open] summary::after {
  transform: rotate(45deg);
}

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

.sp-faq p {
  margin: 0 0 1.2rem;
  color: var(--text-2);
  line-height: 1.7;
  max-width: 70ch;
}

/* v8.8 — Get Listed page: centered section heads */
.pg-listed .sec-head--z {
  text-align: center;
  margin-bottom: var(--sp-3);
}

.pg-listed .sec-head__title {
  font-size: 2rem;
}

.pg-listed .prose__lead {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
  font-size: .95rem;
  color: var(--text-2);
}

.pg-listed .pv-box .pf__title {
  font-size: 1.15rem;
}

.pg-listed .pp-pc>.pv-box .pf__title {
  font-size: 1.3rem;
}

.pg-listed .panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: .9rem;
  color: #fff;
  background: var(--text);
  border-radius: 50%;
}

.pg-listed .sp-plans__note {
  text-align: center;
}

.pg-listed .pd-narrow {
  text-align: center;
  margin-inline: auto;
}

@media (max-width: 960px) {
  .sp-plans {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .sp-plan__for {
    min-height: 0;
  }
}

/* v8.8 — Listing inquiry form */
.li-form-wrap {
  max-width: 720px;
  margin-inline: auto;
}

.li-form__hp {
  position: absolute;
  left: -9999px;
}

.li-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-5);
}

.li-field label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 6px;
}

.li-field input,
.li-field select {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: .92rem;
  color: var(--text);
  background: #fff;
  transition: border-color .15s;
}

.li-field input:focus,
.li-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .1);
}

.li-field input::placeholder {
  color: var(--text-3);
}

.li-req {
  color: #dc2626;
}

.li-field__err {
  display: block;
  color: #dc2626;
  font-size: .82rem;
  margin-top: 4px;
}

.li-checks {
  margin-top: var(--sp-5);
}

.li-checks__label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 8px;
}

.li-checks__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.li-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .55rem 1rem;
  background: var(--bg-2);
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.li-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

.btn--orange {
  background: var(--orange);
  color: #fff;
  border: none;
}

.btn--orange:hover {
  background: #c94a07;
}

.li-form__submit {
  margin-top: var(--sp-6);
}

@media (max-width: 640px) {
  .li-form__grid {
    grid-template-columns: 1fr;
  }
}

/* v8.9 — Editorial Policy page ----------------------------------------- */
.ep-page {
  --ep-ink: var(--ink, #14161f);
  --ep-muted: var(--muted, #5b6072);
  --ep-line: var(--line, #e4e6ee);
  --ep-brand: var(--brand, #3b5bdb);
  --ep-surface: var(--surface, #ffffff);
  --ep-soft: var(--bg-soft, #f5f6fa);
  --ep-ok: #1f9d55;
  --ep-no: #d64545;
}

/* Hero: meta line + commitment strip */
.ep-page .ep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .9rem;
  color: var(--ep-muted);
  margin-top: .25rem;
}

.ep-page .ep-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.ep-page .ep-meta b {
  color: var(--ep-ink);
  font-weight: 600;
}

.ep-page .ep-commit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.25rem;
}

.ep-page .ep-commit__item {
  background: var(--ep-surface);
  border: 1px solid var(--ep-line);
  border-radius: 14px;
  padding: 1.25rem;
}

.ep-page .ep-commit__item i {
  font-size: 1.5rem;
  color: var(--ep-brand);
}

.ep-page .ep-commit__item h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: .6rem 0 .3rem;
  color: var(--ep-ink);
}

.ep-page .ep-commit__item p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ep-muted);
}

/* Override .prose defaults inside ep-page custom components */
.ep-page .ep-box ul li::before {
  content: none;
}

.ep-page .ep-box ul li {
  padding-left: 0;
}

.ep-page .ep-box h4 {
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 .75rem;
}

.ep-page .ep-role h4 {
  text-transform: none;
  letter-spacing: 0;
}

/* Content components */
.ep-page .ep-note {
  display: flex;
  gap: .75rem;
  background: var(--ep-soft);
  border: 1px solid var(--ep-line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
}

.ep-page .ep-note i {
  color: var(--ep-brand);
  font-size: 1.3rem;
  flex: none;
  margin-top: .1rem;
}

.ep-page .ep-note p {
  margin: 0;
  font-size: .95rem;
}

.ep-page .ep-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

.ep-page .ep-role {
  border: 1px solid var(--ep-line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  background: var(--ep-surface);
}

.ep-page .ep-role h4 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .3rem;
}

.ep-page .ep-role p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ep-muted);
}

.ep-page .ep-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ep-line);
  border-radius: 12px;
  margin: 1.25rem 0;
}

.ep-page .ep-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .93rem;
  border: none;
}

.ep-page .ep-table th,
.ep-page .ep-table td {
  text-align: left;
  padding: .85rem 1rem;
  border: none;
  border-bottom: 1px solid var(--ep-line);
  vertical-align: top;
  line-height: 1.55;
}

.ep-page .ep-table thead th {
  background: var(--ep-soft);
  font-weight: 700;
}

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

.ep-page .ep-table tbody tr:nth-child(even) td {
  background: transparent;
}

.ep-page .ep-table tbody th {
  font-weight: 600;
}

.ep-page .ep-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

.ep-page .ep-box {
  border: 1px solid var(--ep-line);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  background: var(--ep-surface);
}

.ep-page .ep-box h4 {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 .75rem;
}

.ep-page .ep-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ep-page .ep-box li {
  display: flex;
  gap: .5rem;
  font-size: .93rem;
  line-height: 1.55;
  margin-bottom: .55rem;
}

.ep-page .ep-box li i {
  margin-top: .2rem;
  flex: none;
}

.ep-page .ep-box--ok h4,
.ep-page .ep-box--ok li i {
  color: var(--ep-ok);
}

.ep-page .ep-box--no h4,
.ep-page .ep-box--no li i {
  color: var(--ep-no);
}

.ep-page .ep-steps {
  counter-reset: st;
  list-style: none;
  padding-left: 0 !important;
}

.ep-page .ep-steps li {
  counter-increment: st;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
}

.ep-page .ep-steps li::before {
  content: counter(st);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--ep-ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 700;
}

.ep-page .ep-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: var(--ep-soft);
  border: 1px solid var(--ep-line);
  border-radius: 14px;
  padding: 1.5rem;
}

.ep-page .ep-contact p {
  margin: 0;
}

@media (max-width: 1024px) {
  .ep-page .ep-commit {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {

  .ep-page .ep-commit,
  .ep-page .ep-roles,
  .ep-page .ep-split {
    grid-template-columns: 1fr;
  }
}

/* v9.0 — About page ------------------------------------------------------ */
.ab-page {
  --ab-ink: var(--ink, #14161f);
  --ab-muted: var(--muted, #5b6072);
  --ab-line: var(--line, #e4e6ee);
  --ab-brand: var(--brand, #3b5bdb);
  --ab-surface: var(--surface, #ffffff);
  --ab-soft: var(--bg-soft, #f5f6fa);
}

.ab-page .ab-center {
  text-align: center;
}

.ab-page .ab-h2 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ab-ink);
  margin: 0 0 1rem;
}

.ab-page .ab-intro {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--ab-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.ab-page .ab-lede {
  font-weight: 700;
  color: var(--ab-ink);
  font-size: 1.12rem;
  margin: 0 0 1rem;
}

.ab-page .ab-text p {
  margin: 0 0 1rem;
  line-height: 1.75;
  max-width: 64ch;
}

.ab-page .ab-text a {
  font-weight: 600;
}

/* Hero */
.ab-page .ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 3.5rem;
  align-items: center;
}

.ab-page .ab-hero__tag {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ab-ink);
  margin: 0 0 1.25rem;
}

.ab-page .ab-hero .hero__lead {
  max-width: 56ch;
}

.ab-page .ab-hero__more {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 600;
}

.ab-page .ab-hero__img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-page .ab-hero__img img {
  width: 100%;
  height: auto;
}

/* Vision grid */
.ab-page .ab-vision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.ab-page .ab-vcard {
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  padding: 1.8rem 1.5rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}

.ab-page .ab-vcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 22, 31, .08);
}

.ab-page .ab-vcard__ico {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eef2ff;
  color: var(--ab-brand);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.ab-page .ab-vcard h3 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0 0 .5rem;
  color: var(--ab-ink);
}

.ab-page .ab-vcard p {
  margin: 0;
  color: var(--ab-muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* Numbers */
.ab-page .ab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.ab-page .ab-stat__ico {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  font-size: 1.6rem;
  color: var(--ab-ink);
  margin-bottom: 1rem;
}

.ab-page .ab-stat__n {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  line-height: 1.1;
  color: var(--ab-ink);
  margin-bottom: .35rem;
}

.ab-page .ab-stat__l {
  color: var(--ab-muted);
  line-height: 1.5;
}

/* What we do */
.ab-page .ab-do {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 3.5rem;
  align-items: start;
}

.ab-page .ab-audiences {
  display: grid;
  gap: 1rem;
}

.ab-page .ab-aud {
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: 14px;
  padding: 1.4rem;
  display: flex;
  gap: 1rem;
}

.ab-page .ab-aud__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ab-soft);
  color: var(--ab-brand);
  font-size: 1.35rem;
}

.ab-page .ab-aud h3 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0 0 .3rem;
}

.ab-page .ab-aud p {
  margin: 0;
  color: var(--ab-muted);
  line-height: 1.6;
  font-size: .95rem;
}

/* Values */
.ab-page .ab-values {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem 1.5rem;
  text-align: center;
}

.ab-page .ab-value__ico {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #fff;
}

.ab-page .ab-value h3 {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .4rem;
  color: var(--ab-ink);
}

.ab-page .ab-value p {
  margin: 0;
  color: var(--ab-muted);
  line-height: 1.6;
  font-size: .95rem;
}

/* Team */
.ab-page .ab-team {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

.ab-page .ab-member {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ab-page .ab-member__photo {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ab-soft);
  border: 1px solid var(--ab-line);
  margin-bottom: 1.1rem;
}

.ab-page .ab-member__photo::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--ab-muted);
}

.ab-page .ab-member__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.ab-page .ab-member__name {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ab-ink);
  margin: 0;
}

.ab-page .ab-member__role {
  margin: .2rem 0 .7rem;
  color: var(--ab-ink);
}

.ab-page .ab-member__bio {
  max-width: 34ch;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ab-muted);
}

.ab-page .ab-member__link {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  margin-top: .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ab-ink);
}

/* Testimonials */
.ab-page .ab-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.ab-page .ab-quote__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border-radius: 99px;
  background: #fff7ed;
  color: var(--orange, #EA580C);
}

.ab-page .ab-quote__title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .6rem;
  color: var(--ab-ink);
}

@media (max-width: 1080px) {
  .ab-page .ab-values {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (max-width: 960px) {

  .ab-page .ab-hero,
  .ab-page .ab-do {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

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

@media (max-width: 720px) {
  .ab-page .ab-quotes {
    grid-template-columns: 1fr;
  }

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

  .ab-page .ab-vision-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .ab-page .ab-team,
  .ab-page .ab-values {
    grid-template-columns: 1fr;
  }
}