/* ============================================================
   SAASCRITICA — DESIGN SYSTEM v3  ·  "Emerald & Bone"
   Display: Space Grotesk · Body: Inter · Mono: Space Mono
   Light, warm, editorial.
   ============================================================ */

/* --- 1. TOKENS --- */
:root {
   --ac-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --ac-display: 'Space Grotesk', 'Inter', sans-serif;
   --ac-mono: 'Space Mono', ui-monospace, monospace;

   /* warm stone scale */
   --ac-white: #ffffff;
   --ac-gray-50: #FAF8F2;
   --ac-gray-100: #F1ECE1;
   --ac-gray-200: #E7E1D4;
   --ac-gray-300: #D6CFBE;
   --ac-gray-400: #A8A294;
   --ac-gray-500: #8F897B;
   --ac-gray-600: #5F5A4E;
   --ac-gray-700: #413D34;
   --ac-gray-800: #2A2721;
   --ac-gray-900: #1A1815;

   /* emerald accent (named indigo for backward-compat) */
   --ac-indigo: #0B8A56;
   --ac-indigo-hover: #0A7049;
   --ac-indigo-light: #E4F1E9;
   --ac-violet: #34B37A;
   --ac-green: #0B8A56;
   --ac-amber: #E0922B;
   --ac-red: #D6493B;
   --ac-sky: #0EA5A0;

   /* friendly semantic aliases used by v3 components */
   --bg: #FAF8F2;
   --surface: #ffffff;
   --muted-bg: #F1ECE1;
   --ink: #1A1815;
   --ink-soft: #5F5A4E;
   --muted: #8F897B;
   --line: #E7E1D4;
   --em: #0B8A56;
   --em-dark: #0A7049;
   --em-tint: #E4F1E9;
   --em-glow: #5FD39B;
   --star: #E0922B;
   --dark: #0E1B14;

   --ac-shadow-sm: 0 1px 2px rgba(26, 24, 21, .05);
   --ac-shadow: 0 1px 3px rgba(26, 24, 21, .08), 0 1px 2px rgba(26, 24, 21, .05);
   --ac-shadow-md: 0 14px 32px -16px rgba(26, 24, 21, .22);
   --ac-shadow-lg: 0 26px 50px -22px rgba(26, 24, 21, .28);
   --ac-shadow-xl: 0 34px 60px -24px rgba(26, 24, 21, .32);

   --ac-radius-sm: 10px;
   --ac-radius: 14px;
   --ac-radius-lg: 20px;
   --ac-radius-xl: 28px;
   --ac-radius-full: 9999px;

   --primary: #0B8A56;
   --primary-hover: #0A7049;
   --primary-light: #E4F1E9;
   --primary-100: #D7EBDF;
   --black: #1A1815;
   --white: #ffffff;
   --light-text: #8F897B;
   --line-grey: #E7E1D4;
   --bg-grey: #FAF8F2;
   --bg-blue: #F1ECE1;
   --color-text: #1A1815;
   --color-text-secondary: #5F5A4E;
   --color-text-muted: #A8A294;
   --color-bg-dark: #0E1B14;
   --color-bg-dark-800: #2A2721;
   --color-success: #0B8A56;
   --color-danger: #D6493B;
   --color-star: #E0922B;
}

/* --- 2. RESET --- */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   scroll-padding-top: 84px;
}

body {
   font-family: var(--ac-font);
   color: var(--ink);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   background: var(--bg);
}

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

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

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

ul,
ol {
   list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--ac-display);
   font-weight: 600;
   line-height: 1.2;
   color: var(--ink);
   letter-spacing: -.02em;
}

/* --- 3. CONTAINER --- */
.ac-container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}

/* --- 4. GRID (backward compat) --- */
.container {
   width: 100%;
   padding-right: 0.75rem;
   padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width:576px) {
   .container {
      max-width: 540px
   }
}

@media (min-width:768px) {
   .container {
      max-width: 720px
   }
}

@media (min-width:992px) {
   .container {
      max-width: 960px
   }
}

@media (min-width:1200px) {
   .container {
      max-width: 1140px
   }
}

@media (min-width:1400px) {
   .container {
      max-width: 1320px
   }
}

.row {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(var(--bs-gutter-y)*-1);
   margin-right: calc(var(--bs-gutter-x)*-.5);
   margin-left: calc(var(--bs-gutter-x)*-.5)
}

.row>* {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
   padding-right: calc(var(--bs-gutter-x)*.5);
   padding-left: calc(var(--bs-gutter-x)*.5);
   margin-top: var(--bs-gutter-y)
}

.col-auto {
   flex: 0 0 auto;
   width: auto
}

.col-1 {
   flex: 0 0 auto;
   width: 8.333%
}

.col-2 {
   flex: 0 0 auto;
   width: 16.667%
}

.col-3 {
   flex: 0 0 auto;
   width: 25%
}

.col-4 {
   flex: 0 0 auto;
   width: 33.333%
}

.col-5 {
   flex: 0 0 auto;
   width: 41.667%
}

.col-6 {
   flex: 0 0 auto;
   width: 50%
}

.col-7 {
   flex: 0 0 auto;
   width: 58.333%
}

.col-8 {
   flex: 0 0 auto;
   width: 66.667%
}

.col-9 {
   flex: 0 0 auto;
   width: 75%
}

.col-10 {
   flex: 0 0 auto;
   width: 83.333%
}

.col-11 {
   flex: 0 0 auto;
   width: 91.667%
}

.col-12 {
   flex: 0 0 auto;
   width: 100%
}

.ml-auto {
   margin-left: auto !important
}

.order-0 {
   order: 0
}

.order-1 {
   order: 1
}

.order-2 {
   order: 2
}

.order-3 {
   order: 3
}

@media (min-width:576px) {
   .col-sm-1 {
      flex: 0 0 auto;
      width: 8.333%
   }

   .col-sm-2 {
      flex: 0 0 auto;
      width: 16.667%
   }

   .col-sm-3 {
      flex: 0 0 auto;
      width: 25%
   }

   .col-sm-4 {
      flex: 0 0 auto;
      width: 33.333%
   }

   .col-sm-5 {
      flex: 0 0 auto;
      width: 41.667%
   }

   .col-sm-6 {
      flex: 0 0 auto;
      width: 50%
   }

   .col-sm-7 {
      flex: 0 0 auto;
      width: 58.333%
   }

   .col-sm-8 {
      flex: 0 0 auto;
      width: 66.667%
   }

   .col-sm-9 {
      flex: 0 0 auto;
      width: 75%
   }

   .col-sm-10 {
      flex: 0 0 auto;
      width: 83.333%
   }

   .col-sm-11 {
      flex: 0 0 auto;
      width: 91.667%
   }

   .col-sm-12 {
      flex: 0 0 auto;
      width: 100%
   }
}

@media (min-width:768px) {
   .col-md-1 {
      flex: 0 0 auto;
      width: 8.333%
   }

   .col-md-2 {
      flex: 0 0 auto;
      width: 16.667%
   }

   .col-md-3 {
      flex: 0 0 auto;
      width: 25%
   }

   .col-md-4 {
      flex: 0 0 auto;
      width: 33.333%
   }

   .col-md-5 {
      flex: 0 0 auto;
      width: 41.667%
   }

   .col-md-6 {
      flex: 0 0 auto;
      width: 50%
   }

   .col-md-7 {
      flex: 0 0 auto;
      width: 58.333%
   }

   .col-md-8 {
      flex: 0 0 auto;
      width: 66.667%
   }

   .col-md-9 {
      flex: 0 0 auto;
      width: 75%
   }

   .col-md-10 {
      flex: 0 0 auto;
      width: 83.333%
   }

   .col-md-11 {
      flex: 0 0 auto;
      width: 91.667%
   }

   .col-md-12 {
      flex: 0 0 auto;
      width: 100%
   }

   .order-md-0 {
      order: 0
   }

   .order-md-1 {
      order: 1
   }

   .order-md-2 {
      order: 2
   }

   .order-md-3 {
      order: 3
   }
}

@media (min-width:992px) {
   .col-lg-1 {
      flex: 0 0 auto;
      width: 8.333%
   }

   .col-lg-2 {
      flex: 0 0 auto;
      width: 16.667%
   }

   .col-lg-3 {
      flex: 0 0 auto;
      width: 25%
   }

   .col-lg-4 {
      flex: 0 0 auto;
      width: 33.333%
   }

   .col-lg-5 {
      flex: 0 0 auto;
      width: 41.667%
   }

   .col-lg-6 {
      flex: 0 0 auto;
      width: 50%
   }

   .col-lg-7 {
      flex: 0 0 auto;
      width: 58.333%
   }

   .col-lg-8 {
      flex: 0 0 auto;
      width: 66.667%
   }

   .col-lg-9 {
      flex: 0 0 auto;
      width: 75%
   }

   .col-lg-10 {
      flex: 0 0 auto;
      width: 83.333%
   }

   .col-lg-11 {
      flex: 0 0 auto;
      width: 91.667%
   }

   .col-lg-12 {
      flex: 0 0 auto;
      width: 100%
   }

   .order-lg-0 {
      order: 0
   }

   .order-lg-1 {
      order: 1
   }
}

/* --- 5. UTILITIES --- */
.align-items-center {
   align-items: center !important
}

.justify-content-center {
   justify-content: center !important
}

.mt-1 {
   margin-top: .25rem !important
}

.mt-2 {
   margin-top: .5rem !important
}

.mt-3 {
   margin-top: 1rem !important
}

.mt-4 {
   margin-top: 1.5rem !important
}

.mt-5 {
   margin-top: 3rem !important
}

.mb-1 {
   margin-bottom: .25rem !important
}

.mb-2 {
   margin-bottom: .5rem !important
}

.mb-3 {
   margin-bottom: 1rem !important
}

.mb-4 {
   margin-bottom: 1.5rem !important
}

.mb-5 {
   margin-bottom: 3rem !important
}

.pt-0 {
   padding-top: 0 !important
}

.pt-1 {
   padding-top: .25rem !important
}

.pt-2 {
   padding-top: .5rem !important
}

.pt-3 {
   padding-top: 1rem !important
}

.pt-4 {
   padding-top: 1.5rem !important
}

.pt-5 {
   padding-top: 3rem !important
}

.pb-0 {
   padding-bottom: 0 !important
}

.pb-1 {
   padding-bottom: .25rem !important
}

.pb-2 {
   padding-bottom: .5rem !important
}

.pb-3 {
   padding-bottom: 1rem !important
}

.pb-4 {
   padding-bottom: 1.5rem !important
}

.pb-5 {
   padding-bottom: 3rem !important
}

.pe-0 {
   padding-right: 0 !important
}

.pe-1 {
   padding-right: .25rem !important
}

.pe-2 {
   padding-right: .5rem !important
}

.pe-3 {
   padding-right: 1rem !important
}

.pe-4 {
   padding-right: 1.5rem !important
}

.pe-5 {
   padding-right: 3rem !important
}

.ps-0 {
   padding-left: 0 !important
}

.ps-1 {
   padding-left: .25rem !important
}

.ps-2 {
   padding-left: .5rem !important
}

.ps-3 {
   padding-left: 1rem !important
}

.ps-4 {
   padding-left: 1.5rem !important
}

.ps-5 {
   padding-left: 3rem !important
}

.m-auto {
   margin: auto !important
}

.p-0 {
   padding: 0 !important
}

.p-1 {
   padding: .25rem !important
}

.p-2 {
   padding: .5rem !important
}

.p-3 {
   padding: 1rem !important
}

.p-4 {
   padding: 1.5rem !important
}

.p-5 {
   padding: 3rem !important
}

.offset-1 {
   margin-left: 8.333%
}

.offset-2 {
   margin-left: 14%
}

.text-right,
.text_right {
   text-align: right
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.ac-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   padding: 14px 26px;
   border: none;
   border-radius: 12px;
   font-family: var(--ac-font);
   font-weight: 600;
   font-size: 14.5px;
   background: var(--em);
   color: #fff;
   cursor: pointer;
   transition: .15s;
   white-space: nowrap;
}

.ac-btn:hover {
   background: var(--em-dark);
   transform: translateY(-2px);
   box-shadow: var(--ac-shadow-md);
}

.ac-btn--sm {
   padding: 9px 18px;
   font-size: 13.5px;
   border-radius: 10px;
}

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

.ac-btn--onDark:hover {
   background: var(--muted-bg);
   color: var(--dark);
}

.ac-btn--ghost {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, .25);
}

.ac-btn--ghost:hover {
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .4);
   transform: none;
   box-shadow: none;
}

.ac-btn--outline {
   background: transparent;
   color: var(--ink);
   border: 1.5px solid var(--line);
}

.ac-btn--outline:hover {
   border-color: var(--em);
   color: var(--em-dark);
   background: var(--em-tint);
   transform: none;
   box-shadow: none;
}

button.site_button,
.site_button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 13px 28px;
   border: none;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   font-family: var(--ac-font);
   background: var(--em);
   color: #fff;
   cursor: pointer;
   transition: .15s;
}

button.site_button:hover,
.site_button:hover {
   background: var(--em-dark);
}

button.site_btn,
.site_btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 22px;
   border: none;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
   font-family: var(--ac-font);
   background: var(--em);
   color: #fff;
   cursor: pointer;
   transition: .15s;
}

button.site_btn:hover {
   background: var(--em-dark);
}

/* ============================================================
   7. HEADER
   ============================================================ */
.ac-header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(250, 248, 242, .82);
   backdrop-filter: blur(14px) saturate(180%);
   border-bottom: 1px solid var(--line);
   transition: box-shadow .2s ease;
}

.ac-header.is-scrolled {
   box-shadow: 0 6px 24px -16px rgba(26, 24, 21, .35);
}

.ac-header__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 68px;
   gap: 16px;
}

.ac-header__brand img {
   width: 180px;
}

.ac-header__nav {
   display: flex;
   align-items: center;
   flex: 1;
   justify-content: center;
}

.ac-header__links {
   display: flex;
   align-items: center;
   gap: 2px;
}

.ac-header__links>li {
   position: relative;
}

.ac-header__links>li>a,
.ac-header__dropdown-trigger {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 15px;
   border-radius: 10px;
   font-family: var(--ac-font);
   font-size: 14px;
   font-weight: 500;
   color: var(--ink-soft);
   background: none;
   border: none;
   cursor: pointer;
   transition: .15s;
}

.ac-header__links>li>a:hover,
.ac-header__dropdown-trigger:hover {
   color: var(--ink);
   background: var(--muted-bg);
}

.ac-header__dropdown-trigger i {
   font-size: 10px;
   transition: transform .2s;
}

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

.ac-header__dropdown {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   min-width: 210px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 14px;
   box-shadow: var(--ac-shadow-lg);
   padding: 7px;
   z-index: 50;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px) scale(.97);
   transition: .15s;
}

.ac-header__dropdown.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

.ac-header__dropdown a {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 10px 12px;
   border-radius: 9px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--ink-soft);
   transition: .12s;
}

.ac-header__dropdown a i {
   width: 16px;
   text-align: center;
   font-size: 13px;
   color: var(--muted);
}

.ac-header__dropdown a:hover {
   background: var(--muted-bg);
   color: var(--ink);
}

.ac-header__dropdown a:hover i {
   color: var(--em);
}

.ac-header__actions {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
}

.ac-header__login {
   padding: 8px 10px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-soft);
   transition: .15s;
}

.ac-header__mobile-auth {
   display: none;
}

.ac-header__login:hover {
   color: var(--em-dark);
}

.ac-header__profile {
   position: relative;
}

.ac-header__avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--em), var(--violet, #34B37A));
   color: #fff;
   font-family: var(--ac-display);
   font-size: 14px;
   font-weight: 700;
   display: grid;
   place-items: center;
   border: 2px solid transparent;
   transition: .15s;
}

.ac-header__avatar:hover {
   border-color: var(--em-tint);
}

.ac-header__profile-menu {
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
   min-width: 230px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 14px;
   box-shadow: var(--ac-shadow-lg);
   padding: 7px;
   z-index: 50;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px) scale(.97);
   transition: .15s;
}

.ac-header__profile-menu.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

.ac-header__profile-info {
   padding: 11px 12px 9px;
}

.ac-header__profile-name {
   display: block;
   font-family: var(--ac-display);
   font-size: 14.5px;
   font-weight: 600;
   color: var(--ink);
}

.ac-header__profile-email {
   display: block;
   font-size: 12px;
   color: var(--muted);
   margin-top: 1px;
}

.ac-header__profile-divider {
   height: 1px;
   background: var(--line);
   margin: 5px 0;
}

.ac-header__profile-menu a,
.ac-header__profile-menu .ac-header__logout {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 10px 12px;
   border-radius: 9px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--ink-soft);
   transition: .12s;
}

.ac-header__profile-menu a i,
.ac-header__profile-menu .ac-header__logout i {
   width: 16px;
   text-align: center;
   font-size: 13px;
   color: var(--muted);
}

.ac-header__profile-menu a:hover,
.ac-header__profile-menu .ac-header__logout:hover {
   background: var(--muted-bg);
   color: var(--ink);
}

.ac-header__profile-menu form {
   display: contents;
}

.ac-header__logout:hover {
   color: var(--ac-red) !important;
}

.ac-header__logout:hover i {
   color: var(--ac-red) !important;
}

.ac-header__burger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 38px;
   height: 38px;
   padding: 8px;
   background: none;
   border: none;
}

.ac-header__burger span {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--ink);
   border-radius: 2px;
   transition: .25s;
}

body.menu-open .ac-header__burger span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}

body.menu-open .ac-header__burger span:nth-child(2) {
   opacity: 0;
}

body.menu-open .ac-header__burger span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width:960px) {
   .ac-header__nav {
      position: fixed;
      top: 68px;
      left: 0;
      right: 0;
      height: calc(100vh - 68px);
      background: var(--bg);
      flex-direction: column;
      justify-content: flex-start;
      padding: 20px 24px;
      overflow-y: auto;
      z-index: 99;
      transform: translateX(-100%);
      transition: transform .3s ease;
   }

   body.menu-open .ac-header__nav {
      transform: translateX(0);
   }

   .ac-header__links {
      flex-direction: column;
      width: 100%;
      gap: 0;
   }

   .ac-header__links>li {
      width: 100%;
   }

   .ac-header__links>li>a,
   .ac-header__dropdown-trigger {
      width: 100%;
      padding: 15px 12px;
      font-size: 16px;
      justify-content: space-between;
   }

   .ac-header__dropdown {
      position: static;
      box-shadow: none;
      border: 0;
      opacity: 1;
      visibility: hidden;
      max-height: 0;
      overflow: hidden;
      transform: none;
      padding: 0;
      transition: max-height .3s, visibility .3s;
      background: var(--muted-bg);
      border-radius: 10px;
   }

   .ac-header__dropdown.is-open {
      visibility: visible;
      max-height: 420px;
      padding: 7px;
   }

   .ac-header__actions {
      margin-left: auto;
   }

   .ac-header__actions .ac-btn,
   .ac-header__login {
      display: none;
   }

   .ac-header__burger {
      display: flex;
   }

   .ac-header__profile-menu {
      position: fixed;
      top: 68px;
      right: 16px;
      left: auto;
      min-width: 230px;
      max-width: calc(100vw - 32px);
   }

   .ac-header__mobile-auth {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
   }

   .ac-header__mobile-auth .ac-btn {
      width: 100%;
      justify-content: center;
   }
}

/* ============================================================
   8. SHARED EDITORIAL BITS
   ============================================================ */
.hp-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   font-family: var(--ac-mono);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .14em;
   color: var(--muted);
   margin-bottom: 20px;
}

.hp-eyebrow b {
   color: var(--em);
   font-weight: 700;
}

.hp-eyebrow__dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--em);
   box-shadow: 0 0 0 4px var(--em-tint);
}

.hp-eyebrow--light {
   color: rgba(255, 255, 255, .55);
}

.hp-eyebrow--light b {
   color: var(--em-glow);
}

.hp-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 28px;
   margin-bottom: 46px;
}

.hp-head h2 {
   font-size: clamp(1.9rem, 3.2vw, 2.65rem);
   line-height: 1.05;
   letter-spacing: -.03em;
}

.hp-head p {
   margin-top: 13px;
   color: var(--ink-soft);
   font-size: 15.5px;
   line-height: 1.55;
   max-width: 540px;
}

.hp-head--center {
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.hp-head--center p {
   margin-left: auto;
   margin-right: auto;
}

.hp-textlink {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--ac-mono);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--em-dark);
   white-space: nowrap;
   padding-bottom: 3px;
   border-bottom: 1.5px solid transparent;
   transition: .15s;
   flex-shrink: 0;
}

.hp-textlink:hover {
   border-color: var(--em);
}

.hp-textlink i {
   transition: transform .2s;
}

.hp-textlink:hover i {
   transform: translateX(3px);
}

.hp-section {
   padding: 96px 0;
}

.hp-section--muted {
   background: var(--muted-bg);
}

.hp-section--tight {
   padding: 44px 0;
}

/* ============================================================
   9. HERO
   ============================================================ */
.hp-hero {
   background: var(--bg);
   padding: 70px 0 0;
   position: relative;
   overflow: hidden;
}

.hp-hero::before {
   content: '';
   position: absolute;
   top: -25%;
   left: 50%;
   transform: translateX(-50%);
   width: 70%;
   height: 90%;
   background: radial-gradient(ellipse at center, rgba(11, 138, 86, .09), transparent 62%);
   pointer-events: none;
}

.hp-hero__inner {
   max-width: 860px;
   margin: 0 auto;
   text-align: center;
   position: relative;
   z-index: 1;
}

.hp-hero__title {
   font-family: var(--ac-display);
   font-size: clamp(2.5rem, 6.4vw, 4.5rem);
   font-weight: 700;
   line-height: 1.0;
   letter-spacing: -.04em;
   margin-bottom: 24px;
}

.hp-hero__title em {
   font-style: normal;
   color: var(--em);
   position: relative;
   white-space: nowrap;
}

.hp-hero__title em::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: .08em;
   height: .09em;
   background: var(--em-glow);
   opacity: .5;
   border-radius: 2px;
}

.hp-hero__lede {
   font-size: clamp(1.05rem, 1.5vw, 1.28rem);
   color: var(--ink-soft);
   line-height: 1.55;
   max-width: 600px;
   margin: 0 auto 36px;
}

.hp-search {
   position: relative;
   max-width: 600px;
   margin: 0 auto;
}

.hp-search i {
   position: absolute;
   left: 22px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--muted);
   font-size: 16px;
}

.hp-search input {
   width: 100%;
   padding: 19px 152px 19px 52px;
   border: 1.5px solid var(--line);
   border-radius: 16px;
   background: var(--surface);
   font-family: var(--ac-font);
   font-size: 16px;
   color: var(--ink);
   outline: none;
   box-shadow: var(--ac-shadow-sm);
   transition: .15s;
}

.hp-search input::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
}

.hp-search input::placeholder {
   color: var(--muted);
}

.hp-search input:focus {
   border-color: var(--em);
   box-shadow: 0 0 0 4px var(--em-tint);
}

.hp-search button {
   position: absolute;
   right: 7px;
   top: 7px;
   bottom: 7px;
   padding: 0 26px;
   border: none;
   border-radius: 11px;
   background: var(--em);
   color: #fff;
   font-family: var(--ac-font);
   font-weight: 600;
   font-size: 15px;
   cursor: pointer;
   transition: .15s;
}

.hp-search button:hover {
   background: var(--em-dark);
}

.hp-hero__tags {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 24px;
}

.hp-hero__tags-label {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--muted);
}

.hp-hero__tags a {
   font-size: 13px;
   font-weight: 500;
   color: var(--ink-soft);
   padding: 7px 15px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--surface);
   transition: .15s;
}

.hp-hero__tags a:hover {
   border-color: var(--em);
   color: var(--em-dark);
   background: var(--em-tint);
}

.hp-hero__stats {
   display: flex;
   justify-content: center;
   gap: 48px;
   margin-top: 52px;
   flex-wrap: wrap;
}

.hp-hero__stat b {
   font-family: var(--ac-display);
   font-size: 2.1rem;
   font-weight: 700;
   color: var(--ink);
   letter-spacing: -.03em;
   display: block;
   line-height: 1;
}

.hp-hero__stat span {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--muted);
   margin-top: 8px;
   display: block;
}

.hp-marquee {
   margin-top: 76px;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   padding: 22px 0;
   overflow: hidden;
   -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
   mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hp-marquee__track {
   display: flex;
   align-items: center;
   gap: 46px;
   width: max-content;
   animation: hp-marq 44s linear infinite;
}

.hp-marquee:hover .hp-marquee__track {
   animation-play-state: paused;
}

.hp-marquee__item {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
}

.hp-marquee__item img {
   width: 30px;
   height: 30px;
   object-fit: contain;
   border-radius: 7px;
   filter: grayscale(1);
   opacity: .55;
   transition: .2s;
}

.hp-marquee__item span {
   font-family: var(--ac-display);
   font-weight: 500;
   font-size: 15px;
   color: var(--ink-soft);
   transition: .2s;
   white-space: nowrap;
}

.hp-marquee__item:hover img {
   filter: none;
   opacity: 1;
}

.hp-marquee__item:hover span {
   color: var(--ink);
}

@keyframes hp-marq {
   to {
      transform: translateX(-50%);
   }
}

/* ============================================================
   10. TRENDING TOOLS
   ============================================================ */
.hp-tools {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
}

.hp-tool {
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 24px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 18px;
   transition: .2s;
}

.hp-tool:hover {
   border-color: var(--em);
   transform: translateY(-4px);
   box-shadow: var(--ac-shadow-md);
}

.hp-tool__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
}

.hp-tool__head img {
   width: 52px;
   height: 52px;
   object-fit: contain;
   border-radius: 12px;
   border: 1px solid var(--line);
   background: #fff;
   padding: 3px;
}

.hp-tool__score {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-family: var(--ac-mono);
   font-size: 12px;
   font-weight: 700;
   color: var(--ink);
   background: var(--muted-bg);
   padding: 4px 9px;
   border-radius: 999px;
}

.hp-tool__score i {
   color: var(--star);
   font-size: 10px;
}

.hp-tool h3 {
   font-size: 17px;
   font-weight: 600;
   margin-bottom: 6px;
}

.hp-tool__cat {
   font-family: var(--ac-mono);
   font-size: 10.5px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--em-dark);
   display: inline-block;
   margin-bottom: 9px;
}

.hp-tool p {
   font-size: 13.5px;
   color: var(--ink-soft);
   line-height: 1.5;
   flex: 1;
}

.hp-tool__foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 16px;
   padding-top: 14px;
   border-top: 1px solid var(--line);
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--muted);
}

.hp-tool__foot i {
   color: var(--em);
   transition: transform .2s;
}

.hp-tool:hover .hp-tool__foot i {
   transform: translateX(3px);
}

/* ============================================================
   11. SPOTLIGHT
   ============================================================ */
.hp-spotlight {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   background: var(--dark);
   border-radius: 26px;
   overflow: hidden;
   color: #fff;
   position: relative;
}

.hp-spotlight::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 50% 60% at 12% 15%, rgba(52, 179, 122, .22), transparent), radial-gradient(ellipse 45% 55% at 92% 92%, rgba(11, 138, 86, .16), transparent);
   pointer-events: none;
}

.hp-spotlight__main {
   padding: 52px 48px;
   position: relative;
   z-index: 1;
}

.hp-spotlight__id {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 22px;
}

.hp-spotlight__id img {
   width: 64px;
   height: 64px;
   object-fit: contain;
   border-radius: 14px;
   background: #fff;
   padding: 7px;
   flex-shrink: 0;
}

.hp-spotlight__id h3 {
   color: #fff;
   font-size: 1.65rem;
   line-height: 1.1;
}

.hp-spotlight__id span {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--em-glow);
}

.hp-spotlight__desc {
   color: rgba(255, 255, 255, .72);
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 26px;
   max-width: 440px;
}

.hp-spotlight__meta {
   display: flex;
   align-items: center;
   gap: 28px;
   margin-bottom: 30px;
}

.hp-spotlight__rating {
   display: inline-flex;
   align-items: baseline;
   gap: 9px;
   font-family: var(--ac-display);
   font-size: 1.6rem;
   font-weight: 700;
   color: #fff;
}

.hp-spotlight__rating i {
   color: var(--star);
   font-size: 1.05rem;
}

.hp-spotlight__rating small {
   font-family: var(--ac-mono);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: rgba(255, 255, 255, .5);
   font-weight: 400;
}

.hp-spotlight__count {
   font-family: var(--ac-mono);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: rgba(255, 255, 255, .6);
}

.hp-spotlight__quote {
   padding: 52px 48px;
   background: rgba(255, 255, 255, .04);
   border-left: 1px solid rgba(255, 255, 255, .1);
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.hp-spotlight__quote>i {
   font-size: 1.5rem;
   color: var(--em-glow);
   margin-bottom: 18px;
}

.hp-spotlight__quote blockquote {
   font-family: var(--ac-display);
   font-size: 1.35rem;
   line-height: 1.5;
   color: #fff;
   font-weight: 500;
   letter-spacing: -.01em;
   margin-bottom: 26px;
}

.hp-spotlight__quote figcaption {
   display: flex;
   align-items: center;
   gap: 13px;
}

.hp-spotlight__avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--em), var(--violet, #34B37A));
   display: grid;
   place-items: center;
   color: #fff;
   font-weight: 700;
   font-family: var(--ac-display);
   flex-shrink: 0;
}

.hp-spotlight__quote figcaption strong {
   display: block;
   color: #fff;
   font-size: 14px;
   font-family: var(--ac-display);
}

.hp-spotlight__quote figcaption small {
   color: rgba(255, 255, 255, .55);
   font-size: 12px;
}

/* ============================================================
   12. FRESH FINDS
   ============================================================ */
.hp-fresh {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.hp-fresh__item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   padding: 20px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   transition: .2s;
}

.hp-fresh__item:hover {
   border-color: var(--em);
   transform: translateY(-3px);
   box-shadow: var(--ac-shadow-md);
}

.hp-fresh__item>img {
   width: 48px;
   height: 48px;
   object-fit: contain;
   border-radius: 11px;
   border: 1px solid var(--line);
   background: #fff;
   padding: 3px;
   flex-shrink: 0;
}

.hp-fresh__body {
   flex: 1;
   min-width: 0;
}

.hp-fresh__top {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 5px;
}

.hp-fresh__top h3 {
   font-size: 15px;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.hp-tag-new {
   font-family: var(--ac-mono);
   font-size: 9px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--em-dark);
   background: var(--em-tint);
   padding: 3px 8px;
   border-radius: 999px;
   flex-shrink: 0;
}

.hp-fresh__body p {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.45;
   margin-bottom: 9px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.hp-fresh__date {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: var(--muted);
}

/* ============================================================
   13. CATEGORIES
   ============================================================ */
.hp-cats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.hp-cat {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
   transition: .2s;
}

.hp-cat:hover {
   border-color: var(--em);
}

.hp-cat__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   border-bottom: 1px solid var(--line);
}

.hp-cat__name {
   font-family: var(--ac-display);
   font-size: 15px;
   font-weight: 600;
   color: var(--ink);
}

.hp-cat:hover .hp-cat__name {
   color: var(--em-dark);
}

.hp-cat__count {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: var(--em-dark);
   background: var(--em-tint);
   padding: 3px 9px;
   border-radius: 999px;
}

.hp-cat__list {
   padding: 8px;
}

.hp-cat__item {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 9px 11px;
   border-radius: 10px;
   transition: .12s;
}

.hp-cat__item:hover {
   background: var(--muted-bg);
}

.hp-cat__item img {
   width: 28px;
   height: 28px;
   object-fit: contain;
   border-radius: 7px;
   border: 1px solid var(--line);
   flex-shrink: 0;
}

.hp-cat__item span {
   flex: 1;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--ink-soft);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.hp-cat__item i {
   font-size: 10px;
   color: var(--ac-gray-300);
   transition: .15s;
}

.hp-cat__item:hover i {
   color: var(--em);
   transform: translateX(2px);
}

/* ============================================================
   14. HOW IT WORKS
   ============================================================ */
.hp-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 28px;
}

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

.hp-step {
   padding-top: 24px;
   border-top: 2px solid var(--ink);
}

.hp-step__num {
   font-family: var(--ac-mono);
   font-size: 13px;
   font-weight: 700;
   color: var(--em);
   display: block;
   margin-bottom: 18px;
}

.hp-step h3 {
   font-size: 19px;
   font-weight: 600;
   margin-bottom: 10px;
}

.hp-step p {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.6;
}

/* ============================================================
   15. CTA BAND
   ============================================================ */
.hp-cta {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 40px;
   align-items: center;
   background: var(--dark);
   border-radius: 26px;
   padding: 56px 52px;
   position: relative;
   overflow: hidden;
}

.hp-cta::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 40% 60% at 85% 12%, rgba(52, 179, 122, .2), transparent), radial-gradient(ellipse 50% 60% at 4% 92%, rgba(11, 138, 86, .15), transparent);
}

.hp-cta__content {
   position: relative;
   z-index: 1;
   max-width: 560px;
}

.hp-cta h2 {
   color: #fff;
   font-size: clamp(1.7rem, 2.6vw, 2.35rem);
   line-height: 1.08;
   margin-bottom: 14px;
}

.hp-cta p {
   color: rgba(255, 255, 255, .68);
   line-height: 1.6;
   margin-bottom: 28px;
}

.hp-cta__actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.hp-cta__aside {
   position: relative;
   z-index: 1;
   display: flex;
   gap: 40px;
   justify-content: flex-end;
}

.hp-cta__stat b {
   font-family: var(--ac-display);
   font-size: 2.5rem;
   font-weight: 700;
   color: #fff;
   display: block;
   line-height: 1;
   letter-spacing: -.03em;
}

.hp-cta__stat span {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--em-glow);
   margin-top: 8px;
   display: block;
}

/* ============================================================
   16. REVIEWS + COMMUNITY
   ============================================================ */
.hp-reviews {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.hp-review {
   display: flex;
   flex-direction: column;
   padding: 26px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   transition: .2s;
}

.hp-review:hover {
   border-color: var(--em);
   box-shadow: var(--ac-shadow);
}

.hp-review__stars {
   margin-bottom: 14px;
}

.hp-review__stars i {
   color: var(--star);
   font-size: 14px;
}

.hp-review__text {
   font-family: var(--ac-display);
   font-size: 16px;
   line-height: 1.55;
   color: var(--ink);
   font-weight: 500;
   flex: 1;
   letter-spacing: -.005em;
}

.hp-review__foot {
   display: flex;
   align-items: center;
   gap: 11px;
   margin-top: 20px;
   padding-top: 18px;
   border-top: 1px solid var(--line);
}

.hp-review__avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-family: var(--ac-display);
   font-weight: 700;
   font-size: 15px;
   flex-shrink: 0;
}

.hp-review__who {
   flex: 1;
   min-width: 0;
}

.hp-review__who strong {
   display: block;
   font-family: var(--ac-display);
   font-size: 13.5px;
   color: var(--ink);
   margin-bottom: -5px;
}

.hp-review__who a {
   font-size: 12px;
   color: var(--muted);
}

.hp-review__who a:hover {
   color: var(--em-dark);
}

.hp-review__logo {
   width: 34px;
   height: 34px;
   object-fit: contain;
   border-radius: 8px;
   border: 1px solid var(--line);
   flex-shrink: 0;
}

.hp-community {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   margin-top: 32px;
   padding: 22px 28px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
}

.hp-community__text {
   font-size: 15px;
   color: var(--ink-soft);
}

.hp-community__text strong {
   color: var(--ink);
   font-family: var(--ac-display);
}

.hp-community__people {
   display: flex;
}

.hp-community__person {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   overflow: hidden;
   border: 2px solid var(--surface);
   margin-left: -10px;
   background: var(--em-tint);
   display: grid;
   place-items: center;
}

.hp-community__person:first-child {
   margin-left: 0;
}

.hp-community__person img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hp-community__person span {
   font-family: var(--ac-display);
   font-weight: 700;
   color: var(--em-dark);
   font-size: 15px;
}

.hp-community__person.is-initial::after {
   content: attr(data-initial);
   font-family: var(--ac-display);
   font-weight: 700;
   color: var(--em-dark);
   font-size: 15px;
}

/* ============================================================
   17. ARTICLES
   ============================================================ */
.hp-articles {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
}

.hp-article {
   display: flex;
   flex-direction: column;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
   transition: .2s;
}

.hp-article:hover {
   border-color: var(--em);
   transform: translateY(-4px);
   box-shadow: var(--ac-shadow-md);
}

.hp-article__img {
   aspect-ratio: 16/10;
   overflow: hidden;
   background: var(--muted-bg);
}

.hp-article__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .4s;
}

.hp-article:hover .hp-article__img img {
   transform: scale(1.05);
}

.hp-article__body {
   padding: 18px 20px 22px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.hp-article__cat {
   font-family: var(--ac-mono);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--em-dark);
   margin-bottom: 10px;
}

.hp-article h3 {
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.25;
   flex: 1;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.hp-article__meta {
   font-family: var(--ac-mono);
   font-size: 12px;
   color: var(--muted);
   margin-top: 14px;
}

/* ============================================================
   18. BUYER'S GUIDE
   ============================================================ */
.hp-guide {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 56px;
   align-items: start;
}

.hp-guide__intro h2 {
   font-size: clamp(1.7rem, 2.6vw, 2.2rem);
   line-height: 1.1;
   margin-bottom: 14px;
}

.hp-guide__intro p {
   color: var(--ink-soft);
   font-size: 15.5px;
   line-height: 1.6;
   margin-bottom: 22px;
}

.hp-guide__item {
   display: flex;
   gap: 22px;
   padding: 22px 0;
   border-top: 1px solid var(--line);
}

.hp-guide__item:first-child {
   border-top: none;
   padding-top: 0;
}

.hp-guide__no {
   font-family: var(--ac-mono);
   font-size: 13px;
   font-weight: 700;
   color: var(--em);
   flex-shrink: 0;
   padding-top: 2px;
}

.hp-guide__no i {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 11px;
   background: var(--em-tint);
   color: var(--em-dark);
   font-size: 14px;
}

.hp-guide__item h4 {
   font-size: 16.5px;
   font-weight: 600;
   margin-bottom: 6px;
}

.hp-guide__item p {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.55;
}

/* ============================================================
   19. NEWSLETTER
   ============================================================ */
.hp-news {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 40px;
   align-items: center;
   background: var(--dark);
   border-radius: 26px;
   padding: 52px;
   position: relative;
   overflow: hidden;
}

.hp-news::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 50% 90% at 100% 50%, rgba(52, 179, 122, .18), transparent);
}

.hp-news__text {
   position: relative;
   z-index: 1;
}

.hp-news__text h2 {
   color: #fff;
   font-size: clamp(1.6rem, 2.4vw, 2.1rem);
   margin-bottom: 10px;
}

.hp-news__text p {
   color: rgba(255, 255, 255, .65);
   line-height: 1.55;
   max-width: 460px;
}

.hp-news__form {
   position: relative;
   z-index: 1;
   display: flex;
   gap: 10px;
}

.hp-news__form input {
   width: 280px;
   max-width: 100%;
   padding: 15px 18px;
   border: 1.5px solid rgba(255, 255, 255, .15);
   background: rgba(255, 255, 255, .06);
   border-radius: 12px;
   color: #fff;
   font-family: var(--ac-font);
   font-size: 15px;
   outline: none;
   transition: .15s;
}

.hp-news__form input::placeholder {
   color: rgba(255, 255, 255, .4);
}

.hp-news__form input:focus {
   border-color: var(--em-glow);
}

/* ============================================================
   20. FOOTER
   ============================================================ */
.ac-footer {
   background: var(--dark);
   padding: 72px 0 0;
}

.ac-footer__grid {
   display: grid;
   grid-template-columns: 1.5fr repeat(4, 1fr);
   gap: 40px;
   padding-bottom: 52px;
}

.ac-footer__brand img {
   width: 180px;
   margin-bottom: 10px;
}

.ac-footer__about>p {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.65;
   max-width: 270px;
   margin-bottom: 22px;
}

.ac-footer__social {
   display: flex;
   gap: 7px;
}

.ac-footer__social a {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .08);
   display: grid;
   place-items: center;
   color: rgba(255, 255, 255, .55);
   font-size: 14px;
   transition: .15s;
}

.ac-footer__social a:hover {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

.ac-footer__col h5 {
   font-family: var(--ac-mono);
   font-size: 11px;
   font-weight: 700;
   color: rgba(255, 255, 255, .85);
   text-transform: uppercase;
   letter-spacing: .1em;
   margin-bottom: 18px;
}

.ac-footer__col li+li {
   margin-top: 10px;
}

.ac-footer__col a {
   font-size: 13.5px;
   color: rgba(255, 255, 255, .5);
   transition: color .15s ease;
}

.ac-footer__col a:hover {
   color: #fff;
}

.ac-footer__bottom {
   padding: 24px 0;
   border-top: 1px solid rgba(255, 255, 255, .07);
   text-align: center;
}

.ac-footer__bottom span {
   font-family: var(--ac-mono);
   font-size: 12px;
   color: rgba(255, 255, 255, .4);
}

/* ============================================================
   21. BACKWARD COMPAT — CONTENT PAGES
   ============================================================ */
.hero_banner {
   padding: 80px 0;
   background: var(--ac-gray-50)
}

.sectionPadding {
   padding: 80px 0
}

.section_heading {
   margin-bottom: 40px;
   text-align: center
}

.section_heading h3 {
   font-size: 1.9rem;
   font-weight: 700;
   margin-bottom: 10px;
   letter-spacing: -.02em
}

.section_heading p {
   font-size: 15px;
   max-width: 560px;
   margin: 0 auto;
   color: var(--ink-soft)
}

.newHero {
   padding: 80px 0;
   background: var(--dark);
   position: relative
}

.newHeroText {
   text-align: center
}

.newHeroText h1 {
   font-size: clamp(2rem, 4vw, 2.75rem);
   line-height: 1.12;
   margin-bottom: 16px;
   color: #fff;
   font-weight: 700;
   letter-spacing: -.03em
}

.newHeroText h1 span {
   color: var(--em-glow)
}

.newHeroText h2 {
   font-size: 17px;
   font-weight: 400;
   color: rgba(255, 255, 255, .6);
   line-height: 1.6;
   font-family: var(--ac-font)
}

.newHeroText p {
   display: inline-block;
   margin-top: 24px;
   padding: 7px 20px;
   border-radius: 999px;
   font-family: var(--ac-mono);
   font-size: 12px;
   color: rgba(255, 255, 255, .6);
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1)
}

.about_text h3 {
   font-size: 1.6rem;
   font-weight: 700
}

.about_text p {
   margin-top: 12px;
   color: var(--ink-soft)
}

.about_text ul {
   padding-left: 18px;
   margin-top: 15px
}

.about_text ul li {
   margin: 10px 0;
   color: var(--ink-soft)
}

.banner_img img {
   width: 100%;
   border-radius: var(--ac-radius)
}

.featuresText {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px;
   width: 90%;
   transition: .2s
}

.centerFeature {
   margin-left: 10%
}

.featuresText img {
   width: 56px
}

.featuresText h3 {
   font-size: 1rem;
   margin-bottom: 4px
}

.featuresText p {
   font-size: 14px;
   line-height: 1.5;
   color: var(--ink-soft)
}

.featuresText:hover {
   border-color: var(--em);
   box-shadow: var(--ac-shadow)
}

.whyChooseUs {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius-lg);
   padding: 28px;
   transition: .2s;
   height: 100%
}

.whyChooseUs span {
   width: 48px;
   height: 48px;
   border-radius: var(--ac-radius-sm);
   background: var(--em);
   color: #fff;
   margin-bottom: 20px;
   display: grid;
   place-items: center;
   font-size: 1.25rem;
   font-weight: 700;
   transition: .2s;
   font-family: var(--ac-display)
}

.whyChooseUs:hover span {
   border-radius: var(--ac-radius-full)
}

.whyChooseUs h4 {
   font-size: 1.1rem;
   margin-bottom: 6px
}

.whyChooseUs p {
   font-size: 14px;
   line-height: 1.6;
   color: var(--ink-soft)
}

.whyChooseUs:hover {
   border-color: var(--em);
   box-shadow: var(--ac-shadow)
}

.cta_box {
   padding: 60px 0
}

.jumbo_cta {
   padding: 48px;
   border-radius: var(--ac-radius-xl);
   margin-top: 40px;
   background: var(--dark);
   overflow: hidden;
   position: relative
}

.jumbo_text h3 {
   font-size: 1.6rem;
   color: #fff;
   margin-bottom: 12px;
   font-weight: 700
}

.jumbo_text p {
   color: rgba(255, 255, 255, .65)
}

.jumbo_image img {
   position: absolute;
   bottom: 0;
   right: 20px;
   width: 400px
}

.searchBar {
   margin-top: 30px;
   position: relative
}

.searchBar input {
   padding: 16px 55px 16px 20px;
   width: 100%;
   border-radius: var(--ac-radius);
   border: 1.5px solid var(--line);
   outline: none;
   font-size: 15px;
   font-family: var(--ac-font);
   background: var(--surface);
   transition: .15s
}

.searchBar input:focus {
   border-color: var(--em);
   box-shadow: 0 0 0 4px var(--em-tint)
}

.searchBar button {
   background: var(--em);
   border-radius: var(--ac-radius-sm);
   padding: 10px 14px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
   color: #fff;
   font-size: 16px;
   cursor: pointer;
   position: absolute;
   right: 7px;
   top: 7px;
   transition: .15s
}

.searchBar button:hover {
   background: var(--em-dark)
}

/* ============================================================
   22. BACKWARD COMPAT — SOFTWARE PAGES
   ============================================================ */
.softwareHero {
   text-align: center;
   padding: 64px 0;
   background: var(--dark);
   color: #fff
}

.softwareHero img {
   width: 72px;
   height: 72px;
   object-fit: contain;
   border-radius: var(--ac-radius);
   background: #fff;
   padding: 6px
}

.softwareHero h1 a {
   color: #fff;
   font-size: 1.9rem;
   font-weight: 700
}

.softwareHero h1 a i {
   font-size: 1rem
}

.softwareHero p.tagline {
   color: rgba(255, 255, 255, .65);
   font-size: 16px;
   margin-top: 8px;
   line-height: 1.5
}

.softwareHero p {
   color: rgba(255, 255, 255, .65)
}

.new_list_reviews {
   margin: 20px 0
}

.new_list_reviews i {
   color: var(--star);
   font-size: 14px
}

.new_list_reviews span {
   color: var(--star);
   font-weight: 500;
   display: inline;
   font-size: 14px
}

.new_list_reviews a {
   color: rgba(255, 255, 255, .7)
}

.comp_margin {
   padding: 44px 0
}

.softContent {
   padding-right: 30px
}

.softContent h2 {
   font-size: 1.6rem;
   font-weight: 700
}

.softContent h3 {
   font-size: 1.3rem;
   margin: 26px 0 6px
}

.softContent h4 {
   font-size: 1.1rem;
   margin: 26px 0 6px
}

.softContent a {
   color: var(--em-dark);
   border-bottom: 1px solid var(--em)
}

.overview_content p {
   margin-top: 16px
}

.overview_content ul,
.overview_content ol {
   padding-left: 18px;
   margin: 12px 0
}

.overview_content li {
   color: var(--ink-soft);
   line-height: 1.7
}

.extra_content,
.software_features {
   margin-top: 10px;
   font-size: 15px;
   line-height: 1.7
}

.extra_content ul,
.software_features ul {
   padding-left: 18px
}

.extra_content ul li,
.software_features ul li {
   margin-top: 10px
}

.extra_content p {
   margin: 10px 0 15px
}

.pros_cons h4 {
   font-size: 1.1rem !important;
   font-weight: 600;
   margin-top: 0 !important
}

.pros_cons p {
   padding-left: 25px;
   margin-top: 12px;
   line-height: 1.7;
   color: var(--ink-soft);
   position: relative
}

.pros_list {
   padding: 24px;
   border-radius: var(--ac-radius-lg);
   height: 100%;
   border: 1px solid #A7E0C0;
   background: #EDF7F1
}

.pros_list p::before {
   content: "\f00c";
   font-family: FontAwesome;
   position: absolute;
   font-size: 16px;
   color: var(--em);
   left: 0
}

.cons_list {
   padding: 24px;
   border-radius: var(--ac-radius-lg);
   height: 100%;
   background: #FBEDEB;
   border: 1px solid #F0B4AC
}

.cons_list p::before {
   content: "\f00d";
   font-family: FontAwesome;
   position: absolute;
   font-size: 16px;
   color: var(--ac-red);
   left: 0
}

.acScore {
   display: inline-flex;
   gap: 10px;
   background: rgba(255, 255, 255, .08);
   padding: 8px 20px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .12)
}

.acScore h4 {
   color: rgba(255, 255, 255, .7);
   font-size: 1rem;
   font-weight: 400
}

.acScore span {
   font-size: 1.1rem;
   font-weight: 700;
   color: #fff
}

.softwareTable {
   border: 2px solid var(--em);
   padding: 20px;
   border-radius: var(--ac-radius-lg);
   background: var(--surface)
}

.softwareTable h4 {
   font-size: 1.1rem;
   margin-bottom: 12px
}

.softwareTable ul {
   padding-left: 18px
}

.softwareTable ul li {
   margin-top: 8px;
   font-size: 14px
}

.softwareTable ul li a {
   color: var(--ink-soft)
}

.softwareTable ul li a:hover {
   color: var(--em-dark)
}

.related_software {
   background: var(--surface);
   margin-top: 20px;
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   padding: 16px;
   transition: .15s
}

.related_software:hover {
   box-shadow: var(--ac-shadow-sm);
   border-color: var(--em)
}

.related_meta {
   display: flex
}

.related_meta img {
   width: 64px;
   height: 64px;
   margin-right: 12px;
   object-fit: contain;
   border-radius: var(--ac-radius-sm);
   border: 1px solid var(--line)
}

.related_meta h3 a {
   color: var(--ink);
   font-weight: 600
}

.related_meta p {
   color: var(--ink-soft);
   font-size: 14px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical
}

.related_cat a {
   padding: 8px 16px;
   background: var(--dark);
   display: inline-block;
   border-radius: 999px;
   color: #fff;
   font-weight: 500;
   font-size: 14px;
   margin: 12px 4px 0 0;
   transition: .15s
}

.related_cat a:hover {
   background: var(--em)
}

.stickyBar {
   position: sticky;
   top: 20px
}

.alterNatives {
   background: var(--muted-bg)
}

.softwareCta {
   padding: 40px 24px;
   background: var(--dark);
   color: #fff;
   border-radius: var(--ac-radius-lg);
   text-align: center
}

.softwareCta h3 {
   color: #fff;
   font-size: 1.3rem;
   margin-top: 8px
}

.softwareCta p {
   color: rgba(255, 255, 255, .65);
   margin: 8px 0 16px;
   font-size: 14px
}

.softwareCta span {
   background: rgba(255, 255, 255, .08);
   padding: 4px 12px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .12);
   font-size: 13px;
   color: rgba(255, 255, 255, .7)
}

.review_outer {
   background: var(--surface);
   margin-bottom: 24px;
   border: 1px solid var(--line);
   border-radius: var(--ac-radius)
}

.ratings {
   border-left: 1px solid var(--line);
   padding: 24px;
   height: 100%
}

.feedback_area {
   padding: 24px
}

.reviewer {
   display: flex
}

.reviewer img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   object-fit: cover;
   margin-right: 10px
}

.reviewer h3 {
   font-size: 16px
}

.reviewer h3 a {
   color: var(--ink)
}

.reviewer span {
   color: var(--muted);
   font-size: 14px
}

.reviewer span a {
   color: var(--em-dark);
   font-weight: 600
}

.review_text h3 {
   font-size: 15px;
   margin: 16px 0 4px;
   font-weight: 600
}

.review_text p {
   line-height: 1.7;
   font-size: 14px;
   color: var(--ink-soft)
}

.ratings h3 {
   font-size: 15px;
   font-weight: 500;
   margin-bottom: 4px
}

.rating_star_count {
   margin-bottom: 8px
}

.rating_star_count span {
   color: var(--star);
   font-size: 13px;
   letter-spacing: -2px
}

.review_stats {
   display: flex;
   align-items: center
}

.reviews_icon {
   width: 28px;
   height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 4px 8px 4px 0;
   border-radius: 3px
}

.review_stats i {
   color: var(--muted)
}

.review_comp_title h3 {
   font-size: 1.3rem
}

.review_comp_title button {
   margin-top: 0
}

.sticky_bar {
   position: sticky;
   top: -1px;
   background: var(--surface);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   z-index: 8
}

#nav-menu {
   position: sticky;
   top: 0
}

#nav-menu ul {
   display: flex
}

#nav-menu ul li {
   padding: 12px 0;
   list-style: none
}

#nav-menu ul li a {
   font-size: 15px;
   color: var(--ink);
   padding: 12px 16px;
   font-weight: 500;
   border-left: 1px solid var(--line);
   white-space: nowrap
}

#nav-menu ul li:last-child a {
   border-right: 1px solid var(--line)
}

#nav-menu ul li a:hover {
   color: #fff !important;
   background: var(--em)
}

.active_tab {
   color: #fff !important;
   background: var(--em)
}

.new_listing_page {
   padding: 44px 0;
   background: var(--muted-bg);
   overflow: hidden
}

.new_listing_page h2 {
   font-size: 1.4rem;
   font-weight: 600
}

.new_list_item {
   padding: 24px;
   border-radius: var(--ac-radius);
   background: var(--surface);
   border: 1px solid var(--line);
   margin-top: 20px;
   position: relative
}

.new_list_meta {
   display: flex
}

.new_list_meta img {
   width: 72px;
   height: 72px;
   margin-right: 12px;
   object-fit: contain;
   border-radius: var(--ac-radius-sm);
   border: 1px solid var(--line)
}

.new_list_meta h3 {
   font-size: 1.1rem;
   font-weight: 600;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical
}

.new_list_meta span {
   color: var(--ink-soft);
   font-size: 14px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical
}

.new_list_meta h3 a {
   color: var(--ink)
}

.new_list_content {
   margin: 12px 0
}

.new_service_list h4 {
   margin-top: 20px;
   font-size: 16px
}

.new_service_list span {
   padding: 6px 14px;
   background: var(--muted-bg);
   border-radius: 999px;
   font-size: 13px;
   display: inline-block;
   margin-top: 8px
}

.head_section_padding {
   padding: 44px 0
}

.listing_page_content h1 {
   font-size: 1.9rem;
   font-weight: 700
}

.listing_page_content h3 {
   font-size: 14px;
   font-weight: 400;
   margin-bottom: 1rem;
   color: var(--ink-soft);
   font-family: var(--ac-font)
}

.listing_page_content p {
   line-height: 1.75
}

.software_feat {
   padding: 30px 0 10px;
   border-top: 1px solid var(--line)
}

.software_features {
   padding-left: 5px
}

figure.table {
   overflow-x: auto
}

.pricing_block {
   background: var(--surface);
   border: 1px solid var(--dark);
   border-radius: var(--ac-radius);
   margin-top: 24px
}

.pricing_header {
   padding: 10px 12px;
   background: var(--dark);
   color: #fff
}

.pricing_header h4 {
   text-align: center;
   font-weight: 500;
   color: #fff
}

.pricing_body {
   padding: 12px 16px 16px
}

.price_box {
   text-align: center;
   margin: 10px 0
}

.price_box span {
   font-size: 1.5rem;
   color: var(--ink);
   font-weight: 700;
   font-family: var(--ac-display)
}

.pricing_body p {
   font-weight: 500
}

.pricing_body ul {
   padding-left: 18px
}

.pricing_body ul li {
   margin-top: 8px;
   font-size: 14px
}

/* ============================================================
   23. BACKWARD COMPAT — BLOG PAGES
   ============================================================ */
.blog_section {
   padding: 80px 0;
   background: var(--muted-bg)
}

.article_card {
   height: 100%;
   padding: 16px;
   border-radius: var(--ac-radius);
   background: var(--surface);
   border: 1px solid var(--line);
   transition: .15s
}

.article_card:hover {
   box-shadow: var(--ac-shadow);
   border-color: var(--em)
}

.article_card img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   object-position: top;
   border-radius: var(--ac-radius-sm)
}

.article_card h3 {
   margin: 12px 0;
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.5;
   color: var(--ink)
}

.article_card span {
   font-size: 12px;
   color: var(--muted)
}

.article_card span a {
   color: var(--em-dark);
   font-weight: 500
}

.blogSection {
   padding: 60px 0;
   background: var(--dark)
}

.relatedArticles {
   background: var(--muted-bg);
   padding: 60px 0
}

.article_user {
   display: flex;
   flex-wrap: wrap;
   gap: 20px
}

.articleExcerpt {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap
}

.articleIcon {
   display: inline-flex;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   background: var(--em);
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   font-family: var(--ac-display)
}

.articleExcerptDetails span {
   font-size: 13px;
   color: rgba(255, 255, 255, .5)
}

.articleExcerptDetails p {
   font-size: 14px;
   color: rgba(255, 255, 255, .5);
   margin-top: -2px
}

.articleExcerptDetails p a {
   color: #fff
}

.articleExcerptDetails p a:hover {
   text-decoration: underline
}

.blogBanner img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   border-radius: var(--ac-radius);
   border: 1px solid rgba(255, 255, 255, .1)
}

.articleCategory {
   display: inline-block;
   padding: 5px 15px;
   background: var(--em);
   border-radius: 999px;
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   font-family: var(--ac-mono);
   text-transform: uppercase;
   letter-spacing: .05em
}

.article_meta h1 {
   font-size: clamp(1.6rem, 3vw, 2.1rem);
   line-height: 1.15;
   margin: 14px 0 20px;
   font-weight: 700;
   color: #fff
}

.blogContent {
   padding: 48px 0
}

.article_content {
   margin-bottom: 12px;
   line-height: 1.8
}

.article_content p {
   margin-bottom: 16px;
   line-height: 1.8
}

.article_content h2 {
   font-size: 1.5rem;
   margin: 26px 0 12px;
   font-weight: 700
}

.article_content h3 {
   font-size: 1.25rem;
   margin: 22px 0 10px;
   font-weight: 700
}

.article_content h4 {
   font-size: 1.1rem;
   margin: 18px 0 8px;
   font-weight: 700
}

.article_content h5 {
   font-size: 1rem;
   margin-bottom: 4px;
   font-weight: 700
}

.article_content img {
   width: 100% !important;
   height: auto !important;
   margin: 16px 0;
   border-radius: var(--ac-radius)
}

.article_content ul,
.article_content ol {
   padding-left: 20px;
   margin-bottom: 12px
}

.article_content li {
   line-height: 1.8;
   margin: 8px 0
}

.article_content a {
   color: var(--em-dark)
}

.article_content strong {
   font-weight: 700;
   color: var(--ink)
}

.article_content iframe {
   max-width: 100%
}

.article_content figcaption {
   font-size: 13px;
   color: var(--muted)
}

.article_content td {
   border: 1px solid var(--line);
   padding: 10px
}

.article_content .table {
   width: 100%;
   overflow: auto;
   margin-bottom: 16px
}

.article_content tr {
   width: 100%;
   white-space: nowrap
}

.article_content .table::-webkit-scrollbar {
   display: none
}

.table_of_content {
   margin-bottom: 24px;
   position: sticky;
   top: 40px
}

.table_of_content h5 {
   font-size: 1rem;
   margin-bottom: 12px;
   font-weight: 700
}

.table_of_content ul {
   padding-left: 18px
}

.table_of_content li {
   line-height: 1.3;
   margin-top: 8px;
   font-size: 14px
}

.table_of_content a {
   color: var(--em-dark)
}

.buyers_guide {
   padding: 20px;
   background: var(--muted-bg);
   border-radius: var(--ac-radius);
   margin-top: 20px;
   position: sticky;
   top: 20px;
   border: 1px solid var(--line)
}

.buyers_guide h5 {
   font-size: 17px;
   font-weight: 700;
   margin-bottom: 12px
}

.buyers_guide ul {
   padding-left: 18px
}

.buyers_guide li {
   margin: 8px 0 0;
   font-size: 15px;
   list-style: circle
}

.buyers_guide li a {
   color: var(--ink)
}

.newBlogPage {
   padding: 60px 0;
   background: var(--dark)
}

.newBlogPageHead h1 {
   color: #fff;
   font-size: clamp(1.7rem, 3vw, 2.2rem);
   font-weight: 700
}

.newBlogPageHead p {
   color: rgba(255, 255, 255, .6);
   font-size: 16px;
   margin-top: 6px
}

.scrollingTabs {
   border-bottom: 1px solid var(--line)
}

.scrollingTabs .wrapper {
   padding: 20px 0;
   position: relative;
   background: var(--bg);
   width: 100%;
   overflow: hidden
}

.scrollingTabs .icon {
   position: absolute;
   top: 0;
   height: 100%;
   width: 80px;
   display: flex;
   align-items: center;
   z-index: 1;
   pointer-events: none;
   visibility: hidden;
   opacity: 0;
   transition: opacity .2s
}

.scrollingTabs .icon.visible {
   visibility: visible;
   opacity: 1;
   pointer-events: auto
}

.scrollingTabs .icon:first-child {
   left: 0;
   background: linear-gradient(90deg, var(--bg) 70%, transparent);
   justify-content: flex-start
}

.scrollingTabs .icon:last-child {
   right: 0;
   background: linear-gradient(-90deg, var(--bg) 70%, transparent);
   justify-content: flex-end
}

.scrollingTabs .icon i {
   cursor: pointer;
   width: 36px;
   height: 36px;
   font-size: 1rem;
   text-align: center;
   line-height: 36px;
   border-radius: 50%;
   background: var(--surface);
   border: 1px solid var(--line);
   pointer-events: auto
}

.scrollingTabs .tabs_box {
   display: flex;
   align-items: center;
   gap: 8px;
   overflow-x: auto;
   scroll-behavior: smooth
}

.scrollingTabs .tabs_box::-webkit-scrollbar {
   display: none
}

.scrollingTabs .tabs_box.dragging {
   scroll-behavior: auto;
   cursor: grabbing
}

.scrollingTabs .tab {
   white-space: nowrap;
   background: var(--surface);
   border: 1px solid var(--line);
   padding: 8px 16px;
   border-radius: 999px;
   font-size: 14px;
   cursor: pointer;
   list-style: none;
   position: relative;
   transition: .15s
}

.scrollingTabs .tab a {
   color: var(--ink)
}

.scrollingTabs .tab a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%
}

.scrollingTabs .tab:hover {
   background: var(--em);
   border-color: transparent
}

.scrollingTabs .tab:hover a {
   color: #fff
}

.newBlogList {
   padding: 30px 0 48px
}

.featuredBlog {
   position: relative;
   border-radius: var(--ac-radius);
   overflow: hidden
}

.featuredBlog img {
   aspect-ratio: 16/9;
   object-fit: cover;
   width: 100%
}

.featuredMeta {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 40px
}

.featuredMeta::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, rgba(14, 27, 20, .92), transparent)
}

.featuredMetaContent {
   position: absolute;
   z-index: 1;
   padding: 32px;
   left: 0;
   bottom: 0
}

.featuredMetaContent h3 {
   font-size: 1.5rem;
   margin: 6px 0 16px;
   font-weight: 700
}

.featuredMetaContent h3 a {
   color: #fff
}

.featuredMetaContent span a {
   color: var(--em-glow);
   padding-left: 8px;
   font-size: 13px;
   position: relative
}

.featuredMetaContent span a::before {
   position: absolute;
   content: "";
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--em-glow);
   left: 0;
   top: 6px
}

.featuredMetaContent p {
   color: rgba(255, 255, 255, .6);
   font-size: 13px
}

.featuredMetaContent p a {
   color: rgba(255, 255, 255, .6);
   font-weight: 500
}

.sidePost {
   display: flex;
   gap: 14px;
   align-items: center;
   position: relative
}

.sidePost:not(:last-of-type) {
   margin-bottom: 20px
}

.sidePost img {
   width: 120px;
   aspect-ratio: 4/3;
   object-fit: cover;
   border-radius: var(--ac-radius-sm)
}

.sidePost h3 a {
   color: var(--ink);
   font-weight: 500;
   font-size: 15px;
   line-height: 1.4;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   line-clamp: 3;
   -webkit-box-orient: vertical
}

.sidePost h3 a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%
}

.sidePost:hover a {
   color: var(--em-dark)
}

.categoryRow {
   display: flex;
   align-items: center;
   justify-content: space-between
}

.categoryRow h3 {
   font-size: 1.4rem;
   padding-left: 12px;
   border-left: 4px solid var(--em);
   font-weight: 700
}

.categoryRow button {
   margin-top: 0;
   padding: 10px 20px;
   font-size: 14px
}

.blogCardNew {
   border-radius: var(--ac-radius);
   border: 1px solid var(--line);
   position: relative;
   height: 100%;
   background: var(--surface);
   transition: .15s
}

.blogCardNew:hover {
   box-shadow: var(--ac-shadow);
   border-color: var(--em)
}

.blogCardNew img {
   border-radius: var(--ac-radius) var(--ac-radius) 0 0;
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   object-position: top
}

.blogCardNew .blogCardMeta {
   padding: 24px
}

.blogCardNew .blogCardMeta h3 {
   font-size: 1.1rem;
   line-height: 1.4;
   font-weight: 600
}

.blogCardNew .blogCardMeta h3 a {
   color: var(--ink);
   transition: .15s
}

.blogCardNew .blogCardMeta h3 a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%
}

.blogCardNew .blogCardMeta p {
   font-size: 14px;
   line-height: 1.6;
   margin: 8px 0 16px;
   color: var(--ink-soft)
}

.blogCardNew .blogCardMeta h3 a:hover {
   color: var(--em-dark)
}

.blogCardMeta span a {
   color: var(--em-dark);
   display: inline-block;
   margin-bottom: 8px;
   font-size: 12px;
   font-weight: 600;
   position: relative;
   z-index: 1;
   font-family: var(--ac-mono);
   text-transform: uppercase;
   letter-spacing: .04em
}

.nameDate {
   display: flex;
   justify-content: space-between;
   font-size: 13px !important;
   margin-bottom: 0 !important;
   color: var(--muted);
   border-top: 1px solid var(--line);
   padding-top: 12px
}

.nameDate span {
   position: relative;
   padding-left: 10px
}

.nameDate a {
   color: var(--muted);
   padding-left: 10px;
   position: relative
}

.nameDate a:before,
.nameDate span:before {
   position: absolute;
   content: "";
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--em);
   left: 0;
   top: 7px
}

/* ============================================================
   24. BACKWARD COMPAT — AUTH / FORMS / DASHBOARD
   ============================================================ */
.login_form {
   padding: 32px;
   background: var(--surface);
   border-radius: var(--ac-radius-lg);
   border: 1px solid var(--line);
   box-shadow: var(--ac-shadow)
}

.login_form h1 {
   margin-bottom: 24px;
   text-align: center;
   font-size: 1.5rem;
   font-weight: 700
}

.acc_form h3 {
   font-size: 15px
}

.acc_form input {
   padding: 13px 14px;
   width: 100%;
   outline: none;
   border: 1.5px solid var(--line);
   background: var(--surface);
   margin-bottom: 12px;
   border-radius: var(--ac-radius-sm);
   font-family: var(--ac-font);
   font-size: 15px;
   transition: .15s
}

.acc_form input:focus {
   border-color: var(--em);
   box-shadow: 0 0 0 3px var(--em-tint)
}

.acc_form textarea {
   padding: 13px 14px;
   width: 100%;
   outline: none;
   border: 1.5px solid var(--line);
   background: var(--surface);
   margin-bottom: 10px;
   border-radius: var(--ac-radius-sm);
   min-height: 150px;
   font-family: var(--ac-font);
   font-size: 15px;
   transition: .15s
}

.acc_form textarea:focus {
   border-color: var(--em)
}

.acc_form button {
   width: 100%;
   padding: 12px
}

.captcha {
   display: flex;
   align-items: center;
   margin-bottom: 10px
}

.captcha img {
   width: 100px;
   margin-right: 10px
}

.captcha input {
   margin-bottom: 0 !important
}

.alert_message {
   padding: 12px 16px;
   border-radius: var(--ac-radius-sm);
   color: #8a2c22;
   background: #FBEDEB;
   border: 1px solid #F0B4AC;
   margin-bottom: 16px
}

.alert_message ul {
   font-size: 14px;
   padding-left: 20px
}

.alert_message li {
   margin: 4px 0
}

.success_message {
   padding: 12px 16px;
   border-radius: var(--ac-radius-sm);
   border: 1px solid #A7E0C0;
   color: #0A6b42;
   background: #EDF7F1;
   font-size: 14px;
   margin-bottom: 16px
}

.form_header h3 {
   margin-bottom: 20px;
   border-bottom: 1px solid var(--line);
   padding-bottom: 10px
}

.form_sidebar {
   padding: 20px;
   background: var(--surface);
   border-radius: var(--ac-radius);
   border: 1px solid var(--line)
}

.form_sidebar li {
   list-style: none;
   margin: 12px 0;
   position: relative
}

.form_sidebar li a {
   color: var(--ink);
   font-weight: 600
}

.form_sidebar span {
   display: inline-flex;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--dark);
   color: #fff;
   justify-content: center;
   align-items: center;
   margin-right: 10px;
   font-weight: 500;
   font-size: 14px;
   font-family: var(--ac-mono)
}

li.active_step a {
   color: var(--em-dark)
}

li.active_step::after {
   display: block;
   position: absolute;
   right: 0;
   top: 10px;
   font: var(--fa-font-solid);
   content: "\f0da";
   color: var(--em);
   font-size: 18px
}

li.active_step span {
   background: var(--em)
}

.form_container {
   padding: 24px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius)
}

.input_form h3 {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 6px;
   margin-top: 10px
}

.input_form h3 span {
   color: var(--ac-red)
}

.input_form input {
   width: 100%;
   padding: 11px 14px;
   border: 1.5px solid var(--line);
   border-radius: var(--ac-radius-sm);
   margin-bottom: 10px;
   font-size: 14px;
   font-family: var(--ac-font);
   transition: .15s
}

.input_form input:focus {
   outline: none;
   border-color: var(--em)
}

.input_form textarea {
   width: 100%;
   padding: 11px 14px;
   border: 1.5px solid var(--line);
   border-radius: var(--ac-radius-sm);
   margin-bottom: 10px;
   min-height: 150px;
   font-family: var(--ac-font);
   font-size: 14px;
   line-height: 1.5;
   transition: .15s
}

.input_form textarea:focus {
   outline: none;
   border-color: var(--em)
}

.input_form select {
   width: 100%;
   padding: 11px 14px;
   background: var(--surface);
   border: 1.5px solid var(--line);
   border-radius: var(--ac-radius-sm);
   margin-bottom: 10px;
   font-size: 14px;
   font-family: var(--ac-font);
   transition: .15s
}

.input_form select:focus {
   outline: none;
   border-color: var(--em)
}

.radio_box {
   display: flex;
   align-items: center;
   margin: 8px 0
}

.radio_box label {
   font-size: 14px;
   margin: 0 10px 0 5px
}

.radio_box input[type="checkbox"] {
   margin-right: 10px;
   width: 18px;
   height: 18px;
   margin-bottom: 0
}

.radio_box input[type="radio"] {
   width: inherit;
   margin-bottom: 0
}

#dropzone {
   position: relative;
   border: 2px dashed var(--line);
   border-radius: var(--ac-radius-sm);
   text-align: center;
   width: 100%;
   aspect-ratio: 1/1;
   min-height: 95%
}

#dropzone.hover {
   border-color: var(--em)
}

#dropzone.dropped {
   border: 3px dashed var(--em);
   background: var(--em-tint)
}

#dropzone div {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0
}

#dropzone div p {
   position: absolute;
   top: 45%;
   right: 0;
   bottom: 0;
   left: 0;
   font-size: 14px
}

#dropzone img {
   border-radius: var(--ac-radius-sm);
   vertical-align: middle;
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: contain;
   height: 100%
}

#dropzone [type="file"] {
   cursor: pointer;
   position: absolute;
   opacity: 0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0
}

.social_input {
   position: relative
}

.social_input input {
   padding-left: 205px
}

.social_url {
   position: absolute;
   font-size: 13px;
   top: 9px;
   text-align: right;
   width: 200px
}

.social_url p {
   font-weight: 400
}

.dashboard_home {
   text-align: center;
   padding: 16px 0
}

.dashboard_home i {
   font-size: 4rem;
   color: var(--em)
}

.dashboard_home h3 {
   margin-top: 16px;
   font-weight: 600;
   font-size: 1.15rem;
   text-transform: capitalize
}

.dashboard_header {
   border-bottom: 1px solid var(--line);
   padding-bottom: 12px
}

.review_comp_info {
   text-align: center
}

.review_comp_info img {
   width: 64px;
   height: 64px;
   display: block;
   margin: 0 auto 10px;
   border-radius: var(--ac-radius-sm);
   object-fit: contain
}

.review_comp_info h3 {
   font-size: 1.1rem;
   margin-bottom: 4px
}

.review_comp_info p {
   font-size: 14px;
   margin-bottom: 8px
}

ul.review_guidelines {
   padding-left: 0
}

.review_guidelines li {
   list-style: none;
   margin-top: 16px;
   margin-bottom: 4px;
   font-size: 14px;
   position: relative;
   padding-left: 24px
}

.review_guidelines li::before {
   position: absolute;
   left: 0;
   top: 2px;
   content: "\f058";
   font-family: "Font Awesome 5 Free";
   font-size: 16px;
   color: var(--em)
}

.rating-box {
   display: inline-block
}

.rating-container {
   direction: rtl !important
}

.rating-container label {
   display: inline-block;
   margin: 0 0 32px 0;
   color: var(--line);
   cursor: pointer;
   font-size: 28px;
   transition: color .2s;
   line-height: 0
}

.rating-container input[type=radio] {
   display: none
}

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

.rating_form h3 {
   font-size: 15px !important;
   font-weight: 600 !important
}

.listing_main {
   padding: 20px;
   margin: 16px 0;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius)
}

.listing_new {
   display: flex;
   align-items: center
}

.listing_new img {
   width: 64px;
   height: 64px;
   margin-right: 10px;
   object-fit: contain;
   border-radius: var(--ac-radius-sm);
   border: 1px solid var(--line)
}

.listing_metadata p {
   margin-top: 8px
}

.listing_metadata h3 {
   font-size: 1.1rem;
   font-weight: 700
}

.listing_metadata span {
   color: var(--ink);
   font-size: 14px;
   font-weight: 600
}

span.active_listing {
   padding: 3px 10px;
   background: var(--em);
   border-radius: 999px;
   color: #fff;
   font-size: 13px
}

span.pending_listing {
   padding: 3px 10px;
   background: var(--ac-red);
   border-radius: 999px;
   color: #fff;
   font-size: 13px
}

span.edit_listing {
   padding: 3px 10px;
   background: var(--dark);
   border-radius: 999px;
   color: #fff;
   margin-left: 8px;
   font-size: 13px
}

.bg_gray {
   background: var(--muted-bg)
}

.page_not_found {
   text-align: center
}

.page_not_found h2 {
   margin: 24px 0
}

.page_not_found img {
   width: 80%
}

.tags-input-wrapper {
   background: transparent;
   padding: 8px 10px;
   border-radius: var(--ac-radius-sm);
   width: 100%;
   border: 1.5px solid var(--line)
}

.tags-input-wrapper input {
   border: none !important;
   background: transparent;
   outline: none;
   width: 140px;
   padding: 0;
   margin-bottom: 0
}

.tags-input-wrapper .tag {
   display: inline-block;
   background: var(--em);
   color: #fff;
   border-radius: 999px;
   padding: 5px 6px 5px 12px;
   margin: 2px 4px 2px 0;
   font-size: 13px
}

.tags-input-wrapper .tag a {
   margin: 0 6px 3px;
   display: inline-block;
   cursor: pointer
}

.custom_pagination nav {
   position: inherit
}

.custom_pagination ul.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 0;
   position: inherit;
   gap: 4px
}

.custom_pagination li {
   background: var(--surface);
   list-style: none
}

.custom_pagination a {
   border: 1px solid var(--line);
   padding: 8px 12px;
   min-width: 36px;
   background: var(--surface);
   color: var(--ink);
   border-radius: var(--ac-radius-sm);
   display: inline-block;
   text-align: center;
   font-size: 14px;
   transition: .15s
}

.custom_pagination a:hover {
   background: var(--em-tint);
   border-color: var(--em);
   color: var(--em-dark)
}

.custom_pagination span {
   border: 1px solid var(--line);
   padding: 8px 12px;
   min-width: 36px;
   background: var(--surface);
   border-radius: var(--ac-radius-sm);
   display: inline-block;
   text-align: center;
   font-size: 14px
}

.custom_pagination li.page-item.active span {
   color: #fff;
   background: var(--em);
   border-color: var(--em)
}

.paginator {
   margin-top: 24px
}

.paginator nav {
   position: static
}

.paginator ul.pagination li {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: 8px;
   background: var(--muted-bg);
   min-width: 36px;
   min-height: 36px;
   max-width: 36px;
   max-height: 36px;
   border-radius: 50%;
   position: relative;
   font-weight: 600;
   font-size: 12px
}

.paginator ul.pagination a {
   color: var(--ink)
}

.paginator li.page-item.active {
   background: var(--em);
   color: #fff
}

.paginator ul.pagination a::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
}

.commment_area {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: 1px solid var(--line)
}

.comment_read {
   display: flex;
   gap: 10px;
   margin: 16px 0;
   padding-top: 16px;
   border-top: 1px dashed var(--line)
}

.comment_read span {
   font-size: 13px;
   color: var(--muted);
   display: inline-block;
   margin-bottom: 8px
}

.userLetter {
   min-width: 40px;
   height: 40px;
   aspect-ratio: 1/1;
   background: var(--em-tint);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 20px;
   color: var(--em-dark);
   font-weight: 700;
   font-family: var(--ac-display)
}

.commentSection {
   padding: 20px 0
}

.commentSection h3 {
   font-size: 1.3rem
}

.commentBox {
   border: 1px solid var(--line);
   padding: 24px;
   background: var(--muted-bg);
   border-radius: var(--ac-radius-lg);
   margin: 10px 0 20px
}

.commentBox textarea {
   max-width: 100%;
   min-width: 100%;
   padding: 12px;
   font-family: var(--ac-font);
   font-size: 15px;
   background: var(--surface);
   border-radius: var(--ac-radius);
   min-height: 160px;
   resize: none;
   border: 1.5px solid var(--line);
   transition: .15s
}

.commentBox textarea:focus {
   border-color: var(--em);
   outline: none
}

.commentBox button {
   padding: 11px 18px;
   border-radius: var(--ac-radius-sm);
   background: var(--em);
   color: #fff;
   font-size: 14px;
   border: none;
   margin-top: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: .15s
}

.commentBox button:hover {
   background: var(--em-dark)
}

.commentsList {
   padding: 20px;
   border: 1px solid var(--line);
   border-radius: var(--ac-radius)
}

.commentsList:not(:last-of-type) {
   margin-bottom: 20px
}

.commentsList p {
   margin-bottom: 8px;
   line-height: 1.7;
   white-space: pre-wrap
}

.replyBox textarea {
   max-width: 100%;
   min-width: 100%;
   padding: 10px;
   font-family: var(--ac-font);
   border: 1.5px solid var(--line);
   background: var(--surface);
   border-radius: var(--ac-radius);
   min-height: 80px;
   resize: none;
   margin-top: 8px;
   font-size: 14px
}

.replyBox button {
   padding: 6px 12px;
   border-radius: var(--ac-radius-sm);
   background: var(--em);
   color: #fff;
   font-size: 12px;
   border: none;
   margin-top: 4px;
   cursor: pointer
}

.commentUser {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 4px
}

.commentUser img {
   width: 44px;
   height: 44px;
   min-width: 44px;
   border-radius: 50%
}

.commentUser h4 {
   font-size: 1rem;
   line-height: 1
}

.commentUser span {
   font-size: 12px;
   color: var(--muted)
}

.replyUser img {
   width: 36px;
   height: 36px;
   min-width: 36px
}

.replyUser h5 {
   font-size: 15px
}

.repliesList {
   margin-left: 20px;
   padding-left: 20px;
   margin-top: 12px;
   margin-bottom: 12px;
   border-left: 2px solid var(--line)
}

.singleReply {
   padding: 16px 0
}

.replyBtn {
   color: var(--em-dark);
   font-weight: 600;
   cursor: pointer;
   font-size: 13px
}

/* ============================================================
   25. BACKWARD COMPAT — MISC COMPONENTS
   ============================================================ */
.company_home_card {
   padding: 16px;
   border-radius: var(--ac-radius);
   border: 1px solid var(--line);
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   position: relative;
   transition: .15s;
   background: var(--surface)
}

.company_home_card:hover {
   box-shadow: var(--ac-shadow-sm);
   border-color: var(--em)
}

.softwareCategory {
   font-size: 13px;
   color: var(--muted)
}

.company_home_card img {
   width: 56px;
   height: 56px;
   margin-right: 12px;
   border-radius: var(--ac-radius-sm);
   object-fit: contain
}

.company_home_card h3 a {
   font-size: 15px;
   font-weight: 600;
   color: var(--ink);
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical
}

.company_home_card h3 a::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%
}

.company_home_card span {
   font-size: 13px;
   color: var(--muted)
}

.related_links {
   padding: 48px 0;
   background: var(--surface)
}

.related_link {
   margin-bottom: 16px
}

.related_link a {
   color: var(--ink);
   position: relative;
   padding-left: 14px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
   font-size: 14px
}

.related_link a::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--em);
   left: 0;
   top: 7px
}

.related_link a:hover {
   color: var(--em-dark)
}

a.user_link {
   color: var(--ac-gray-100);
   font-size: 1.5rem
}

.new_listing_sidebar {
   padding: 16px;
   border-left: 1px solid var(--line);
   height: 100%;
   overflow: hidden
}

.list_side_icons {
   display: flex;
   align-items: center
}

.list_side_icons:not(:last-child) {
   margin-bottom: 16px;
   border-bottom: 1px solid var(--line);
   padding-bottom: 16px
}

.list_side_icons i {
   width: 36px;
   height: 36px;
   min-width: 36px;
   background: var(--dark);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   color: #fff;
   margin-right: 12px;
   font-size: 14px
}

.list_side_icons a i {
   background: inherit;
   display: inherit;
   color: var(--ink);
   margin-right: 4px;
   font-size: 16px
}

.list_side_icons a i:hover {
   color: var(--em)
}

.list_side_icons p {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.5
}

.list_side_icons span {
   font-weight: 600;
   font-size: 15px;
   color: var(--ink)
}

.new_list_review {
   padding: 12px 0 0;
   margin-top: 16px;
   border-top: 1px solid var(--line)
}

.new_list_review h5 {
   font-size: 15px;
   font-style: italic;
   color: var(--em-dark);
   font-weight: 500
}

.new_list_review p {
   font-style: italic;
   font-size: 14px
}

.new_comp_page {
   padding: 24px 0;
   border-bottom: 1px solid var(--line);
   background: var(--muted-bg)
}

.company_breadcrumb {
   margin-bottom: 24px
}

.company_breadcrumb span {
   color: var(--muted);
   font-size: 13px
}

.company_breadcrumb span a {
   color: var(--ink)
}

.new_list_meta.new_com_meta h1 {
   font-size: 1.4rem;
   font-weight: 700;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical
}

.new_list_meta.new_com_meta h1 a {
   color: var(--ink)
}

.new_list_meta.new_com_meta h1 a i {
   font-size: 1rem
}

.new_list_meta.new_com_meta h1 a:hover {
   color: var(--em-dark)
}

.comp_social {
   display: flex;
   justify-content: right
}

.comp_social i {
   width: 36px;
   height: 36px;
   background: var(--em);
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   color: #fff;
   margin-left: 8px;
   font-size: 14px;
   transition: .15s
}

.comp_social i:hover {
   background: var(--em-dark)
}

.new_comp_acc ul.accordion-list {
   position: relative;
   display: block;
   width: 100%;
   margin: 24px 0 0;
   list-style: none
}

.new_comp_acc ul.accordion-list li {
   position: relative;
   display: block;
   width: 100%;
   background: var(--surface);
   padding: 20px;
   margin: 0 auto 12px;
   border: 1px solid var(--line);
   border-radius: var(--ac-radius-sm);
   cursor: pointer;
   transition: .15s
}

.new_comp_acc ul.accordion-list li:hover {
   border-color: var(--em)
}

.new_comp_acc ul.accordion-list li.active h3:after {
   transform: rotate(45deg)
}

.new_comp_acc ul.accordion-list li h3 {
   font-weight: 600;
   position: relative;
   display: block;
   width: 100%;
   padding: 0;
   margin: 0;
   font-size: 15px;
   cursor: pointer
}

.new_comp_acc ul.accordion-list li h3:after {
   content: "\f067";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   position: absolute;
   right: 0;
   top: 0;
   color: var(--em);
   transition: .25s;
   font-size: 16px
}

.new_comp_acc ul.accordion-list li div.answer {
   position: relative;
   display: block;
   width: 100%;
   margin: 0;
   padding: 0;
   cursor: pointer
}

.new_comp_acc ul.accordion-list li div.answer p {
   position: relative;
   display: block;
   font-weight: 400;
   padding: 12px 0 0;
   cursor: pointer;
   line-height: 1.6;
   font-size: 14px;
   color: var(--ink-soft)
}

.modal {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   display: none;
   overflow: auto;
   background: rgba(14, 27, 20, .55);
   z-index: 9999;
   backdrop-filter: blur(4px)
}

.modal-window {
   position: relative;
   background: var(--surface);
   width: 50%;
   margin: 3% auto;
   padding: 24px;
   border-radius: var(--ac-radius-lg)
}

.modal-window.small {
   width: 75%
}

.modal-window.large {
   width: 75%
}

.close {
   position: absolute;
   top: 8px;
   right: 12px;
   color: var(--muted);
   height: 30px;
   width: 30px;
   font-size: 24px;
   line-height: 30px;
   text-align: center;
   cursor: pointer;
   transition: .15s
}

.close:hover {
   color: var(--ink)
}

.open {
   display: block
}

iframe.responsive-iframe {
   width: 100%;
   aspect-ratio: 16/9;
   border: none;
   border-radius: var(--ac-radius)
}

.toolsItem {
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   background: var(--surface);
   height: 100%;
   transition: .15s;
   text-align: center;
   position: relative
}

.toolsItem:hover {
   border-color: var(--em);
   box-shadow: var(--ac-shadow-sm)
}

.toolsItem img {
   width: 56px;
   height: 56px;
   object-fit: contain;
   border-radius: var(--ac-radius-sm);
   border: 1px solid var(--line);
   margin-bottom: 8px
}

.toolsItem h3 a {
   font-size: 1rem;
   color: var(--ink);
   font-weight: 600;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical
}

.toolsItem h3 a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%
}

.toolsItem p {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.5;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical
}

.listScore {
   color: #fff;
   font-size: 13px;
   background: var(--star);
   border-radius: 999px;
   display: inline-flex;
   padding: 4px 10px;
   gap: 4px;
   align-items: center;
   font-weight: 600;
   margin-top: 8px
}

.toolsCategory {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px
}

.toolsCategory a {
   display: inline-block;
   padding: 8px 16px;
   background: var(--em-tint);
   color: var(--em-dark);
   font-weight: 600;
   font-size: 14px;
   border: 1px solid var(--em);
   border-radius: 999px;
   transition: .15s
}

.toolsCategory a:hover {
   background: var(--em);
   color: #fff
}

.toolCard {
   padding: 16px;
   border-radius: var(--ac-radius);
   border: 1px solid var(--line);
   background: var(--surface);
   position: relative;
   transition: .15s
}

.toolCard:hover {
   border-color: var(--em);
   box-shadow: var(--ac-shadow-sm)
}

.toolMeta {
   display: flex;
   gap: 12px;
   margin-bottom: 16px;
   align-items: center
}

.toolMeta img {
   width: 56px;
   height: 56px;
   object-fit: contain;
   border-radius: var(--ac-radius-sm);
   background: var(--muted-bg)
}

.toolMeta h3 {
   font-size: 15px;
   font-weight: 600;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical
}

.toolMeta h3 a {
   color: var(--ink)
}

.toolMeta h3 a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%
}

.toolMeta p {
   color: var(--muted);
   font-size: 13px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical
}

.toolOther {
   display: inline-flex;
   gap: 8px
}

.toolPills {
   background: var(--muted-bg);
   padding: 5px 10px;
   font-size: 13px;
   border-radius: 999px;
   color: var(--ink-soft)
}

.toolPills a {
   color: var(--ink-soft);
   position: relative;
   z-index: 1
}

.ratingPill {
   background: var(--em);
   color: #fff;
   display: flex;
   align-items: center;
   gap: 4px
}

.toolBtn {
   padding-top: 12px;
   margin-top: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--line);
   font-size: 14px;
   color: var(--em-dark);
   font-weight: 600
}

.toolBtn i {
   transition: .15s
}

.toolCard:hover .toolBtn i {
   transform: rotate(-45deg)
}

.featuredTools {
   padding: 48px 0
}

.toolRow .categoryRow h3 {
   font-size: 1.4rem
}

.toolRow:not(:first-of-type) {
   padding-top: 40px;
   margin-top: 48px;
   border-top: 1px solid var(--line)
}

.content-table {
   border-collapse: collapse;
   margin-top: 10px;
   font-size: .9em;
   width: 100%;
   border-radius: var(--ac-radius);
   overflow: hidden
}

.content-table thead tr {
   background: var(--dark);
   color: #fff;
   text-align: left;
   font-weight: 600
}

.content-table th,
.content-table td {
   padding: 12px 16px;
   font-size: 14px
}

.content-table tbody tr {
   border-bottom: 1px solid var(--line);
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line)
}

.content-table tbody tr:nth-of-type(odd) {
   background: var(--surface)
}

.content-table tbody tr:nth-of-type(even) {
   background: var(--muted-bg)
}

.table_listing_outer {
   margin-top: 20px;
   border-radius: var(--ac-radius);
   overflow: auto;
   overflow-y: hidden
}

table.table_listing {
   width: 100%;
   border: 1px solid var(--line)
}

.table_listing th {
   text-align: left;
   padding: 12px 16px;
   background: var(--dark);
   color: #fff;
   font-size: 14px
}

.table_listing td {
   text-align: left;
   padding: 12px 16px;
   font-size: 14px
}

.table_listing tr {
   width: 100%;
   white-space: nowrap
}

.table_listing img {
   width: 36px;
   height: 36px;
   object-fit: contain;
   border-radius: 4px;
   float: left
}

.table_listing tr:nth-child(even) {
   background: var(--muted-bg)
}

.table_listing tr th:first-child {
   border-radius: var(--ac-radius) 0 0 0
}

.table_listing tr th:last-child {
   border-radius: 0 var(--ac-radius) 0 0
}

.table_listing td a {
   color: var(--ink);
   font-weight: 500
}

figure.table table {
   border-collapse: collapse;
   width: 100%
}

figure.table table td,
figure.table table th {
   border: 1px solid var(--line);
   padding: 8px 12px
}

.extra_content .table {
   border-collapse: collapse;
   margin-top: 10px;
   font-size: .9em;
   width: 100%;
   border-radius: var(--ac-radius-lg);
   overflow: hidden
}

.extra_content .table table th,
.extra_content .table table td {
   padding: 10px 16px;
   line-height: 1.6
}

.extra_content .table table tbody tr {
   border-bottom: 1px solid var(--line);
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line)
}

.extra_content .table table tbody tr:nth-of-type(odd) {
   background: var(--surface)
}

.extra_content .table table tbody tr:first-child {
   background: var(--dark);
   color: #fff;
   text-align: left;
   font-size: 14px
}

.extra_content .table table tbody tr:nth-of-type(even) {
   background: var(--muted-bg)
}

.customTable h3 {
   font-size: 1.1rem;
   font-weight: 700 !important
}

.appRating {
   text-align: center;
   width: fit-content;
   margin-left: auto;
   padding: 16px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius-sm)
}

.appRating h4 {
   font-size: 14px;
   font-weight: 400;
   margin-bottom: 4px
}

.appRating span {
   font-size: 20px;
   font-weight: 700;
   font-family: var(--ac-display)
}

.appRatingStar {
   margin-top: 4px
}

.appRatingStar i {
   color: #fff;
   width: 24px;
   height: 24px;
   font-size: 14px;
   background: var(--star);
   padding: 4px;
   border-radius: 3px;
   display: inline-flex;
   justify-content: center;
   align-items: center
}

.outer_rating {
   width: 100%;
   height: 28px;
   display: flex;
   align-items: center;
   border-radius: var(--ac-radius-sm);
   background: var(--muted-bg);
   margin-bottom: 20px
}

.inner_rating {
   background: var(--em);
   height: 100%;
   border-radius: var(--ac-radius-sm);
   padding: 6px 10px;
   display: inline-block;
   color: #fff
}

.inner_rating span strong {
   font-size: 18px;
   line-height: 0
}

.rating_graph h3 {
   font-size: 15px;
   margin-bottom: 4px;
   font-weight: 500
}

.explore_companies {
   padding: 30px 0
}

.sideBlog {
   position: sticky;
   top: 0;
   padding-bottom: 40px
}

.blog_heading {
   padding-top: 2rem
}

.blog_heading h3 {
   font-size: 1.3rem;
   font-weight: 700;
   padding-left: 12px;
   border-left: 4px solid var(--em)
}

.related_articles {
   box-shadow: none;
   border: 1px solid var(--line)
}

.article_sidebar {
   padding: 20px;
   background: var(--muted-bg);
   margin-bottom: 20px;
   border-radius: var(--ac-radius)
}

.article_sidebar h3 {
   font-size: 1.1rem;
   margin-bottom: 8px
}

.section_title h3 {
   text-align: center;
   font-size: 1.6rem;
   margin-bottom: 20px;
   font-weight: 600
}

.price_warning img {
   width: 100%;
   margin: 16px 0 8px;
   padding-top: 16px;
   border-top: 1px solid var(--line)
}

.price_warning p {
   color: var(--ac-red);
   font-size: 14px
}

.customer_logo {
   border: 1px solid var(--line);
   padding: 10px;
   width: 100%;
   aspect-ratio: 16/9;
   margin: 16px auto 0;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: var(--ac-radius-sm)
}

.customer_logo img {
   max-width: 85%;
   max-height: 50px
}

.customer_list h5 {
   text-align: center;
   margin-top: 8px;
   font-size: 15px;
   font-weight: 400
}

.software_key_details h4 {
   font-size: 16px;
   margin-bottom: 12px
}

.software_key_details ul li {
   list-style: none;
   margin-top: 8px
}

.software_key_details ul li i {
   color: var(--ink)
}

.specs {
   border-top: 1px solid var(--line);
   padding-top: 36px
}

.partoflio_card {
   padding: 16px;
   height: 100%;
   position: relative;
   border-radius: var(--ac-radius);
   background: var(--surface);
   border: 1px solid var(--line)
}

.partoflio_card img {
   aspect-ratio: 3/2;
   border-bottom: 1px solid var(--line);
   width: 100%;
   object-fit: cover;
   object-position: top;
   border-radius: var(--ac-radius-sm)
}

.project_name {
   padding: 10px 0 0
}

.project_name span {
   font-size: 13px;
   color: var(--em-dark)
}

.project_name h3 {
   font-size: 15px;
   font-weight: 600
}

button.modal_btn {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border: none;
   cursor: pointer;
   opacity: 0
}

.modal_content img {
   width: 100%;
   border-radius: var(--ac-radius-sm)
}

.modal_content .project_name {
   padding: 12px 0
}

.project_details {
   padding: 12px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.project_details_card h3 {
   font-size: 13px;
   font-weight: 400;
   color: var(--em-dark);
   margin-bottom: 0
}

.project_details_card span {
   color: var(--ink);
   font-weight: 500;
   font-size: 16px;
   text-transform: uppercase
}

.project_summary {
   padding: 12px 0 0
}

.mySlides p {
   margin-bottom: 4px
}

.mySlides.fade.photo_frame img {
   aspect-ratio: 16/9;
   object-fit: cover;
   object-position: top;
   background: var(--muted-bg);
   border-radius: var(--ac-radius);
   border: 1px solid var(--line)
}

section#services {
   overflow: hidden
}

.comp_services h3 {
   font-size: 1.15rem;
   font-weight: 600
}

.industry_chart h3 {
   font-size: 1.15rem;
   font-weight: 600;
   margin-bottom: 12px
}

.industry_chart {
   width: 60% !important;
   display: block;
   margin: 0 auto;
   text-align: center
}

.chart_cont .service_list_chart {
   text-align: center
}

.text_right button.service_pills {
   margin: 0
}

.stacked_chart {
   display: flex;
   border-radius: var(--ac-radius-sm);
   overflow: hidden
}

.stacked_chart div {
   height: 40px;
   display: flex;
   border-right: 1px solid var(--surface);
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 13px;
   position: relative;
   cursor: pointer
}

.stacked_bar:nth-child(1) {
   background: var(--dark)
}

.stacked_bar:nth-child(2) {
   background: #7cddd4
}

.stacked_bar:nth-child(3) {
   background: #efc444
}

.stacked_bar:nth-child(4) {
   background: #52ca85
}

.stacked_bar:nth-child(5) {
   background: #2aaad0
}

.stacked_bar:nth-child(6) {
   background: #d44e2f
}

.stacked_bar:nth-child(7) {
   background: #6a52ce
}

.stacked_bar:nth-child(8) {
   background: #237b29
}

.stacked_bar:nth-child(9) {
   background: #f78727
}

.stacked_bar:nth-child(10) {
   background: #334d5c
}

.service_gp_chart .stacked_chart div {
   height: 24px
}

.service_gp_chart h4 {
   margin-top: 20px;
   font-size: 16px
}

.service_gp_chart p {
   margin-bottom: 8px;
   font-size: 14px
}

.stacked_bar .tooltiptext {
   visibility: hidden;
   background: var(--surface);
   color: var(--ac-red);
   text-align: center;
   border-radius: 999px;
   padding: 4px 14px;
   position: absolute;
   z-index: 8;
   top: -42px;
   font-size: 13px;
   box-shadow: var(--ac-shadow-md);
   width: max-content
}

.stacked_bar:hover .tooltiptext {
   visibility: visible
}

.service_list_chart {
   margin: 12px 0
}

.service_focus_container {
   margin-top: 30px;
   border-top: 1px solid var(--line);
   padding-top: 24px
}

.service_focus_container h4 {
   font-size: 1.1rem;
   font-weight: 600
}

.authorProfile {
   display: flex;
   gap: 24px;
   align-items: center
}

.authorProfile img {
   width: 160px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid rgba(255, 255, 255, .1)
}

.blogProfile h1 {
   color: #fff;
   font-size: 1.6rem
}

.blogProfile h4 {
   color: rgba(255, 255, 255, .55);
   font-weight: 400;
   margin: 4px 0 16px;
   font-size: 13px;
   position: relative;
   padding-left: 10px;
   font-family: var(--ac-font)
}

.blogProfile h4::before {
   position: absolute;
   content: "";
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--em-glow);
   left: 0;
   top: 5px
}

.blogProfile p {
   color: rgba(255, 255, 255, .6);
   font-size: 15px;
   line-height: 1.6
}

.followAuthor {
   margin: 16px 0 4px;
   font-size: 13px;
   display: flex;
   gap: 4px;
   align-items: center
}

.followAuthor a {
   color: var(--em-glow);
   font-size: 15px;
   margin-left: 4px
}

.followAuthor span {
   color: rgba(255, 255, 255, .5)
}

.careerHero {
   background: var(--dark);
   padding: 80px 0;
   text-align: center;
   position: relative
}

.careerTop {
   position: relative;
   z-index: 1
}

.careerHero h1 {
   font-size: 2.2rem;
   color: #fff;
   font-weight: 700
}

.careerHero p {
   font-size: 1rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, .6)
}

.job-listing {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   padding: 1.5rem;
   margin-bottom: 1rem;
   transition: .15s
}

.job-listing:hover {
   box-shadow: var(--ac-shadow);
   border-color: var(--em)
}

.job-listing h4 {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: .5rem
}

.job-listing button {
   margin-top: 0
}

.job-listing .location {
   font-size: 14px;
   color: var(--muted)
}

.form-container {
   width: 100%;
   background: var(--surface);
   border-radius: var(--ac-radius-lg);
   border: 1px solid var(--line);
   padding: 2.5rem
}

.form-container label {
   display: block;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: .5rem
}

.form-container .form-group {
   margin-bottom: 1.5rem
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="number"],
.form-container input[type="file"],
.form-container select,
.form-container textarea {
   width: 100%;
   max-width: 100%;
   padding: .8rem 1rem;
   border: 1.5px solid var(--line);
   border-radius: var(--ac-radius-sm);
   transition: .15s;
   font-size: 14px;
   font-family: var(--ac-font);
   background: var(--surface)
}

.form-container textarea {
   min-width: 100%;
   min-height: 150px
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
   outline: none;
   border-color: var(--em)
}

.form-container .submit-container {
   text-align: center
}

.form-container .submit-btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: .8rem 2rem;
   border: none;
   font-size: 14px;
   font-weight: 600;
   border-radius: var(--ac-radius-sm);
   color: #fff;
   background: var(--em);
   cursor: pointer;
   transition: .15s
}

.form-container .submit-btn:hover {
   background: var(--em-dark)
}

.form-container input::-webkit-outer-spin-button,
.form-container input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0
}

.newsletterBox {
   padding: 48px;
   border-radius: var(--ac-radius-xl);
   background: var(--dark)
}

.newsletterBox img {
   width: 100%
}

.newsForm h3 {
   font-size: 1.6rem;
   color: #fff;
   margin-bottom: 6px
}

.newsForm p {
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .6)
}

.newsForm input {
   width: 100%;
   padding: 14px 20px;
   border-radius: var(--ac-radius-sm);
   background: var(--surface);
   border: 2px solid transparent;
   font-size: 15px;
   font-family: var(--ac-font);
   margin-top: 16px
}

.newsForm input:focus {
   outline: none;
   border-color: var(--em)
}

.appCat {
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   height: 100%;
   overflow: hidden;
   transition: .15s
}

.appCat:hover {
   border-color: var(--em)
}

.appCat h3 {
   background: var(--dark);
   padding: 12px 16px;
   border-radius: 0;
   margin: 0
}

.appCat h3 a {
   color: #fff;
   font-weight: 600;
   font-size: 15px
}

.catSoft {
   padding: 4px 16px 16px
}

.catItem {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 5px;
   position: relative;
   margin-top: 8px
}

.catItem img {
   width: 28px;
   height: 28px;
   border-radius: 4px;
   object-fit: contain
}

.catItem a {
   color: var(--ink-soft);
   font-size: 14px
}

.catItem a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%
}

.reviewCard {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
   gap: 0;
   transition: .15s;
   position: relative
}

.reviewCard:hover {
   border-color: var(--em);
   box-shadow: var(--ac-shadow-sm)
}

.reviewUser,
.reviewTool {
   padding: 16px
}

.reviewTool {
   border-top: 1px solid var(--line);
   display: flex;
   gap: 10px;
   align-items: center;
   background: var(--muted-bg)
}

.reviewTool img {
   height: 36px;
   width: 36px;
   border-radius: 4px;
   object-fit: contain;
   border: 1px solid var(--line)
}

.reviewTool h4 a {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink)
}

.reviewTool h4 a::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0
}

.reviewTool span {
   font-size: 13px;
   color: var(--muted)
}

.userMeta {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 16px
}

.userMeta img {
   height: 36px;
   width: 36px;
   border-radius: 50%;
   object-fit: cover
}

.userMeta h4 {
   font-size: 14px;
   font-weight: 600
}

.userMeta i {
   color: var(--star);
   font-size: 13px;
   letter-spacing: -2px
}

.reviewText p {
   font-size: 14px;
   line-height: 1.6;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 5;
   line-clamp: 5;
   -webkit-box-orient: vertical
}

.newsRoom {
   padding: 48px 0
}

.newsHead h1 {
   font-size: 2rem;
   margin-bottom: 20px;
   padding-left: 14px;
   border-left: 6px solid var(--em)
}

.newsCard {
   display: flex;
   align-items: center;
   gap: 20px;
   border-top: 1px solid var(--line);
   padding: 20px 0;
   position: relative
}

.newsCard img {
   width: 180px;
   aspect-ratio: 16/9;
   object-fit: cover;
   border-radius: var(--ac-radius-sm);
   border: 1px solid var(--line)
}

.newsMeta>span a {
   color: var(--em-dark);
   font-size: 13px;
   position: relative;
   z-index: 1
}

.newsMeta h3 {
   font-weight: 600;
   margin: 8px 0;
   font-size: 1rem
}

.newsMeta h3 a {
   color: var(--ink)
}

.newsMeta h3 a::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%
}

.newsMeta p {
   color: var(--muted);
   font-size: 13px
}

.newsMeta p a {
   color: var(--muted);
   font-weight: 500;
   position: relative;
   z-index: 1
}

.newsMeta h1 {
   font-size: 1.9rem;
   margin: 4px 0
}

.newsSidebar {
   background: var(--dark);
   padding: 32px;
   border-radius: var(--ac-radius);
   position: sticky;
   top: 20px
}

.sidebarHead {
   display: flex;
   gap: 12px;
   color: #fff;
   padding-bottom: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.sidebarHead h3 {
   color: #fff;
   font-size: 1.4rem
}

.sidebarHead span {
   display: flex;
   width: 36px;
   height: 36px;
   background: var(--em);
   color: #fff;
   justify-content: center;
   align-items: center;
   font-size: 1rem;
   border-radius: var(--ac-radius-sm)
}

.newsLink {
   position: relative;
   padding-left: 18px;
   margin: 16px 0
}

.newsLink::before {
   content: "";
   width: 6px;
   height: 6px;
   background: var(--em);
   position: absolute;
   left: 0;
   top: 7px;
   transform: rotate(45deg)
}

.newsLink a {
   color: rgba(255, 255, 255, .6);
   font-size: 14px;
   line-height: 1.4
}

.newsLink a:hover {
   text-decoration: underline;
   color: #fff
}

.spontag {
   position: absolute;
   top: -9px;
   left: -10px;
   background-image: url('/img/main/sponsored.svg');
   background-repeat: no-repeat;
   width: 100px;
   height: 20px
}

.section-cta-row {
   text-align: center;
   margin-top: 16px
}

.btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 28px;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   background: transparent;
   transition: .15s
}

.btn-outline:hover {
   border-color: var(--em);
   color: var(--em-dark);
   background: var(--em-tint)
}

.new_listing_sidebar.comp_sidebar {
   padding: 20px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--ac-radius);
   margin-top: 0
}

/* ============================================================
   26. SOFTWARE / TOOL DETAIL PAGE
   ============================================================ */
.sw-crumb {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 20px 0 0;
   font-family: var(--ac-mono);
   font-size: 11.5px;
   color: rgba(255, 255, 255, .45);
}

.sw-crumb a {
   color: rgba(255, 255, 255, .6);
   transition: .15s;
}

.sw-crumb a:hover {
   color: #fff;
}

.sw-crumb i {
   font-size: 8px;
   color: rgba(255, 255, 255, .3);
}

.sw-crumb span {
   color: rgba(255, 255, 255, .8);
}

.sw-hero {
   background: var(--dark);
   position: relative;
   overflow: hidden;
   padding-bottom: 44px;
}

.sw-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 45% 60% at 90% 10%, rgba(52, 179, 122, .2), transparent), radial-gradient(ellipse 40% 50% at 0% 100%, rgba(11, 138, 86, .14), transparent);
   pointer-events: none;
}

.sw-hero__grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 44px;
   align-items: center;
   margin-top: 32px;
   position: relative;
   z-index: 1;
}

.sw-hero__id {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   margin-bottom: 18px;
}

.sw-hero__id>img {
   width: 72px;
   height: 72px;
   object-fit: contain;
   border-radius: 16px;
   background: #fff;
   padding: 8px;
   flex-shrink: 0;
}

.sw-hero__id h1 {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #fff;
   font-size: clamp(1.6rem, 3vw, 2.1rem);
   line-height: 1.15;
}

.sw-hero__ext {
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12);
   display: grid;
   place-items: center;
   color: rgba(255, 255, 255, .6);
   font-size: 12px;
   transition: .15s;
   flex-shrink: 0;
}

.sw-hero__ext:hover {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

.sw-hero__cats {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 10px;
}

.sw-hero__cats a {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--em-glow);
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   padding: 5px 12px;
   border-radius: 999px;
   transition: .15s;
}

.sw-hero__cats a:hover {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

.sw-hero__tagline {
   color: rgba(255, 255, 255, .65);
   font-size: 17px;
   line-height: 1.55;
   max-width: 560px;
   margin-bottom: 28px;
}

.sw-hero__actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.sw-hero__score {
   background: rgba(255, 255, 255, .045);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 20px;
   padding: 26px;
   backdrop-filter: blur(6px);
}

.sw-hero__score-top {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 10px;
}

.sw-hero__score-num {
   font-family: var(--ac-display);
   font-size: 3.2rem;
   font-weight: 700;
   color: #fff;
   line-height: 1;
   letter-spacing: -.03em;
}

.sw-hero__score-meta {
   display: flex;
   flex-direction: column;
}

.sw-hero__score-stars i {
   color: var(--star);
   font-size: 17px;
   margin-right: 2px;
}

.sw-hero__score-count {
   display: inline-block;
   font-family: var(--ac-mono);
   font-size: 12px;
   color: rgba(255, 255, 255, .5);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.sw-hero__bars {
   margin-top: 22px;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   flex-direction: column;
   gap: 9px;
}

.sw-hero__bar-row {
   display: grid;
   grid-template-columns: 26px 1fr 20px;
   align-items: center;
   gap: 10px;
}

.sw-hero__bar-row span {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: rgba(255, 255, 255, .45);
}

.sw-hero__bar-row span:last-child {
   text-align: right;
}

.sw-hero__bar-track {
   height: 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .08);
   overflow: hidden;
}

.sw-hero__bar-fill {
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--em), var(--em-glow));
}

.sw-hero__score-empty {
   text-align: center;
   padding: 20px 0;
}

.sw-hero__score-empty i {
   font-size: 1.8rem;
   color: rgba(255, 255, 255, .25);
}

.sw-hero__score-empty p {
   color: rgba(255, 255, 255, .5);
   font-size: 14px;
   margin: 12px 0 8px;
}

.sw-subnav {
   position: sticky;
   top: 68px;
   z-index: 60;
   background: rgba(250, 248, 242, .92);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--line);
}

.sw-subnav__list {
   display: flex;
   gap: 4px;
   overflow-x: auto;
   scrollbar-width: none;
}

.sw-subnav__list::-webkit-scrollbar {
   display: none;
}

.sw-subnav__list a {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 15px 16px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--ink-soft);
   border-bottom: 2px solid transparent;
   transition: .15s;
   white-space: nowrap;
}

.sw-subnav__list a:hover {
   color: var(--ink);
}

.sw-subnav__list a span {
   font-family: var(--ac-mono);
   font-size: 10.5px;
   color: var(--muted);
   background: var(--muted-bg);
   padding: 1px 7px;
   border-radius: 999px;
}

.sw-body {
   padding: 32px 0 96px;
}

.sw-layout {
   display: grid;
   grid-template-columns: 320px 1fr;
   gap: 56px;
   align-items: start;
}

.sw-main {
   min-width: 0;
   order: 2;
}

.sw-aside {
   order: 1;
}

.sw-block {
   margin-bottom: 56px;
   scroll-margin-top: 120px;
}

.sw-block:last-child {
   margin-bottom: 0;
}

.sw-block h2 {
   font-size: clamp(1.5rem, 2.2vw, 1.9rem);
   margin-bottom: 18px;
   letter-spacing: -.02em;
}

.sw-prose {
   font-size: 15.5px;
   line-height: 1.8;
   color: var(--ink-soft);
}

.sw-prose p {
   margin-bottom: 16px;
}

.sw-prose h1 {
   font-size: 1.6rem;
   margin: 32px 0 14px;
   color: var(--ink);
}

.sw-prose h2 {
   font-size: 1.4rem;
   margin: 28px 0 12px;
   color: var(--ink);
}

.sw-prose h3 {
   font-size: 1.2rem;
   margin: 22px 0 10px;
   color: var(--ink);
}

.sw-prose h4 {
   font-size: 1.05rem;
   margin: 18px 0 8px;
   color: var(--ink);
}

.sw-prose h5,
.sw-prose h6 {
   font-size: .95rem;
   margin: 16px 0 6px;
   color: var(--ink);
   text-transform: uppercase;
   letter-spacing: .03em;
}

.sw-prose ul {
   list-style: disc;
   padding-left: 22px;
   margin-bottom: 16px;
}

.sw-prose ol {
   list-style: decimal;
   padding-left: 22px;
   margin-bottom: 16px;
}

.sw-prose li {
   margin: 8px 0;
   line-height: 1.7;
   padding-left: 4px;
}

.sw-prose li::marker {
   color: var(--em);
   font-weight: 700;
}

.sw-prose a {
   color: var(--em-dark);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.sw-prose strong {
   color: var(--ink);
   font-weight: 700;
}

.sw-prose img {
   width: 100%;
   height: auto;
   border-radius: 14px;
   margin: 16px 0;
}

.sw-prose blockquote {
   margin: 20px 0;
   padding: 16px 22px;
   border-left: 3px solid var(--em);
   background: var(--muted-bg);
   border-radius: 0 12px 12px 0;
   font-style: italic;
   color: var(--ink);
}

.sw-prose blockquote p:last-child {
   margin-bottom: 0;
}

.sw-prose code {
   font-family: var(--ac-mono);
   font-size: .88em;
   background: var(--muted-bg);
   color: var(--em-dark);
   padding: 2px 6px;
   border-radius: 5px;
}

.sw-prose pre {
   background: var(--dark);
   color: #fff;
   padding: 16px 20px;
   border-radius: 12px;
   overflow-x: auto;
   margin: 20px 0;
   font-size: 13.5px;
   line-height: 1.6;
}

.sw-prose pre code {
   background: none;
   color: inherit;
   padding: 0;
}

.sw-prose hr {
   border: none;
   border-top: 1px solid var(--line);
   margin: 32px 0;
}

/* tables — handle content with or without a real <thead>, keep readable at any width */
.sw-prose table {
   display: table;
   width: auto;
   max-width: 100%;
   overflow: hidden;
   border-collapse: separate;
   border-spacing: 0;
   margin: 24px 0;
   font-size: 14px;
   border: 1px solid var(--line);
   border-radius: 12px;
}

/* WYSIWYG editors wrap tables in <figure class="table">; that legacy selector out-specifies
   the rule above, so re-assert collapse mode here at matching specificity. */
.sw-prose figure.table table {
   border-collapse: separate;
   border-spacing: 0;
}

.sw-prose thead th,
.sw-prose thead td {
   background: var(--dark);
   color: #fff;
   font-weight: 600;
   font-size: 13px;
}

.sw-prose table:not(:has(thead)) tr:first-child th,
.sw-prose table:not(:has(thead)) tr:first-child td {
   background: var(--dark);
   color: #fff;
   font-weight: 600;
   font-size: 13px;
}

.sw-prose thead th *,
.sw-prose thead td *,
.sw-prose table:not(:has(thead)) tr:first-child th *,
.sw-prose table:not(:has(thead)) tr:first-child td * {
   color: inherit;
}

.sw-prose td,
.sw-prose th {
   border-bottom: 1px solid var(--line);
   padding: 11px 16px;
   text-align: left;
   vertical-align: top;
   line-height: 1.55;
   white-space: normal;
}

/* re-assert at matching specificity over the legacy figure.table td/th rule (adds a full 4-side
   border + different padding, which fights the bottom-line + zebra-stripe look above) */
.sw-prose figure.table table td,
.sw-prose figure.table table th {
   border: none;
   border-bottom: 1px solid var(--line);
   padding: 11px 16px;
}

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

.sw-prose tbody tr:nth-child(even) td {
   background: var(--muted-bg);
}

.sw-features {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
}

.sw-feature-chip {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 16px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 12px;
   font-size: 14px;
   font-weight: 500;
   color: var(--ink);
}

.sw-feature-chip i {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--em-tint);
   color: var(--em-dark);
   font-size: 10px;
   display: grid;
   place-items: center;
   flex-shrink: 0;
}

.sw-proscons {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.sw-pros,
.sw-cons {
   padding: 24px;
   border-radius: 16px;
}

.sw-pros {
   background: #EDF7F1;
   border: 1px solid #A7E0C0;
}

.sw-cons {
   background: #FBEDEB;
   border: 1px solid #F0B4AC;
}

.sw-pros h4,
.sw-cons h4 {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 15px;
   margin-bottom: 12px;
}

.sw-pros h4 i {
   color: var(--em);
}

.sw-cons h4 i {
   color: var(--ac-red);
}

.sw-pros .sw-prose,
.sw-cons .sw-prose {
   font-size: 14px;
   color: var(--ink-soft);
}

.sw-pros .sw-prose p,
.sw-cons .sw-prose p {
   position: relative;
   margin-bottom: 14px;
   padding-left: 26px;
}

.sw-pros .sw-prose p:last-child,
.sw-cons .sw-prose p:last-child {
   margin-bottom: 0;
}

.sw-pros .sw-prose p::before,
.sw-cons .sw-prose p::before {
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute;
   left: 0;
   top: 2px;
   font-size: 13px;
}

.sw-pros .sw-prose p::before {
   content: "\f00c";
   color: var(--em);
}

.sw-cons .sw-prose p::before {
   content: "\f00d";
   color: var(--ac-red);
}

.sw-pros .sw-prose li,
.sw-cons .sw-prose li {
   list-style: none;
}

.sw-aside {
   display: flex;
   flex-direction: column;
   gap: 16px;
   position: sticky;
   top: 120px;
}

.sw-aside__card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 22px;
}

.sw-aside__card h4 {
   font-size: 13.5px;
   margin-bottom: 16px;
}

.sw-metric {
   display: grid;
   grid-template-columns: 66px 1fr 26px;
   align-items: center;
   gap: 10px;
   margin-bottom: 11px;
}

.sw-metric:last-child {
   margin-bottom: 0;
}

.sw-metric span {
   font-size: 12.5px;
   color: var(--ink-soft);
}

.sw-metric b {
   font-family: var(--ac-mono);
   font-size: 12px;
   text-align: right;
   color: var(--ink);
}

.sw-metric__track {
   height: 6px;
   border-radius: 999px;
   background: var(--muted-bg);
   overflow: hidden;
}

.sw-metric__fill {
   height: 100%;
   border-radius: 999px;
   background: var(--em);
}

.sw-aside__cta {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 22px;
}

.sw-aside__cta h3 {
   font-size: 16px;
   margin-bottom: 6px;
}

.sw-aside__cta p {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.5;
   margin-bottom: 16px;
}

.sw-aside__cta--dark {
   background: var(--dark);
   border-color: transparent;
}

.sw-aside__cta--dark h3 {
   color: #fff;
   margin-top: 8px;
}

.sw-aside__cta--dark p {
   color: rgba(255, 255, 255, .55);
}

.sw-review-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.sw-review {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 26px;
}

.sw-review__top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 10px;
}

.sw-review__who {
   display: flex;
   align-items: center;
   gap: 12px;
}

.sw-review__avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-family: var(--ac-display);
   font-weight: 700;
   font-size: 16px;
   flex-shrink: 0;
}

.sw-review__who strong {
   display: block;
   font-family: var(--ac-display);
   font-size: 15px;
   color: var(--ink);
}

.sw-review__who small {
   font-size: 12.5px;
   color: var(--muted);
}

.sw-review__stars {
   flex-shrink: 0;
}

.sw-review__stars i {
   color: var(--star);
   font-size: 13px;
}

.sw-review__date {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-family: var(--ac-mono);
   font-size: 11.5px;
   color: var(--muted);
   margin-bottom: 14px;
}

.sw-review h3 {
   font-size: 16px;
   margin-bottom: 8px;
}

.sw-review>p {
   font-size: 14.5px;
   color: var(--ink-soft);
   line-height: 1.7;
   margin-bottom: 18px;
}

.sw-review__metrics {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding-top: 16px;
   border-top: 1px solid var(--line);
}

.sw-review__metrics span {
   font-size: 12px;
   color: var(--muted);
   background: var(--muted-bg);
   padding: 6px 12px;
   border-radius: 999px;
}

.sw-review__metrics b {
   color: var(--ink);
   font-family: var(--ac-mono);
   font-weight: 700;
}

.sw-empty {
   text-align: center;
   padding: 64px 24px;
   background: var(--surface);
   border: 1px dashed var(--line);
   border-radius: 18px;
}

.sw-empty i {
   font-size: 2.2rem;
   color: var(--ac-gray-300);
}

.sw-empty h3 {
   margin-top: 18px;
   font-size: 1.15rem;
}

.sw-empty p {
   color: var(--ink-soft);
   font-size: 14px;
   margin-top: 6px;
}

.sw-review-cta {
   text-align: center;
   margin-top: 28px;
}

/* ============================================================
   27. ARTICLE DETAIL PAGE
   ============================================================ */
.art-crumb {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 24px 0 0;
   font-family: var(--ac-mono);
   font-size: 11.5px;
   color: var(--muted);
}

.pg-hero .art-crumb {
   padding-top: 0;
   margin-bottom: 22px;
}

.art-crumb--center {
   justify-content: center;
}

.art-crumb a {
   color: var(--ink-soft);
   transition: .15s;
}

.art-crumb a:hover {
   color: var(--em-dark);
}

.art-crumb i {
   font-size: 8px;
   color: var(--ac-gray-300);
}

.art-crumb span {
   color: var(--ink);
}

.art-banner {
   position: relative;
   border-radius: 26px;
   overflow: hidden;
   margin-top: 20px;
   background: var(--muted-bg);
}

.art-banner>img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   display: block;
}

.art-banner__overlay {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 48px;
   background: linear-gradient(to top, rgba(0, 0, 0) 0%, #004c2d73 100%);
}

.art-banner__cat {
   display: inline-flex;
   align-self: flex-start;
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: #fff;
   background: var(--em);
   padding: 6px 14px;
   border-radius: 999px;
   margin-bottom: 16px;
}

.art-banner__overlay h1 {
   color: #fff;
   font-size: clamp(1.7rem, 3.6vw, 2rem);
   line-height: 1.14;
   letter-spacing: -.03em;
   margin-bottom: 24px;
   max-width: 820px;
}

.art-byline {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}

.art-byline__item {
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 999px;
   padding: 6px 14px 6px 6px;
}

.art-byline__avatar {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--em), var(--violet, #34B37A));
   color: #fff;
   font-family: var(--ac-display);
   font-weight: 700;
   font-size: 12px;
   display: grid;
   place-items: center;
   flex-shrink: 0;
}

.art-byline__item strong {
   display: block;
   font-size: 11.5px;
   font-weight: 600;
   color: #fff;
   line-height: 1.3;
}

.art-byline__item a {
   font-size: 11px;
   color: rgba(255, 255, 255, .6);
   display: block;
   margin-top: 0;
}

.art-byline__item a:hover {
   color: var(--em-glow);
}

.art-byline__time {
   background: transparent;
   border-style: dashed;
   color: rgba(255, 255, 255, .65);
   font-family: var(--ac-mono);
   font-size: 11px;
   padding: 7px 14px;
   gap: 7px;
}

/* light-background byline variant — flat inline text with icons, no pill/card chrome, no avatar */
.art-byline--light {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   margin-top: 14px;
}

.art-byline--light span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 13.5px;
   color: var(--ink-soft);
}

.art-byline--light span i {
   color: var(--muted);
   font-size: 12px;
}

.art-byline--light a {
   color: var(--em-dark);
   font-weight: 600;
}

.art-byline--light a:hover {
   text-decoration: underline;
}

/* article hero category pill (used inside .pg-hero, centered by the hero's own text-align) */
.art-hero-text__cat {
   display: inline-flex;
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: #fff;
   background: var(--em);
   padding: 6px 14px;
   border-radius: 999px;
   margin-bottom: 18px;
}

.art-layout {
   display: grid;
   grid-template-columns: 240px 1fr;
   gap: 48px;
   align-items: start;
}

.art-layout--single {
   grid-template-columns: 1fr;
   max-width: 800px;
   margin: 0 auto;
}

.art-toc {
   position: sticky;
   top: 100px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 20px 14px 20px 20px;
   border-top: 2px solid var(--em);
}

.art-toc ul {
   display: flex;
   flex-direction: column;
   gap: 1px;
}

.art-toc ul li {
   margin-top: 0;
}

.art-toc a {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.45;
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 8px 8px 8px 0;
   border-radius: 9px;
   transition: .15s;
}

.art-toc a::before {
   content: '';
   width: 5px;
   height: 5px;
   margin-top: 7px;
   border-radius: 50%;
   background: var(--ac-gray-300);
   flex-shrink: 0;
   transition: .15s;
}

.art-toc a:hover {
   color: var(--ink);
   background: var(--muted-bg);
   padding-left: 8px;
}

.art-toc a:hover::before {
   background: var(--em);
}

.art-main {
   min-width: 0;
}

.art-prose {
   font-size: 16.5px;
}

.art-prose h1 {
   font-size: 1.75rem;
}

.art-prose h2 {
   font-size: 1.55rem;
   margin-top: 36px;
}

.art-prose h3 {
   font-size: 1.3rem;
   margin-top: 28px;
}

.art-prose h4 {
   font-size: 1.1rem;
   margin-top: 22px;
}

.art-prose table {
   font-size: 14.5px;
}

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

.art-comments>h2 {
   font-size: 1.5rem;
   margin: 8px 0 24px;
}

.art-comment-form {
   background: var(--muted-bg);
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 22px;
   margin-bottom: 28px;
}

.art-comment-form textarea {
   width: 100%;
   min-height: 110px;
   padding: 14px 16px;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   background: var(--surface);
   font-family: var(--ac-font);
   font-size: 14.5px;
   resize: vertical;
   outline: none;
   transition: .15s;
}

.art-comment-form textarea:focus {
   border-color: var(--em);
}

.art-comment-form textarea:disabled {
   background: var(--ac-gray-100);
   color: var(--muted);
}

.art-comment-form .ac-btn {
   margin-top: 12px;
}

.art-comment {
   padding: 22px 0;
   border-top: 1px solid var(--line);
}

.art-comment:first-child {
   border-top: none;
   padding-top: 0;
}

.art-comment__top {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
}

.art-comment__top img {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
}

.art-comment__top h4 {
   font-size: 14.5px;
}

.art-comment__top span {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: var(--muted);
}

.art-comment>p {
   font-size: 14.5px;
   color: var(--ink-soft);
   line-height: 1.65;
   margin-bottom: 12px;
}

.art-reply-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--em-dark);
   cursor: pointer;
}

.art-reply-btn:hover {
   text-decoration: underline;
}

.art-login-hint {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--muted);
}

.art-reply-box {
   margin-top: 14px;
}

.art-reply-box textarea {
   width: 100%;
   min-height: 80px;
   padding: 12px 14px;
   border: 1.5px solid var(--line);
   border-radius: 10px;
   background: var(--surface);
   font-family: var(--ac-font);
   font-size: 13.5px;
   resize: vertical;
   outline: none;
}

.art-reply-box textarea:focus {
   border-color: var(--em);
}

.art-reply-box button {
   margin-top: 8px;
   padding: 8px 18px;
   border: none;
   border-radius: 9px;
   background: var(--em);
   color: #fff;
   font-size: 12.5px;
   font-weight: 600;
   cursor: pointer;
   transition: .15s;
}

.art-reply-box button:hover {
   background: var(--em-dark);
}

.art-replies {
   margin: 16px 0 0 0;
   padding-left: 20px;
   border-left: 2px solid var(--line);
}

.art-replies .art-comment {
   padding: 16px 0;
}

.art-replies .art-comment__top img {
   width: 34px;
   height: 34px;
}

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

/* ============================================================
   28. LISTING / ARCHIVE PAGES
   ============================================================ */
.pg-hero {
   padding: 64px 0 56px;
   text-align: center;
   background: var(--muted-bg);
   position: relative;
   overflow: hidden;
}

.pg-hero::before {
   content: '';
   position: absolute;
   top: -25%;
   left: 50%;
   transform: translateX(-50%);
   width: 70%;
   height: 90%;
   background: radial-gradient(ellipse at center, rgba(11, 138, 86, .09), transparent 62%);
   pointer-events: none;
}

.pg-hero--tight {
   padding: 60px 0;
}

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

.pg-hero .hp-eyebrow {
   justify-content: center;
}

.pg-hero h1 {
   font-size: clamp(2.1rem, 3.8vw, 2.9rem);
   letter-spacing: -.03em;
   line-height: 1.06;
   margin: 0 auto 12px;
}

.pg-hero>.ac-container>p {
   font-size: 15.5px;
   color: var(--ink-soft);
   line-height: 1.6;
   max-width: 600px;
   margin: 0 auto;
}

.pg-hero .hp-search {
   margin: 26px auto 0;
   max-width: 560px;
}

.pg-hero .mk-stats {
   margin-left: auto;
   margin-right: auto;
}

/* listing-page hero variant (recent-tools, category, blog, etc.) — stays left-aligned with a stat pill on the right */
.pg-hero__top {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   text-align: left;
}

.pg-hero__top p {
   font-size: 15.5px;
   color: var(--ink-soft);
   line-height: 1.6;
   max-width: 600px;
   margin: 0;
}

.pg-hero__stat {
   font-family: var(--ac-mono);
   font-size: 12px;
   color: var(--muted);
   background: var(--surface);
   border: 1px solid var(--line);
   padding: 8px 16px;
   border-radius: 999px;
   white-space: nowrap;
   flex-shrink: 0;
}

/* ── Header search popup ───────────────────────────────────────────────── */
.ac-search-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border: none;
   background: none;
   border-radius: 8px;
   color: var(--ink-soft);
   cursor: pointer;
   font-size: 15px;
   transition: .15s;
   flex-shrink: 0;
}

.ac-search-btn:hover {
   background: var(--muted-bg);
   color: var(--ink);
}

.ac-search-overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: rgba(26, 24, 21, .5);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 90px 16px 0;
   opacity: 0;
   visibility: hidden;
   transition: opacity .2s, visibility .2s;
}

.ac-search-overlay.is-open {
   opacity: 1;
   visibility: visible;
}

.ac-search-modal {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
   padding: 20px;
   position: relative;
   box-shadow: 0 24px 64px -12px rgba(26, 24, 21, .22);
   transform: translateY(-10px);
   transition: transform .2s;
}

.ac-search-overlay.is-open .ac-search-modal {
   transform: translateY(0);
}

.ac-search-tabs {
   display: flex;
   gap: 6px;
   margin-bottom: 14px;
}

.ac-search-tab {
   padding: 6px 16px;
   border-radius: 8px;
   border: 1px solid var(--line);
   background: none;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-soft);
   cursor: pointer;
   transition: .15s;
}

.ac-search-tab.is-active {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

.ac-search-tab:hover:not(.is-active) {
   background: var(--muted-bg);
   color: var(--ink);
}

.ac-search-form {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--muted-bg);
   border: 1.5px solid var(--line);
   border-radius: 10px;
   padding: 0 14px;
   transition: border-color .15s;
}

.ac-search-form:focus-within {
   border-color: var(--em);
}

.ac-search-form>i {
   color: var(--muted);
   font-size: 14px;
   flex-shrink: 0;
}

.ac-search-form input {
   flex: 1;
   border: none;
   background: none;
   padding: 13px 0;
   font-size: 15px;
   color: var(--ink);
   outline: none;
   min-width: 0;
}

.ac-search-form input::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
}

.ac-search-form input::placeholder {
   color: var(--muted);
}

.ac-search-form button[type="submit"] {
   flex-shrink: 0;
   padding: 8px 16px;
   background: var(--em);
   color: #fff;
   border: none;
   border-radius: 7px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: background .15s;
}

.ac-search-form button[type="submit"]:hover {
   background: var(--em-dark);
}

.ac-search-close {
   position: absolute;
   top: 14px;
   right: 14px;
   width: 30px;
   height: 30px;
   border: none;
   background: var(--muted-bg);
   border-radius: 6px;
   color: var(--ink-soft);
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .15s;
}

.ac-search-close:hover {
   background: var(--line);
   color: var(--ink);
}

/* pagination — unified skin over Laravel's default Bootstrap-4 pagination view */
.hp-pagination {
   display: flex;
   justify-content: center;
   margin-top: 48px;
}

.hp-pagination nav {
   width: auto;
}

.hp-pagination ul.pagination {
   display: flex;
   align-items: center;
   gap: 6px;
   list-style: none;
   flex-wrap: wrap;
   justify-content: center;
}

.hp-pagination .page-item {
   list-style: none;
}

.hp-pagination .page-link {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding: 0 14px;
   border-radius: 10px;
   border: 1px solid var(--line);
   background: var(--surface);
   color: var(--ink);
   font-family: var(--ac-mono);
   font-size: 13px;
   font-weight: 600;
   transition: .15s;
}

.hp-pagination .page-link:hover {
   border-color: var(--em);
   color: var(--em-dark);
   background: var(--em-tint);
}

.hp-pagination .page-item.active .page-link {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

.hp-pagination .page-item.disabled .page-link {
   opacity: .4;
   cursor: not-allowed;
}

.hp-pagination .page-item.disabled .page-link:hover {
   border-color: var(--line);
   color: var(--ink);
   background: var(--surface);
}

/* all-categories tiles */
.ac-cats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
}

.ac-cat-tile {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 20px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   transition: .2s;
}

.ac-cat-tile:hover {
   border-color: var(--em);
   transform: translateY(-3px);
   box-shadow: var(--ac-shadow-md);
}

.ac-cat-tile__icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-family: var(--ac-display);
   font-weight: 700;
   font-size: 15px;
   flex-shrink: 0;
}

.ac-cat-tile__body {
   flex: 1;
   min-width: 0;
}

.ac-cat-tile__body h3 {
   font-size: 15px;
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.ac-cat-tile__body span {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: var(--muted);
}

.ac-cat-tile>i.fa-arrow-right {
   color: var(--ac-gray-300);
   font-size: 13px;
   transition: .15s;
   flex-shrink: 0;
}

.ac-cat-tile:hover>i.fa-arrow-right {
   color: var(--em);
   transform: translateX(3px);
}

/* blog category tab strip */
.blog-tabs-wrap {
   border-bottom: 1px solid var(--line);
   padding: 24px 0 20px;
   margin-bottom: 8px;
}

.blog-tabs {
   display: flex;
   gap: 8px;
   overflow-x: auto;
   scrollbar-width: none;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
   mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.blog-tabs::-webkit-scrollbar {
   display: none;
}

.blog-tabs a {
   flex-shrink: 0;
   font-family: var(--ac-mono);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--ink-soft);
   background: var(--surface);
   border: 1px solid var(--line);
   padding: 9px 18px;
   border-radius: 999px;
   white-space: nowrap;
   transition: .15s;
}

.blog-tabs a:hover {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

/* blog listing featured block */
.blog-featured {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 20px;
   margin-bottom: 60px;
}

.blog-featured .art-banner {
   margin-top: 0;
}

.blog-featured__side {
   display: flex;
   flex-direction: column;
   gap: 6px;
   justify-content: space-between;
}

.blog-side {
   display: flex;
   gap: 14px;
   align-items: center;
   border-radius: 14px;
   transition: .15s;
}

.blog-side:hover {
   background: var(--surface);
}

.blog-side img {
   width: 125px;
   aspect-ratio: 16 / 10;
   object-fit: cover;
   border-radius: 10px;
   flex-shrink: 0;
   border: 2px solid var(--ac-gray-100);
}

.blog-side__body {
   min-width: 0;
}

.blog-side__body span {
   font-family: var(--ac-mono);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--em-dark);
}

.blog-side__body h4 {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
   margin-top: -3px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* author profile hero */
.au-hero {
   display: flex;
   align-items: center;
   gap: 28px;
   padding: 32px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 22px;
   margin-top: 4px;
   text-align: left;
}

.au-hero>img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
   border: 4px solid var(--em-tint);
}

.au-hero__body h1 {
   font-size: 1.6rem;
   margin-bottom: 6px;
}

.au-hero__body .au-role {
   display: inline-block;
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--em-dark);
   background: var(--em-tint);
   padding: 4px 12px;
   border-radius: 999px;
   margin-bottom: 12px;
}

.au-hero__body>p {
   color: var(--ink-soft);
   font-size: 14.5px;
   line-height: 1.6;
   max-width: 560px;
   margin-bottom: 16px;
}

.au-hero__meta {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
}

.au-hero__count {
   font-family: var(--ac-mono);
   font-size: 12px;
   color: var(--muted);
}

.au-social {
   display: flex;
   gap: 8px;
}

.au-social a {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: var(--muted-bg);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   color: var(--ink-soft);
   font-size: 13px;
   transition: .15s;
}

.au-social a:hover {
   background: var(--em);
   border-color: var(--em);
   color: #fff;
}

/* ============================================================
   29. WRITE-REVIEW FORM
   ============================================================ */
.rv-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 32px;
}

.rv-card>h2 {
   font-size: 1.5rem;
   margin: 6px 0 20px;
}

.rv-req {
   color: var(--ac-red);
   margin-left: 2px;
}

.rv-metric-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 15px 0;
   border-bottom: 1px solid var(--line);
}

.rv-metric-row:first-of-type {
   padding-top: 0;
}

.rv-metric-row:last-of-type {
   border-bottom: none;
}

.rv-metric-row.rv-metric-row--overall {
   background: rgba(224, 146, 43, 0.09);
   border: 1px solid rgba(224, 146, 43, 0.3);
   border-radius: 12px;
   padding: 14px 16px;
   margin-bottom: 4px;
}

.rv-metric-row.rv-metric-row--overall>label {
   font-size: 15.5px;
   color: var(--ink);
}

.rv-metric-row.rv-metric-row--overall .rv-stars label {
   font-size: 24px;
}

.rv-metric-row label {
   font-family: var(--ac-display);
   font-size: 14.5px;
   font-weight: 600;
   color: var(--ink);
}

.rv-stars {
   direction: rtl;
   display: inline-flex;
}

.rv-stars input {
   display: none;
}

.rv-stars label {
   cursor: pointer;
   font-size: 21px;
   color: var(--ac-gray-200);
   transition: color .15s;
   padding: 0 2px;
   line-height: 1;
}

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

.rv-field {
   margin-top: 22px;
}

.rv-field label {
   display: block;
   font-family: var(--ac-display);
   font-size: 14.5px;
   font-weight: 600;
   margin-bottom: 8px;
}

.rv-field label span {
   color: var(--ac-red);
}

.rv-field input[type="text"] {
   width: 100%;
   padding: 13px 16px;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   font-family: var(--ac-font);
   font-size: 14.5px;
   outline: none;
   transition: .15s;
   background: var(--surface);
   color: var(--ink);
}

.rv-field textarea {
   width: 100%;
   min-height: 140px;
   padding: 13px 16px;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   font-family: var(--ac-font);
   font-size: 14.5px;
   line-height: 1.6;
   resize: vertical;
   outline: none;
   transition: .15s;
   background: var(--surface);
   color: var(--ink);
}

.rv-field input:focus,
.rv-field textarea:focus {
   border-color: var(--em);
   box-shadow: 0 0 0 3px var(--em-tint);
}

.rv-card>form>.ac-btn {
   margin-top: 26px;
}

.rv-tool {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   margin: 14px 0 16px;
}

.rv-tool img {
   width: 48px;
   height: 48px;
   border-radius: 11px;
   object-fit: contain;
   border: 1px solid var(--line);
   background: #fff;
   padding: 3px;
   flex-shrink: 0;
}

.rv-tool h5 {
   font-size: 14px;
   margin-bottom: 3px;
}

.rv-tool p {
   font-size: 12.5px;
   color: var(--ink-soft);
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.rv-guidelines {
   margin-top: 14px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.rv-guidelines li {
   display: flex;
   gap: 10px;
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.5;
}

.rv-guidelines li i {
   color: var(--em);
   font-size: 11px;
   margin-top: 4px;
   flex-shrink: 0;
}

.rv-done {
   text-align: center;
   padding: 64px 32px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
}

.rv-done__icon {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-size: 22px;
   margin: 0 auto 20px;
}

.rv-done h3 {
   font-size: 1.3rem;
   margin-bottom: 8px;
}

.rv-done p {
   color: var(--ink-soft);
   font-size: 14.5px;
   margin-bottom: 20px;
   max-width: 420px;
   margin-left: auto;
   margin-right: auto;
}

/* ============================================================
   30. MARKETING / CONTENT PAGES
   ============================================================ */

/* image + text/steps split */
.mk-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center;
}

.mk-split__media img {
   width: 100%;
   border-radius: 22px;
   object-fit: cover;
   box-shadow: var(--ac-shadow-lg);
}

.mk-split__body h2 {
   font-size: clamp(1.6rem, 2.6vw, 2.1rem);
   margin-bottom: 16px;
   letter-spacing: -.02em;
}

.mk-split__body>p {
   color: var(--ink-soft);
   font-size: 15.5px;
   line-height: 1.75;
   margin-bottom: 14px;
}

.mk-split__steps {
   display: flex;
   flex-direction: column;
   gap: 22px;
}

/* live-data stat row */
.mk-stats {
   display: flex;
   justify-content: center;
   gap: 56px;
   flex-wrap: wrap;
}

.mk-stats--left {
   justify-content: flex-start;
}

.mk-stats div {
   text-align: center;
}

.mk-stats--left div {
   text-align: left;
}

.mk-stats b {
   font-family: var(--ac-display);
   font-size: 2.1rem;
   font-weight: 700;
   letter-spacing: -.02em;
   display: block;
}

.mk-stats span {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--muted);
   margin-top: 6px;
   display: block;
}

/* generic centered tile grid — contact channels, offices */
.mk-channels {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}

.mk-channel {
   text-align: center;
   padding: 28px 22px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 18px;
   transition: .2s;
}

.mk-channel:hover {
   border-color: var(--em);
   transform: translateY(-3px);
   box-shadow: var(--ac-shadow-md);
}

.mk-channel__icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-size: 19px;
   margin: 0 auto 16px;
}

.mk-channel h3 {
   font-size: 15.5px;
   margin-bottom: 8px;
}

.mk-channel p {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.5;
   margin-bottom: 14px;
   min-height: 38px;
}

.mk-channel a {
   font-family: var(--ac-mono);
   font-size: 12px;
   color: var(--em-dark);
   word-break: break-word;
}

.mk-channel a:hover {
   text-decoration: underline;
}

.mk-offices {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.mk-office {
   padding: 26px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 18px;
}

.mk-office__flag {
   font-size: 28px;
   margin-bottom: 12px;
   line-height: 1;
}

.mk-office h3 {
   font-size: 16px;
   margin-bottom: 4px;
}

.mk-office__country {
   font-family: var(--ac-mono);
   font-size: 10.5px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--em-dark);
   margin-bottom: 14px;
   display: block;
}

.mk-office address {
   font-style: normal;
   font-size: 13.5px;
   color: var(--ink-soft);
   line-height: 1.75;
}

/* job listing rows */
.mk-jobs {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.mk-job {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 22px 26px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   transition: .2s;
}

.mk-job:hover {
   border-color: var(--em);
}

.mk-job h3 {
   font-size: 16px;
   margin-bottom: 4px;
}

.mk-job p {
   font-size: 13.5px;
   color: var(--ink-soft);
}

.mk-job__exp {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   margin-top: 9px;
   padding: 3px 9px;
   border-radius: 6px;
   background: var(--muted-bg);
   font-size: 12px;
   font-weight: 500;
   color: var(--ink-soft);
}

.mk-job__exp i {
   font-size: 11px;
   color: var(--muted);
}

/* pricing cards — sponsorship */
.pr-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   max-width: 820px;
   margin: 0 auto;
}

.pr-card {
   position: relative;
   padding: 36px 32px;
   background: var(--surface);
   border: 1.5px solid var(--line);
   border-radius: 22px;
   transition: .2s;
}

.pr-card--popular {
   border-color: var(--em);
   box-shadow: var(--ac-shadow-lg);
}

.pr-card__badge {
   position: absolute;
   top: -14px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--em);
   color: #fff;
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .05em;
   padding: 6px 16px;
   border-radius: 999px;
   white-space: nowrap;
}

.pr-card__tier {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--em-dark);
}

.pr-card__name {
   font-size: 1.5rem;
   margin: 6px 0 8px;
}

.pr-card__tagline {
   font-size: 14px;
   color: var(--ink-soft);
   margin-bottom: 22px;
}

.pr-card__price {
   display: flex;
   align-items: baseline;
   gap: 6px;
   padding-bottom: 22px;
   margin-bottom: 22px;
   border-bottom: 1px solid var(--line);
}

.pr-card__price .amt {
   font-family: var(--ac-display);
   font-size: 2.6rem;
   font-weight: 700;
   letter-spacing: -.02em;
   color: var(--primary);
}

.pr-card__price span {
   font-family: var(--ac-mono);
   font-size: 12px;
   color: var(--muted);
}

.pr-card__label {
   font-family: var(--ac-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--muted);
   margin-bottom: 16px;
}

.pr-list {
   display: flex;
   flex-direction: column;
   gap: 13px;
   margin-bottom: 26px;
}

.pr-list li {
   display: flex;
   gap: 11px;
   font-size: 14px;
   color: var(--ink);
   line-height: 1.5;
}

.pr-list li i {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-size: 9px;
   flex-shrink: 0;
   margin-top: 2px;
}

.pr-card--popular .pr-list li i {
   background: var(--em);
   color: #fff;
}

/* form field additions — extend .rv-field to select/email/number/file, add 2-col row + captcha */
.rv-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

.rv-field input[type="email"],
.rv-field input[type="number"],
.rv-field input[type="password"],
.rv-field input[type="url"],
.rv-field select {
   width: 100%;
   padding: 13px 16px;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   font-family: var(--ac-font);
   font-size: 14.5px;
   outline: none;
   transition: .15s;
   background: var(--surface);
   color: var(--ink);
}

.rv-field select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238F897B'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.18l3.71-3.95a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-size: 16px;
   padding-right: 40px;
}

.rv-field input[type="email"]:focus,
.rv-field input[type="number"]:focus,
.rv-field input[type="password"]:focus,
.rv-field input[type="url"]:focus,
.rv-field select:focus {
   border-color: var(--em);
   box-shadow: 0 0 0 3px var(--em-tint);
}

.rv-field input[type="file"] {
   width: 100%;
   padding: 12px 16px;
   border: 1.5px dashed var(--line);
   border-radius: 12px;
   background: var(--muted-bg);
   font-family: var(--ac-font);
   font-size: 13.5px;
   color: var(--ink-soft);
   cursor: pointer;
}

.rv-field input[type="file"]:focus {
   outline: none;
   border-color: var(--em);
}

.rv-captcha {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 22px;
   padding: 14px 16px;
   background: var(--muted-bg);
   border: 1px solid var(--line);
   border-radius: 12px;
}

.rv-captcha img {
   width: 100px;
   border-radius: 8px;
   flex-shrink: 0;
}

.rv-captcha input {
   flex: 1;
   padding: 11px 14px;
   border: 1.5px solid var(--line);
   border-radius: 9px;
   font-family: var(--ac-font);
   font-size: 14px;
   outline: none;
   background: var(--surface);
   color: var(--ink);
}

.rv-captcha input:focus {
   border-color: var(--em);
}

/* ============================================================
   31. AUTH PAGES (login / signup / forgot / reset)
   ============================================================ */
.au-body {
   background: var(--bg);
}

.au-shell {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 56px 24px;
   position: relative;
   overflow: hidden;
}

.au-shell::before {
   content: '';
   position: absolute;
   top: -15%;
   left: 50%;
   transform: translateX(-50%);
   width: 70%;
   height: 60%;
   background: radial-gradient(ellipse at center, rgba(11, 138, 86, .1), transparent 62%);
   pointer-events: none;
}

.au-shell__logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--ac-display);
   font-size: 18px;
   font-weight: 700;
   color: var(--ink);
   letter-spacing: -.02em;
   margin-bottom: 36px;
   position: relative;
   z-index: 1;
}

.au-shell__foot {
   margin-top: 32px;
   font-family: var(--ac-mono);
   font-size: 11.5px;
   color: var(--muted);
   position: relative;
   z-index: 1;
}

.au-card {
   width: 100%;
   max-width: 420px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 40px 36px;
   box-shadow: var(--ac-shadow-lg);
   position: relative;
   z-index: 1;
}

.au-card__head {
   text-align: center;
   margin-bottom: 28px;
}

.au-card__head h1 {
   font-size: 1.5rem;
   letter-spacing: -.02em;
   margin-bottom: 8px;
}

.au-card__head p {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.5;
}

.au-card form {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.au-card .ac-btn {
   width: 100%;
   justify-content: center;
   margin-top: 2px;
}

.au-card__foot {
   text-align: center;
   margin-top: 24px;
   font-size: 13.5px;
   color: var(--ink-soft);
}

.au-card__foot a {
   color: var(--em-dark);
   font-weight: 600;
}

.au-card__foot a:hover {
   text-decoration: underline;
}

.au-row-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: -4px;
}

.au-checkbox {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--ink-soft);
   cursor: pointer;
}

.au-checkbox input {
   width: 15px;
   height: 15px;
   accent-color: var(--em);
   cursor: pointer;
}

.au-link-muted {
   font-size: 13px;
   color: var(--muted);
}

.au-link-muted:hover {
   color: var(--em-dark);
}

.au-back {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-family: var(--ac-mono);
   font-size: 12px;
   color: var(--muted);
   margin-bottom: 18px;
}

.au-back:hover {
   color: var(--em-dark);
}

.au-icon-badge {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-size: 19px;
   margin: 0 auto 16px;
}

/* ============================================================
   32. USER DASHBOARD
   ============================================================ */
.db-hero {
   padding: 40px 0 28px;
}

.db-hero h1 {
   font-size: clamp(1.6rem, 2.6vw, 2rem);
   letter-spacing: -.02em;
}

.db-hero p {
   color: var(--ink-soft);
   font-size: 14.5px;
   margin-top: 6px;
}

.db-layout {
   display: grid;
   grid-template-columns: 250px 1fr;
   gap: 28px;
   align-items: start;
}

.db-nav {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 10px;
   position: sticky;
   top: 88px;
}

.db-nav a,
.db-nav form button {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 14px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 500;
   color: var(--ink-soft);
   transition: .15s;
}

.db-nav a i,
.db-nav form button i {
   width: 18px;
   text-align: center;
   color: var(--muted);
   font-size: 14px;
   flex-shrink: 0;
}

.db-nav a:hover,
.db-nav form button:hover {
   background: var(--muted-bg);
   color: var(--ink);
}

.db-nav form {
   display: contents;
}

.db-nav a.is-active {
   background: var(--em-tint);
   color: var(--em-dark);
   font-weight: 600;
}

.db-nav a.is-active i {
   color: var(--em-dark);
}

.db-nav__divider {
   height: 1px;
   background: var(--line);
   margin: 8px 8px;
}

.db-nav a.is-danger:hover,
.db-nav form button.is-danger:hover {
   background: #FBEDEB;
   color: var(--ac-red);
}

.db-nav a.is-danger:hover i,
.db-nav form button.is-danger:hover i {
   color: var(--ac-red);
}

.db-panel {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 28px;
}

.db-panel+.db-panel {
   margin-top: 16px;
}

.db-panel__head {
   margin-bottom: 22px;
}

.db-panel__head h2 {
   font-size: 1.15rem;
}

.db-panel__head p {
   font-size: 13.5px;
   color: var(--ink-soft);
   margin-top: 4px;
}

.db-welcome {
   display: flex;
   align-items: center;
   gap: 20px;
}

.db-welcome__icon {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   background: var(--em-tint);
   color: var(--em-dark);
   display: grid;
   place-items: center;
   font-size: 22px;
   flex-shrink: 0;
}

.db-welcome h2 {
   font-size: 1.3rem;
   margin-bottom: 4px;
}

.db-welcome p {
   font-size: 14px;
   color: var(--ink-soft);
}

.db-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 24px;
}

.db-stat {
   padding: 18px;
   border: 1px solid var(--line);
   border-radius: 14px;
   text-align: center;
}

.db-stat b {
   font-family: var(--ac-display);
   font-size: 1.7rem;
   font-weight: 700;
   display: block;
}

.db-stat span {
   font-family: var(--ac-mono);
   font-size: 10.5px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--muted);
   margin-top: 4px;
   display: block;
}

.db-item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   padding: 20px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: var(--surface);
   transition: .15s;
}

.db-item:hover {
   border-color: var(--em);
}

.db-item+.db-item {
   margin-top: 12px;
}

.db-item__logo {
   width: 52px;
   height: 52px;
   border-radius: 12px;
   object-fit: contain;
   border: 1px solid var(--line);
   background: #fff;
   padding: 4px;
   flex-shrink: 0;
}

.db-item__body {
   flex: 1;
   min-width: 0;
}

.db-item__body h3 {
   font-size: 15.5px;
   margin-bottom: 3px;
}

.db-item__body h3 a {
   color: var(--ink);
}

.db-item__body h3 a:hover {
   color: var(--em-dark);
}

.db-item__tagline {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.5;
}

.db-item__excerpt {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.6;
   margin-top: 8px;
}

.db-item__meta {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 12px;
   flex-wrap: wrap;
}

.db-item__actions {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-shrink: 0;
}

.db-badge {
   font-family: var(--ac-mono);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .05em;
   padding: 4px 10px;
   border-radius: 999px;
   font-weight: 700;
}

.db-badge--live {
   background: var(--em-tint);
   color: var(--em-dark);
}

.db-badge--pending {
   background: #FBEDEB;
   color: var(--ac-red);
}

.db-badge--stars {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.db-badge--stars i {
   color: var(--star);
}

.db-tabs {
   display: flex;
   gap: 24px;
   border-bottom: 1px solid var(--line);
   margin-bottom: 22px;
}

.db-tabs a {
   padding: 4px 2px 12px;
   font-family: var(--ac-font);
   font-size: 14px;
   font-weight: 600;
   color: var(--muted);
   border-bottom: 2px solid transparent;
   transition: .15s;
   margin-bottom: -1px;
}

.db-tabs a:hover {
   color: var(--ink);
}

.db-tabs a.is-active {
   color: var(--ink);
   border-color: var(--em);
}

.db-tabs a span {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: var(--muted);
   margin-left: 6px;
}

.db-comment {
   padding: 18px 20px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: var(--surface);
}

.db-comment+.db-comment {
   margin-top: 12px;
}

.db-comment__meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 10px;
   flex-wrap: wrap;
}

.db-comment__meta a {
   font-size: 13.5px;
   font-weight: 600;
   color: var(--em-dark);
}

.db-comment__meta a:hover {
   text-decoration: underline;
}

.db-comment__meta span {
   font-family: var(--ac-mono);
   font-size: 11px;
   color: var(--muted);
   flex-shrink: 0;
}

.db-comment>p {
   font-size: 14px;
   color: var(--ink-soft);
   line-height: 1.65;
}

.db-comment__missing {
   font-size: 13px;
   color: var(--muted);
   font-style: italic;
}

.db-comment__parent {
   margin-top: 12px;
   padding: 12px 14px;
   background: var(--muted-bg);
   border-radius: 10px;
   border-left: 2px solid var(--line);
}

.db-comment__parent span {
   font-family: var(--ac-mono);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--muted);
   display: block;
   margin-bottom: 4px;
}

.db-comment__parent p {
   font-size: 13px;
   color: var(--ink-soft);
   line-height: 1.55;
}

/* ============================================================
   33. RESPONSIVE
   ============================================================ */
@media (max-width:1199px) {
   .hp-tools {
      grid-template-columns: repeat(3, 1fr)
   }

   .hp-articles {
      grid-template-columns: repeat(3, 1fr)
   }

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

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

   .jumbo_image img {
      bottom: 5px;
      right: 0;
      width: 300px
   }

   .featuredBlog img {
      aspect-ratio: 15/10
   }

   .featuredMetaContent h3 {
      font-size: 1.35rem
   }

   .sidePost img {
      width: 100px
   }

   .ac-footer__grid {
      grid-template-columns: 1fr repeat(2, 1fr);
      gap: 32px
   }

   .ac-footer__about {
      grid-column: 1/-1
   }
}

@media (max-width:991px) {
   .hp-hero__title {
      font-size: clamp(2.4rem, 7vw, 3.4rem)
   }

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

   .hp-steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px
   }

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

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

   .hp-spotlight {
      grid-template-columns: 1fr
   }

   .hp-spotlight__quote {
      border-left: none;
      border-top: 1px solid rgba(255, 255, 255, .1)
   }

   .hp-cta {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .hp-cta__aside {
      justify-content: flex-start;
      gap: 48px
   }

   .hp-guide {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .hp-news {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .article_user {
      margin-bottom: 24px
   }

   .blogSection {
      padding: 48px 0
   }

   .new_listing_sidebar {
      padding: 20px 0 0;
      border-left: none;
      border-top: 1px solid var(--line);
      margin-top: 16px
   }

   .mbBottom {
      margin-bottom: 24px
   }

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

   .jumbo_image img {
      position: inherit;
      width: 110%;
      bottom: 5px;
      right: 0
   }

   .softContent {
      padding-right: 0
   }

   .banner_img img {
      width: 85%;
      display: block;
      margin: 0 auto 24px
   }

   .customTable {
      overflow: auto
   }

   .authorProfile {
      flex-direction: column
   }

   .blogProfile {
      text-align: center
   }

   .blogProfile h4 {
      display: inline-block
   }

   .followAuthor {
      display: inline-flex
   }

   .authorProfile img {
      width: 120px
   }

   .blogProfile p {
      font-size: 14px
   }

   .newsSidebar {
      margin-top: 32px
   }

   .featuredBlog {
      margin-bottom: 24px
   }

   .featuredBlog img {
      aspect-ratio: 16/9
   }

   .ac-footer__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px
   }

   .ac-footer__about {
      grid-column: 1/-1
   }

   .sw-hero__grid {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .sw-layout {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .sw-main {
      order: 1;
   }

   .sw-aside {
      position: static;
      order: 2;
   }

   .art-layout {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .art-toc {
      position: static
   }

   .hp-articles--3col {
      grid-template-columns: repeat(2, 1fr)
   }

   .ac-cats {
      grid-template-columns: repeat(3, 1fr)
   }

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

   .mk-split {
      grid-template-columns: 1fr;
      gap: 32px
   }

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

   .mk-offices {
      grid-template-columns: 1fr
   }

   .db-layout {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .db-nav {
      position: static;
      display: flex;
      flex-direction: column;
      gap: 2px
   }
}

@media (max-width:767px) {
   .hp-hero {
      padding: 64px 0 0
   }

   .hp-hero__title {
      font-size: clamp(2rem, 8vw, 2.6rem)
   }

   .hp-hero__lede {
      font-size: 15.5px
   }

   .hp-hero__stats {
      gap: 32px;
      margin-top: 40px
   }

   .hp-hero__stat b {
      font-size: 1.7rem
   }

   .hp-section {
      padding: 60px 0
   }

   .hp-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 36px
   }

   .hp-head--center {
      align-items: center
   }

   .hp-tools {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px
   }

   .hp-fresh {
      grid-template-columns: 1fr
   }

   .hp-steps {
      grid-template-columns: 1fr
   }

   .hp-cats {
      grid-template-columns: 1fr
   }

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

   .hp-articles {
      grid-template-columns: 1fr
   }

   .hp-spotlight__main,
   .hp-spotlight__quote {
      padding: 36px 28px
   }

   .hp-cta {
      padding: 40px 28px
   }

   .hp-news {
      padding: 36px 28px
   }

   .hp-news__form {
      flex-direction: column
   }

   .hp-news__form input {
      width: 100%
   }

   .ac-footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px
   }

   .ac-footer__about {
      grid-column: 1/-1;
      text-align: center
   }

   .ac-footer__about .ac-footer__brand {
      justify-content: center
   }

   .ac-footer__about p {
      margin: 0 auto 20px
   }

   .ac-footer__social {
      justify-content: center
   }

   .hero_banner {
      padding: 56px 0
   }

   .sectionPadding {
      padding: 56px 0
   }

   .section_heading h3 {
      font-size: 1.5rem
   }

   .article_meta h1 {
      font-size: 1.5rem
   }

   .table_of_content {
      padding: 20px;
      background: var(--muted-bg);
      border-radius: var(--ac-radius);
      border: 1px solid var(--line)
   }

   .jumbo_image img {
      position: static;
      width: 100%;
      margin-bottom: -40px
   }

   .comp_margin {
      padding: 32px 0
   }

   .rating_graph {
      margin: 24px 0 8px
   }

   .comp_social {
      justify-content: right;
      margin-top: 16px
   }

   .ratings {
      border-top: 1px solid var(--line);
      border-left: none;
      padding: 20px
   }

   .feedback_area {
      padding: 20px
   }

   .new_comp_acc ul.accordion-list li h3 {
      font-size: 14px
   }

   .modal-window {
      width: 95%
   }

   div#nav-menu {
      overflow: auto;
      overflow-y: hidden
   }

   .newHeroText h2 {
      font-size: 14px;
      line-height: 1.5
   }

   .softContent h2 {
      font-size: 1.3rem
   }

   .softContent h3 {
      font-size: 1.15rem
   }

   .newsCard img {
      width: 150px;
      aspect-ratio: 3/2.5
   }

   .sidebarHead h3 {
      line-height: 1.5
   }

   .newsMeta h3 {
      font-size: 14px
   }

   .newsLink a {
      font-size: 14px
   }

   .newsHead h1 {
      border-left: 5px solid var(--em)
   }

   .newsMeta h1 {
      font-size: 1.5rem
   }

   .newBlogPage {
      padding: 48px 0
   }

   .scrollingTabs .tab {
      padding: 7px 12px;
      font-size: 13px
   }

   .scrollingTabs .icon i {
      width: 32px;
      height: 32px;
      font-size: 14px;
      line-height: 32px
   }

   .featuresText img {
      width: 48px
   }

   .stickyBar {
      margin-bottom: 20px
   }

   .job-listing button {
      font-size: 13px;
      padding: 8px 14px
   }

   .appRating {
      width: 100%;
      margin-left: inherit;
      margin-top: 12px
   }

   .sw-hero__id {
      flex-direction: column;
      gap: 12px
   }

   .sw-hero__id h1 {
      font-size: 1.6rem
   }

   .sw-hero__score {
      padding: 20px
   }

   .sw-hero__score-num {
      font-size: 2.4rem
   }

   .sw-proscons {
      grid-template-columns: 1fr;
      gap: 12px
   }

   .sw-features {
      grid-template-columns: 1fr
   }

   .sw-review__top {
      flex-direction: column;
      gap: 8px
   }

   .art-banner>img {
      aspect-ratio: 4/5
   }

   .art-banner__overlay {
      padding: 28px
   }

   .art-byline__item strong,
   .art-byline__item a {
      font-size: 10.5px
   }

   .hp-articles--3col {
      grid-template-columns: 1fr
   }

   .pg-hero__top {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px
   }

   .ac-cats {
      grid-template-columns: 1fr
   }

   .au-hero {
      flex-direction: column;
      text-align: center;
      padding: 28px 20px
   }

   .au-hero__meta {
      justify-content: center
   }

   .blog-side img {
      width: 72px;
      height: 54px
   }

   .mk-channels {
      grid-template-columns: 1fr
   }

   .rv-row {
      grid-template-columns: 1fr;
      gap: 0
   }

   .pr-cards {
      grid-template-columns: 1fr
   }

   .mk-job {
      flex-direction: column;
      align-items: flex-start;
      gap: 14px
   }

   .rv-captcha {
      flex-direction: column;
      align-items: stretch
   }
}

@media (max-width:575px) {
   .rv-metric-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px
   }

   .rv-card {
      padding: 22px
   }

   .hp-search input {
      padding-right: 104px
   }

   .hp-search button {
      padding: 0 16px;
      font-size: 13px
   }

   .hp-hero__tags-label {
      display: none
   }

   .hp-tools {
      grid-template-columns: 1fr
   }

   .hp-community {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

   .ac-btn--onDark,
   .hp-cta__actions .ac-btn {
      width: 100%
   }

   .hp-cta__actions {
      flex-direction: column;
      width: 100%
   }

   .ac-footer__grid {
      grid-template-columns: 1fr
   }

   .jumbo_cta {
      padding: 24px
   }

   .jumbo_image img {
      margin-bottom: -28px
   }

   .cta_box {
      padding: 20px 0
   }

   button.add_review_btn.site_button {
      padding: 8px 14px;
      font-size: 13px
   }

   .blogCardNew .blogCardMeta h3 {
      font-size: 1rem
   }

   .categoryRow h3 {
      font-size: 1.3rem;
      font-weight: 700
   }

   .featuredMetaContent h3 {
      font-size: 1rem
   }

   .featuredMeta::before {
      background: linear-gradient(to top, rgba(14, 27, 20, .95), rgba(14, 27, 20, .7))
   }

   .newsCard img {
      width: 100px;
      aspect-ratio: 1/1
   }
}

/* ── Feature rows (add/edit listing) ── */
.feat-builder {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 10px;
}

.feat-row {
   display: flex;
   gap: 8px;
   align-items: center;
}

.feat-row .feat-input {
   flex: 1;
}

.feat-row-remove {
   background: none;
   border: 1px solid var(--line, #e0e0e0);
   border-radius: 8px;
   color: #aaa;
   cursor: pointer;
   font-size: 1.1rem;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: color .15s, border-color .15s;
}

.feat-row-remove:hover {
   color: #e53e3e;
   border-color: #e53e3e;
}

.feat-add-btn {
   background: none;
   border: 1.5px dashed var(--line, #ddd);
   border-radius: 10px;
   color: var(--ink-soft, #888);
   cursor: pointer;
   font-size: 13px;
   padding: 7px 14px;
   transition: color .15s, border-color .15s;
}

.feat-add-btn:hover {
   color: var(--ac-dark, #333);
   border-color: var(--ac-dark, #333);
}