:root {
    --white: #FFFFFF;
    --green: #38AD4E;
    --green-hover: #2E9341;
    --green-light: #4DBE63;
    --green-dark: #237D38;
    --green-50: #F4FAF3;
    --green-100: #E5F1E3;
    --green-200: #C9E5C3;
    --green-600: #2E9341;

    --slate-900: #0F172A;
    --slate-800: #1E293B;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748B;
    --slate-400: #94A3B8;
    --slate-300: #CBD5E1;
    --slate-200: #E2E8F0;
    --slate-100: #F1F5F9;
    --slate-50:  #F8FAFC;

    --amber-500: #F59E0B;
    --amber-400: #FBBF24;
    --amber-50: #FFFBEB;

    --red-500: #EF4444;
    --red-600: #DC2626;
    --red-50:  #FEF2F2;

    --blue-500: #3B82F6;
    --blue-50:  #EFF6FF;

    --shadow-sm: 0 1px 2px 0 rgba(15,23,42,.05);
    --shadow-md: 0 4px 16px -4px rgba(15,23,42,.08);
    --shadow-lg: 0 12px 40px -8px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.05);
    --shadow-cta: 0 4px 14px -2px rgba(56,173,78,.30);
    --shadow-card: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
    --shadow-card-hover: 0 8px 28px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.04);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;

    --ease: cubic-bezier(.4,0,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);

    --mobile-row1: 60px;
    --mobile-row2: 56px;
    --shadow-drawer: -20px 0 60px -10px rgba(15,23,42,.20);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    font-family: 'FiraGO', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--slate-900);
    background: var(--slate-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }

  .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

  /* ================================================================
     HEADER (condensed from prototype)
     ================================================================ */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--slate-200);
  }

  .utility-bar {
    background: var(--green-50);
    border-bottom: 1px solid var(--green-100);
    font-size: 13px;
    color: var(--slate-600);
  }
  .utility-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 36px; gap: 24px;
  }
  .util-group { display: flex; align-items: center; gap: 18px; }
  .util-item {
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .15s var(--ease);
  }
  .util-item:hover { color: var(--green-600); }
  .util-item svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7;
  }
  .util-divider { width: 1px; height: 14px; background: var(--green-200); }

  .main-header-inner {
    display: flex; align-items: center;
    height: 72px; gap: 32px;
  }
  .logo { flex-shrink: 0; }
  .logo img { height: 38px; }

  .main-nav { display: flex; align-self: stretch; align-items: stretch; }
  .nav-item {
    position: relative; display: inline-flex; align-items: center; gap: 5px;
    padding: 0 14px; font-size: 14px; font-weight: 500;
    color: var(--slate-700);
    transition: color .15s var(--ease);
  }
  .nav-item:hover { color: var(--green-600); }
  .nav-item.is-active { color: var(--slate-900); font-weight: 600; }
  .nav-item.is-active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
    height: 2px; background: var(--green); border-radius: 2px 2px 0 0;
  }
  .nav-item .chevron {
    width: 13px; height: 13px; stroke: currentColor; fill: none;
    stroke-width: 2.2; opacity: .55;
  }

  .header-search { flex: 1; max-width: 360px; margin-left: auto; }
  .search-wrap { position: relative; }
  .search-wrap input {
    width: 100%; height: 40px;
    padding: 0 70px 0 40px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    font-family: inherit; font-size: 14px;
    color: var(--slate-900);
    transition: all .15s var(--ease);
  }
  .search-wrap input::placeholder { color: var(--slate-400); }
  .search-wrap input:focus {
    outline: none; background: var(--white);
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(56,173,78,.15);
  }
  .search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    stroke: var(--slate-400); fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .search-kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 600; color: var(--slate-500);
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-xs); padding: 3px 6px;
    pointer-events: none; line-height: 1;
  }

  .header-actions { display: flex; align-items: center; gap: 6px; }
  .icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: var(--radius-sm);
    color: var(--slate-600); position: relative;
    transition: all .15s var(--ease);
  }
  .icon-btn:hover { background: var(--slate-100); color: var(--slate-900); }
  .icon-btn svg {
    width: 18px; height: 18px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .notif-dot {
    position: absolute; top: 9px; right: 9px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); border: 2px solid var(--white);
  }

  .lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 10px; height: 40px;
    background: transparent; border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; color: var(--slate-600);
    transition: all .15s var(--ease);
  }
  .lang-toggle:hover { background: var(--slate-100); color: var(--slate-900); }
  .flag {
    width: 18px; height: 18px; border-radius: 50%;
    object-fit: cover; box-shadow: 0 0 0 1px rgba(15,23,42,.06);
  }
  .chevron-sm {
    width: 12px; height: 12px; stroke-width: 2.2;
    opacity: .7; stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green); color: var(--white);
    font-size: 14px; font-weight: 600;
    height: 40px; padding: 0 16px;
    border: none; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: all .15s var(--ease);
  }
  .cta-primary:hover {
    background: var(--green-hover);
    box-shadow: var(--shadow-cta);
  }
  .cta-primary:active { transform: translateY(1px); }
  .cta-primary svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  .avatar-btn {
    margin-left: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--slate-200); background: var(--white);
    border-radius: 999px;
    transition: all .15s var(--ease);
  }
  .avatar-btn:hover { border-color: var(--slate-300); box-shadow: var(--shadow-sm); }
  .avatar-img {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: var(--slate-900);
  }
  .avatar-img img { width: 100%; height: 100%; object-fit: cover; }

  /* ================================================================
     BREADCRUMB
     ================================================================ */
  .breadcrumb {
    padding: 20px 0 0;
    font-size: 13px;
    color: var(--slate-500);
  }
  .breadcrumb-list {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    list-style: none;
  }
  .breadcrumb a {
    color: var(--slate-500);
    transition: color .15s var(--ease);
  }
  .breadcrumb a:hover { color: var(--green-600); }
  .breadcrumb .sep {
    color: var(--slate-300);
    font-size: 11px;
  }
  .breadcrumb .current { color: var(--slate-900); font-weight: 500; }

  /* ================================================================
     COMPANY HERO
     ================================================================ */
  .company-hero {
    margin-top: 16px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .hero-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hero-banner:not([style]) {
    background-image:
      linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.55) 100%),
      url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1600&q=80');
  }
  .hero-banner::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
  }
  .banner-edit {
    position: absolute; top: 16px; right: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.4);
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500;
    color: var(--slate-700);
    transition: all .15s var(--ease);
  }
  .banner-edit:hover { background: var(--white); }
  .banner-edit svg { width: 12px; height: 12px; stroke-width: 2; }

  .hero-content {
    position: relative;
    padding: 36px 32px 28px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
  }

  .hero-identity {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    margin-top: -56px;
    min-width: 0;
  }

  .company-avatar {
    flex-shrink: 0;
    width: 128px; height: 128px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 8px 28px -8px rgba(15,23,42,.25), 0 0 0 4px var(--white);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .company-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  .company-info {
    padding-bottom: 4px;
    min-width: 0;
  }

  .company-title-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }
  .company-name {
    font-size: var(--fs-5xl);   /* v1.2.91: 32 → 36 via token (page-title parity) */
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.02em;
    line-height: 1.1;
  }
  .verify-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px 4px 7px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--green-dark);
  }
  .verify-badge svg {
    width: 13px; height: 13px;
    fill: var(--green); stroke: none;
  }
  .claim-pending {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--amber-50);
    border: 1px solid #FCD34D;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #B45309;
  }
  .claim-pending::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--amber-500);
    animation: pulse-dot 2s var(--ease) infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.8); }
  }

  .company-tagline {
    font-size: 14px;
    color: var(--slate-600);
    margin-bottom: 14px;
    max-width: 580px;
    line-height: 1.5;
  }

  /* v1.2.101: hero meta is read at a glance — bumped from 12px to var(--fs-md)
     and darkened from slate-500 → slate-600 so the city / category / "Since YYYY"
     trio reads as primary metadata, not as a faded caption. */
  .company-meta-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 14px;
    font-size: var(--fs-md);
    color: var(--slate-600);
  }
  .meta-pill {
    display: inline-flex; align-items: center; gap: 7px;
  }
  .meta-pill svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--slate-600);
    flex-shrink: 0;
  }
  .meta-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--slate-400);
  }
  .meta-pill a:hover { color: var(--green-600); }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }
  .hero-btn-row {
    display: flex; gap: 8px;
  }
  .btn-action {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600;
    color: var(--slate-700);
    transition: all .15s var(--ease);
  }
  .btn-action:hover {
    border-color: var(--slate-300);
    box-shadow: var(--shadow-sm);
    color: var(--slate-900);
  }
  .btn-action.is-icon { width: 40px; padding: 0; justify-content: center; }
  .btn-action svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .btn-primary-action {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 18px;
    background: var(--green);
    color: var(--white);
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all .15s var(--ease);
  }
  .btn-primary-action:hover {
    background: var(--green-hover);
    box-shadow: var(--shadow-cta);
  }
  .btn-primary-action svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .hero-website {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--slate-600);
    transition: all .15s var(--ease);
  }
  .hero-website:hover {
    border-color: var(--green);
    color: var(--green-600);
    background: var(--white);
  }
  .hero-website svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }

  /* ================================================================
     STAT STRIP — sits below hero
     ================================================================ */
  .stat-strip {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .stat-cell {
    padding: 18px 22px;
    border-right: 1px solid var(--slate-100);
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
  }
  .stat-cell:last-child { border-right: none; }
  .stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--slate-500);
    display: flex; align-items: center; gap: 5px;
  }
  .stat-label svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none; stroke-width: 2;
    color: var(--slate-400);
  }
  .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.01em;
    display: flex; align-items: center; gap: 8px;
  }
  .stat-value-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--slate-500);
  }
  .stat-trend {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
  }
  .stat-trend.up { background: var(--green-50); color: var(--green-dark); }
  .stat-trend.down { background: var(--red-50); color: var(--red-600); }

  /* ================================================================
     STICKY TAB NAV
     ================================================================ */
  .tab-nav {
    position: sticky;
    top: 109px; /* header height incl utility */
    z-index: 50;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    margin: 24px 0;
    padding: 4px;
    display: flex; align-items: center;
    gap: 2px;
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    color: var(--slate-600);
    white-space: nowrap;
    transition: all .15s var(--ease);
  }
  .tab:hover { background: var(--slate-50); color: var(--slate-900); }
  .tab.is-active {
    background: var(--slate-900);
    color: var(--white);
    font-weight: 600;
  }
  .tab .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 18px;
    padding: 0 6px;
    background: var(--slate-100);
    color: var(--slate-700);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }
  .tab.is-active .tab-count {
    background: rgba(255,255,255,.15);
    color: var(--white);
  }

  /* ================================================================
     PAGE GRID
     ================================================================ */
  .page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    padding-bottom: 80px;
  }

  /* ================================================================
     CARDS (general)
     ================================================================ */
  .card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .card-header {
    padding: 20px 24px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
  }
  .card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.005em;
    display: flex; align-items: center; gap: 8px;
  }
  .card-title svg.title-icon {
    width: 16px; height: 16px;
    stroke: var(--green); fill: none; stroke-width: 2;
  }
  .card-action-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-600);
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s var(--ease);
  }
  .card-action-link:hover { color: var(--green-600); }
  .card-action-link svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }

  .card-body { padding: 8px 24px 24px; }

  /* ================================================================
     TRUST SCORE CARD — hero metric
     ================================================================ */
  .trust-score-card {
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
  }
  .trust-score-card::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--green-50) 0%, transparent 70%);
    pointer-events: none;
  }
  /* === Score hero (v1.2.x) — two-column layout ===
     LEFT: a screenshot-able emblem card (brand mark + score + grade + base
     rate) that companies can save and put on their own site as proof.
     RIGHT: the "how it's calculated" explainer + the closed/resolved/rate
     breakdown stacked below it.
     Wrapper `.score-hero` carries `data-grade` so all child colors can
     shift together when the grade is poor (red tint) or awaiting (neutral). */
  .score-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: start;
    padding: 28px;
    position: relative;
  }

  /* LEFT — emblem (logo + score). Centered in its 180px column so the
     emblem sits flush with the right-column explainer instead of pinned
     to the top-left corner. */
  .score-emblem {
    margin: 0;
    align-self: center;
    justify-self: center;
  }
  .score-emblem-card {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* Logo + score number, tight spacing. */
  .score-emblem-mark {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .score-emblem-mark img {
    width: 76px; height: 76px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
  }
  .score-emblem-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  .score-emblem-num {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -.04em;
    color: #060606;
    margin-top: -10px;
    font-feature-settings: 'tnum';
  }
  .score-emblem-denom {
    font-size: 16px;
    font-weight: 600;
    color: var(--slate-500, #64748b);
    margin-top: 0;
  }
  /* Grade-driven color shift on the score number (used to recolor the whole
     card + eyebrow; now there's only the number left). */
  .score-hero[data-grade="poor"] .score-emblem-num,
  .score-hero[data-grade="unfair"] .score-emblem-num { color: #991b1b; }

  /* Stacks the emblem above the explainer below ~900px. */
  @media (max-width: 900px) {
    .score-hero {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 24px 20px;
    }
    .score-emblem-num { font-size: 48px; }
  }
  @media (max-width: 480px) {
    .score-emblem-mark img { width: 56px; height: 56px; }
    .score-emblem-num { font-size: 42px; }
  }

  .score-ring-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .score-ring {
    width: 200px; height: 200px;
    position: relative;
  }
  .score-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
  }
  .score-ring-bg {
    fill: none; stroke: var(--slate-100); stroke-width: 14;
  }
  .score-ring-fg {
    fill: none; stroke: var(--green); stroke-width: 14;
    stroke-linecap: round;
    stroke-dasharray: 502;
    stroke-dashoffset: 100; /* 0 reviews => 0% — adjust at runtime */
    transition: stroke-dashoffset 1.4s var(--ease-out);
    filter: drop-shadow(0 4px 12px rgba(56,173,78,.25));
  }
  .score-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
  }
  .score-number {
    font-size: 56px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.04em;
    line-height: 1;
    font-feature-settings: 'tnum';
  }
  .score-denom {
    font-size: 14px;
    color: var(--slate-500);
    font-weight: 500;
    margin-top: 2px;
  }
  .score-grade {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .score-grade::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(56,173,78,.25);
  }

  .score-details {
    display: flex; flex-direction: column; gap: 5px;
  }
  .score-headline {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.01em;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 10px;
  }

  /* Fair Business mark (real logo) */
  .fb-mark-sm {
    width: 16px; height: 16px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
  }
  .fb-mark-md {
    width: 26px; height: 26px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
  }
  /* When mark sits inside .stat-label (uppercase tiny text), nudge baseline */
  .stat-label .fb-mark-sm { width: 14px; height: 14px; }
  .score-sub {
    font-size: 13px;
    color: var(--slate-600);
    line-height: 1.6;
    margin-bottom: 12px;
  }
  .score-sub a {
    color: var(--green-600);
    font-weight: 500;
    border-bottom: 1px solid var(--green-200);
    transition: border-color .15s var(--ease);
  }
  .score-sub a:hover { border-bottom-color: var(--green); }

  .score-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .score-bd-item {
    padding: 12px 14px;
    background: var(--slate-50);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-md);
  }
  .score-bd-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--slate-500);
    margin-bottom: 6px;
  }
  .score-bd-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.01em;
    line-height: 1;
  }
  .score-bd-bar {
    margin-top: 8px;
    height: 4px;
    background: var(--slate-200);
    border-radius: 2px;
    overflow: hidden;
  }
  .score-bd-bar > span {
    display: block;
    height: 100%;
    background: var(--green);
    border-radius: 2px;
  }

  /* Empty state for score (currently 0 reviews) */
  .score-empty {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--blue-50);
    border: 1px solid #DBEAFE;
    border-radius: var(--radius-md);
  }
  .score-empty svg {
    flex-shrink: 0;
    width: 22px; height: 22px;
    color: var(--blue-500);
    stroke: currentColor; fill: none; stroke-width: 2;
  }
  .score-empty-text {
    font-size: 13px;
    color: #1E40AF;
    line-height: 1.5;
  }
  .score-empty-text strong { font-weight: 600; }

  /* ================================================================
     RATING DISTRIBUTION
     ================================================================ */
  .rating-dist-note {
    font-size: 13px;
    color: var(--slate-600);
    margin: 0 0 18px;
    padding: 10px 14px;
    background: var(--slate-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--green-200);
    line-height: 1.5;
  }
  .rating-dist {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: center;
  }
  .rating-summary {
    text-align: center;
  }
  .rating-big {
    font-size: 56px;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -.04em;
    line-height: 1;
  }
  .rating-stars {
    display: inline-flex; gap: 2px;
    margin: 8px 0 6px;
  }
  .rating-stars svg { width: 22px; height: 22px; fill: var(--amber-500); flex-shrink: 0; }
  .rating-stars svg.is-empty,
  .rating-stars svg.empty { fill: var(--slate-200); stroke: var(--slate-300); stroke-width: 1; padding: 0; }
  .rating-count {
    font-size: 13px;
    color: var(--slate-500);
  }

  .dist-bars {
    display: flex; flex-direction: column; gap: 8px;
  }
  .dist-row {
    display: grid;
    grid-template-columns: 28px 1fr 36px;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: var(--slate-600);
  }
  .dist-row .star-num {
    display: flex; align-items: center; gap: 2px;
    font-weight: 600;
  }
  .dist-row .star-num svg {
    width: 11px; height: 11px; fill: var(--amber-500);
  }
  .dist-bar {
    position: relative;
    height: 8px;
    background: var(--slate-100);
    border-radius: 4px;
    overflow: hidden;
  }
  .dist-bar > span {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--green-light), var(--green));
    border-radius: 4px;
    transition: width 1s var(--ease-out);
  }
  .dist-row .dist-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--slate-700);
    font-weight: 500;
  }

  /* Criterion-breakdown variant of the same rating-bars layout.
     Replaces the 1★-5★ count distribution with per-criterion averages
     (Communication, Quality, Service, etc.). Reuses .dist-bar for the
     fill but widens the label column and rebalances the right slot to
     fit "4.3 ★". */
  .dist-row.crit-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto;
    gap: 12px;
  }
  .crit-label {
    color: var(--slate-700);
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .crit-score {
    display: inline-flex; align-items: center; gap: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--slate-900);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
  }
  .crit-score svg {
    width: 12px; height: 12px;
    fill: var(--amber-500);
    flex-shrink: 0;
  }

  @media (max-width: 600px) {
    /* On narrow screens the criterion label can take more room since
       there are no other competing columns on the row. */
    .dist-row.crit-row {
      grid-template-columns: minmax(0, 1.6fr) minmax(60px, 1.4fr) auto;
      gap: 8px;
    }
    .crit-label { font-size: 11px; }
    .crit-score { font-size: 12px; }
  }

  /* ================================================================
     PRODUCTS SECTION
     ================================================================ */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }
  .product-card {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
    transition: all .2s var(--ease);
    display: flex; flex-direction: column;
  }
  .product-card:hover {
    border-color: var(--slate-300);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
  }
  .product-image {
    aspect-ratio: 4/3;
    background: var(--slate-50);
    overflow: hidden;
    position: relative;
  }
  .product-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s var(--ease);
  }
  .product-card:hover .product-image img { transform: scale(1.04); }
  .product-rating-badge {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px;
    background: rgba(15,23,42,.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--white);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-feature-settings: 'tnum';
  }
  .product-rating-badge svg { width: 11px; height: 11px; fill: var(--amber-400); }

  .product-body {
    padding: 14px 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
    flex: 1;
  }
  .product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-900);
  }
  .product-meta {
    font-size: 12px;
    color: var(--slate-500);
  }
  .product-link {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--slate-100);
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--green-600);
  }
  .product-link svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    transition: transform .2s var(--ease);
  }
  .product-card:hover .product-link svg { transform: translateX(2px); }

  /* ================================================================
     ARTICLES LIST (blog-style rows — used on company profile,
     where each row is one product / article the company published)
     ================================================================ */
  .articles-list { display: flex; flex-direction: column; }
  .article-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--slate-100);
    transition: background .15s var(--ease);
    align-items: start;
  }
  .article-row:last-child { border-bottom: none; }
  .article-row:hover { background: var(--slate-50); }
  .article-row-thumb {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--slate-100);
    position: relative;
  }
  .article-row-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s var(--ease-out);
  }
  .article-row:hover .article-row-thumb img { transform: scale(1.04); }
  .article-row-cat {
    position: absolute;
    top: 8px; left: 8px;
    padding: 3px 8px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--slate-700);
  }
  .article-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .article-row-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--slate-900);
    line-height: 1.35;
    letter-spacing: -.005em;
    transition: color .15s var(--ease);
  }
  .article-row:hover .article-row-title { color: var(--green-dark); }
  .article-row-excerpt {
    font-size: 14px;
    color: var(--slate-600);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .article-row-meta {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--slate-500);
    margin-top: 2px;
  }
  .article-row-meta .meta-dot {
    width: 3px; height: 3px;
    background: var(--slate-300);
    border-radius: 50%;
  }
  .article-row-rating {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--slate-700);
    font-weight: 600;
  }
  .article-row-rating svg {
    width: 13px; height: 13px;
    fill: var(--amber-400);
  }
  .article-row-author-rating {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    border-radius: 999px;
    color: var(--green-dark);
    font-weight: 600;
    font-size: 12px;
  }
  .article-row-author-rating svg {
    width: 11px; height: 11px;
    fill: var(--green-dark);
  }
  @media (max-width: 700px) {
    .article-row { grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 16px; }
    .article-row-title { font-size: 16px; }
    .article-row-excerpt { -webkit-line-clamp: 2; }
  }

  /* ================================================================
     FILTER BAR
     ================================================================ */
  .filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 14px 24px;
    border-top: 1px solid var(--slate-100);
    background: var(--slate-50);
  }
  .filter-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--slate-600);
    transition: all .15s var(--ease);
  }
  .filter-pill:hover {
    border-color: var(--slate-300);
    color: var(--slate-900);
  }
  .filter-pill.is-active {
    background: var(--slate-900);
    border-color: var(--slate-900);
    color: var(--white);
  }
  .filter-pill svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }
  .filter-divider { flex: 1; }
  .filter-select {
    appearance: none;
    height: 32px;
    padding: 0 28px 0 12px;
    background: var(--white)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%2364748B" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>')
      no-repeat right 8px center / 12px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    color: var(--slate-700);
    cursor: pointer;
  }
  .filter-select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(56,173,78,.15);
  }

  /* ================================================================
     EMPTY STATE
     ================================================================ */
  .empty {
    padding: 48px 24px;
    text-align: center;
  }
  .empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 50%;
  }
  .empty-icon svg {
    width: 24px; height: 24px;
    stroke: var(--slate-400); fill: none; stroke-width: 2;
  }
  .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-900);
    margin-bottom: 4px;
  }
  .empty-desc {
    font-size: 13px;
    color: var(--slate-500);
    max-width: 360px;
    margin: 0 auto 16px;
    line-height: 1.5;
  }
  .empty-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--slate-900);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600;
    transition: all .15s var(--ease);
  }
  .empty-cta:hover { background: var(--slate-800); }
  .empty-cta svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }

  /* ================================================================
     SIDEBAR
     ================================================================ */
  .sidebar {
    display: flex; flex-direction: column; gap: 16px;
    align-self: start;
  }

  .sb-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .sb-section {
    padding: 18px 20px;
    border-bottom: 1px solid var(--slate-100);
  }
  .sb-section:last-child { border-bottom: none; }
  .sb-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--slate-500);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 5px;
  }
  .sb-label svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    color: var(--green);
  }

  .sb-about-text {
    font-size: 13px;
    color: var(--slate-700);
    line-height: 1.6;
  }
  .sb-about-text .read-more {
    display: inline-block;
    margin-top: 6px;
    color: var(--green-600);
    font-weight: 500;
    border-bottom: 1px solid var(--green-200);
  }

  .sb-tag-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 12px;
  }
  .sb-tag {
    padding: 3px 8px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    color: var(--slate-600);
  }

  .contact-list {
    display: flex; flex-direction: column;
    gap: 0;
    margin: -2px -8px;
  }
  .contact-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--slate-700);
    transition: background .15s var(--ease);
    min-width: 0;
  }
  a.contact-row:hover { background: var(--slate-50); color: var(--slate-900); }
  .contact-row .ic {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--slate-50);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-sm);
    color: var(--slate-600);
  }
  .contact-row .ic svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .contact-row .ic.green { background: var(--green-50); border-color: var(--green-100); color: var(--green-dark); }
  .contact-row .meta {
    font-size: 11px;
    color: var(--slate-500);
    margin-left: auto;
  }
  .contact-row .text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .social-row {
    display: flex; gap: 6px;
    margin-top: 10px;
  }
  .social-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--slate-50);
    border: 1px solid var(--slate-100);
    border-radius: var(--radius-sm);
    color: var(--slate-600);
    transition: all .15s var(--ease);
  }
  .social-btn:hover {
    background: var(--green-50);
    border-color: var(--green-200);
    color: var(--green-dark);
    transform: translateY(-1px);
  }
  .social-btn svg {
    width: 14px; height: 14px;
    fill: currentColor;
  }

  .map-wrap {
    height: 180px;
    background: linear-gradient(135deg, #E5F0E5 0%, #D8E8D5 100%);
    position: relative;
    overflow: hidden;
  }
  .map-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .map-roads {
    position: absolute; inset: 0;
  }
  .map-roads path {
    fill: none;
    stroke: rgba(255,255,255,.65);
    stroke-width: 4;
    stroke-linecap: round;
  }
  .map-roads path.minor {
    stroke-width: 2.5;
    stroke: rgba(255,255,255,.45);
  }
  .map-pin {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -100%);
  }
  .map-pin .pulse {
    position: absolute;
    bottom: -4px; left: 50%;
    width: 24px; height: 8px;
    transform: translateX(-50%);
    background: rgba(15,23,42,.15);
    border-radius: 50%;
    filter: blur(3px);
  }
  .map-pin .pin-body {
    width: 32px; height: 40px;
    position: relative;
    filter: drop-shadow(0 4px 8px rgba(15,23,42,.2));
  }
  .map-overlay {
    position: absolute;
    bottom: 12px; left: 12px; right: 12px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--slate-700);
  }
  .map-overlay strong { color: var(--slate-900); font-weight: 600; }
  .map-overlay svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }

  .verify-card {
    background: linear-gradient(135deg, var(--slate-900) 0%, #1E293B 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
  }
  .verify-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56,173,78,.3), transparent 60%);
    pointer-events: none;
  }
  .verify-card .sb-section {
    border-bottom-color: rgba(255,255,255,.06);
    position: relative;
  }
  .verify-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(56,173,78,.15);
    border: 1px solid rgba(56,173,78,.3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--green-light);
    margin-bottom: 10px;
  }
  .verify-eyebrow svg {
    width: 12px; height: 12px; fill: var(--green-light);
  }
  .verify-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
    letter-spacing: -.005em;
  }
  .verify-desc {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .verify-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    color: var(--slate-900);
    border: none; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    transition: all .15s var(--ease);
  }
  .verify-btn:hover { background: var(--slate-100); }
  .verify-btn svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }

  /* Similar companies */
  .similar-list {
    display: flex; flex-direction: column;
    gap: 0;
    margin: -8px -10px -10px;
  }
  .similar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
    transition: background .15s var(--ease);
    min-width: 0;
  }
  .similar-item:hover { background: var(--slate-50); }
  .similar-logo {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--slate-50);
    border: 1px solid var(--slate-100);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    color: var(--slate-700);
    overflow: hidden;
  }
  .similar-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .similar-info { flex: 1; min-width: 0; }
  .similar-name {
    font-size: 13px; font-weight: 600;
    color: var(--slate-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .similar-meta {
    font-size: 11px;
    color: var(--slate-500);
    display: flex; align-items: center; gap: 5px;
    margin-top: 1px;
  }
  .similar-meta svg { width: 10px; height: 10px; fill: var(--amber-500); }
  .similar-arrow {
    width: 14px; height: 14px;
    stroke: var(--slate-400); fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* ================================================================
     SECTION SPACING
     ================================================================ */
  .section { margin-bottom: 24px; }

  /* ================================================================
     MOBILE HEADER ELEMENTS (hidden on desktop)
     ================================================================ */
  body.has-drawer-open { overflow: hidden; }

  .mobile-toggle, .avatar-btn-mobile, .lang-toggle-mobile,
  .mobile-search-row { display: none; }

  .mobile-toggle {
    width: 40px; height: 40px;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px;
    background: transparent; border: none;
    padding: 12px;
    border-radius: var(--radius-sm);
    transition: background .15s var(--ease);
  }
  .mobile-toggle:hover { background: var(--slate-100); }
  .mt-line { width: 22px; height: 2px; background: var(--slate-900); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
  .mobile-toggle.is-active .mt-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-toggle.is-active .mt-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .mobile-toggle.is-active .mt-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .avatar-btn-mobile {
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: 50%; padding: 0;
  }
  .avatar-btn-mobile .avatar-img { width: 32px; height: 32px; }

  .lang-toggle-mobile {
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: var(--radius-sm); padding: 0;
    transition: background .15s var(--ease);
  }
  .lang-toggle-mobile:hover { background: var(--slate-100); }
  .lang-toggle-mobile .flag { width: 22px; height: 22px; }

  .mobile-search-row {
    border-top: 1px solid var(--slate-100);
    background: var(--white);
  }
  .mobile-search-inner {
    display: flex; align-items: center; gap: 8px;
    height: var(--mobile-row2); padding: 0 16px;
  }
  .mobile-search-wrap { flex: 1; position: relative; }
  .mobile-search-wrap input {
    width: 100%; height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    font-family: inherit; font-size: 15px;
    color: var(--slate-900);
    transition: all .15s var(--ease);
  }
  .mobile-search-wrap input::placeholder { color: var(--slate-400); }
  .mobile-search-wrap input:focus { outline: none; background: var(--white); border-color: var(--green); box-shadow: 0 0 0 3px rgba(56,173,78,.15); }
  .mobile-search-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--slate-400); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .mobile-cta-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green); color: white;
    border: none; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  .mobile-cta-icon:hover { background: var(--green-hover); }
  .mobile-cta-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .md-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .md-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

  .mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 380px;
    background: var(--white);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-drawer);
  }
  .mobile-drawer.is-open { transform: translateX(0); }
  .md-header {
    position: sticky; top: 0;
    background: var(--white); z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--slate-200);
  }
  .md-header .logo img { height: 30px; }
  .md-close {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-sm);
    color: var(--slate-700);
    transition: background .15s var(--ease);
  }
  .md-close:hover { background: var(--slate-100); color: var(--slate-900); }
  .md-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .md-body { flex: 1; padding-bottom: 16px; }
  .md-section { padding: 8px; border-bottom: 1px solid var(--slate-100); }
  .md-section:last-of-type { border-bottom: none; }
  .md-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--slate-400); padding: 14px 12px 6px; }
  .md-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 12px; font-size: 16px; font-weight: 600; color: var(--slate-900); border-radius: var(--radius-sm); transition: background .15s var(--ease); }
  .md-nav-item:hover { background: var(--slate-50); }
  .md-nav-item.is-active { color: var(--green-600); }
  .md-nav-item .arrow-right { margin-left: auto; width: 16px; height: 16px; stroke: var(--slate-400); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .md-actions { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
  .md-action-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); transition: background .15s var(--ease); }
  .md-action-primary { background: var(--green); color: white; box-shadow: var(--shadow-sm); }
  .md-action-primary:hover { background: var(--green-hover); }
  .md-action-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.2); color: white; }
  .md-action-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .md-action-text { flex: 1; min-width: 0; }
  .md-action-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .md-action-desc { display: block; font-size: 12px; line-height: 1.35; margin-top: 2px; opacity: .85; }
  .md-link { display: flex; align-items: center; gap: 12px; padding: 12px; font-size: 15px; color: var(--slate-700); font-weight: 500; border-radius: var(--radius-sm); transition: background .15s var(--ease); }
  .md-link:hover { background: var(--slate-50); color: var(--slate-900); }
  .md-link svg.md-link-icon { width: 18px; height: 18px; stroke: var(--slate-500); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .md-link .md-link-arrow { margin-left: auto; width: 14px; height: 14px; stroke: var(--slate-400); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .md-lang-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; }
  .md-lang-row > span { font-size: 14px; font-weight: 500; color: var(--slate-700); display: inline-flex; align-items: center; gap: 8px; }
  .md-lang-row > span svg { width: 16px; height: 16px; stroke: var(--slate-500); fill: none; stroke-width: 2; }
  .md-lang-toggle { display: inline-flex; background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
  .md-lang-toggle button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--slate-600); border-radius: var(--radius-sm); transition: all .15s var(--ease); font-family: inherit; cursor: pointer; }
  .md-lang-toggle button.is-active { background: white; color: var(--slate-900); box-shadow: var(--shadow-sm); }
  .md-lang-toggle button .flag { width: 16px; height: 16px; }
  .md-footer { padding: 18px 16px; background: var(--green-50); display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--green-100); }
  .md-contact { display: inline-flex; align-items: center; gap: 10px; color: var(--slate-700); font-size: 14px; }
  .md-contact:hover { color: var(--green-600); }
  .md-contact svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }

  /* ================================================================
     RESPONSIVE
     ================================================================ */
  @media (max-width: 1024px) {
    .page-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .verify-card { grid-column: 1 / -1; }
  }

  /* === MOBILE: ≤ 860px === */
  @media (max-width: 860px) {
    /* Hide desktop header bits */
    .utility-bar,
    .main-nav,
    .header-search,
    .header-actions .cta-primary,
    .header-actions .lang-toggle,
    .header-actions .avatar-btn { display: none; }

    /* Show mobile header bits */
    .mobile-toggle, .lang-toggle-mobile, .avatar-btn-mobile { display: inline-flex; }
    .mobile-search-row { display: block; }

    .main-header-inner { height: var(--mobile-row1); gap: 0; justify-content: space-between; }
    .logo img { height: 28px; }
    .container { padding: 0 16px; }
    .header-actions { gap: 2px; }

    /* Hero */
    .hero-content { grid-template-columns: 1fr; gap: 20px; padding: 0 20px 24px; }
    .hero-identity { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: -52px; }
    .company-avatar { width: 96px; height: 96px; }
    .company-name { font-size: 24px; }
    .hero-actions { width: 100%; align-items: stretch; }
    .hero-btn-row { flex-wrap: wrap; gap: 8px; }
    .hero-btn-row .btn-action,
    .hero-btn-row .btn-primary-action { flex: 1; min-width: 0; justify-content: center; }
    .hero-btn-row .btn-action.is-icon { flex: 0 0 40px; }
    .hero-banner { aspect-ratio: 3 / 1; } /* A6: 4/1 → 3/1 — taller, better balance on phone screens */

    /* Stat strip 2x2 */
    .stat-strip { grid-template-columns: 1fr 1fr; }
    .stat-cell:nth-child(2) { border-right: none; }
    .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--slate-100); }
    .stat-cell { padding: 14px 16px; }
    .stat-value { font-size: 18px; }

    /* Trust score */
    .trust-score-grid { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px; }
    .rating-dist { grid-template-columns: 1fr; gap: 20px; }
    .score-breakdown { grid-template-columns: 1fr; }
    .score-ring { width: 160px; height: 160px; }
    .score-number { font-size: 44px; }

    /* Tab nav — stick directly under the main mobile header bar.
       Previously included `mobile-row2` (sub-header, 56px) in the offset which
       added 56 + 8 = 64px of empty space below the header on single-company
       (a page that has NO sub-header bar) — the tab strip floated mid-screen
       with a huge gap. */
    .tab-nav { top: var(--mobile-row1); }

    /* Sidebar single column on mobile */
    .sidebar { grid-template-columns: 1fr; }

    /* Filter bar inside cards */
    .filter-bar { padding: 12px 16px; }

    /* Card header padding */
    .card-header { padding: 18px 18px 14px; flex-wrap: wrap; }
    .card-body { padding: 6px 18px 20px; }

    /* Products grid */
    .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Breadcrumb spacing */
    .breadcrumb { padding-top: 16px; }
    .breadcrumb-list { font-size: 12px; }

    /* Hero CTA layout — mobile re-stack.
       Desktop: all 3 buttons in one row, right-aligned.
       Mobile: row 1 = [square share icon][Write product review fills rest],
               row 2 = [File a complaint — full width, prominent].
       This puts the primary action (complaint) on its own row so it gets
       the visual weight it deserves and is reachable with one thumb. */
    .hero-actions { width: 100%; align-items: stretch; }
    .hero-btn-row {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "share review"
        "complaint complaint";
      gap: 8px;
      width: 100%;
    }
    .hero-btn-row .fb-share-btn        { grid-area: share; }
    .hero-btn-row .btn-action:not(.is-icon) { grid-area: review; min-width: 0; }
    .hero-btn-row .btn-primary-action  {
      grid-area: complaint;
      width: 100%;
      justify-content: center;
    }
    /* Let the review button truncate its label gracefully on narrow phones
       instead of overflowing or expanding the share button column. */
    .hero-btn-row .btn-action:not(.is-icon) {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  @media (max-width: 480px) {
    .mobile-drawer { max-width: 100%; }
    .lang-toggle-mobile { width: 36px; height: 36px; }
    .lang-toggle-mobile .flag { width: 20px; height: 20px; }
    .mobile-toggle { width: 36px; }
    .logo img { height: 26px; }
    .company-name { font-size: 22px; }
    .hero-banner { aspect-ratio: 3 / 1; } /* A6: small-mobile follows same 3/1 ratio */
    .company-avatar { width: 84px; height: 84px; }
    .hero-identity { margin-top: -44px; }
    .stat-strip { grid-template-columns: 1fr; }
    .stat-cell { border-right: none !important; border-bottom: 1px solid var(--slate-100); }
    .stat-cell:last-child { border-bottom: none; }
    .products-grid { grid-template-columns: 1fr; }
  }

  /* ================================================================
     INTRO ANIMATIONS
     ================================================================ */
  .anim-in {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp .6s var(--ease-out) forwards;
  }
  .anim-in.d1 { animation-delay: .05s; }
  .anim-in.d2 { animation-delay: .1s; }
  .anim-in.d3 { animation-delay: .15s; }
  .anim-in.d4 { animation-delay: .2s; }
  .anim-in.d5 { animation-delay: .25s; }
  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
  /* Legacy site-footer / footer-grid / footer-col / footer-bottom block
     removed. The shared footer ships its own scoped tokens in
     assets/css/footer.css and now controls its own bg / padding / grid.
     Leaving these rules here was overriding the new footer's bg color
     (`--fb-bg #0B0F14`) with `var(--slate-900)` (#0F172A), which is why
     `/company/<slug>/` rendered a slightly different footer than
     `/complaints/` or any other page that didn't load public-company.css.
     Also clobbered `.footer-grid` (single source of truth for the layout
     now lives in footer.css). */

  /* ================================================================
     STATE VARIANT SYSTEM
     ----------------------------------------------------------------
     Toggle visual states via body class: state-mode-default,
     state-mode-established, state-mode-top, state-mode-low,
     state-mode-unclaimed, state-mode-suspended.
     Elements marked [data-state="X"] only show when that state is active.
     ================================================================ */

  /* Default: hide all state-only elements, show only matching ones */
  [data-state] { display: none !important; }
  body.state-mode-default [data-state="default"],
  body.state-mode-established [data-state="established"],
  body.state-mode-top [data-state="top"],
  body.state-mode-low [data-state="low"],
  body.state-mode-unclaimed [data-state="unclaimed"],
  body.state-mode-suspended [data-state="suspended"] {
    display: block !important;
  }
  /* Inline-flex variants */
  body.state-mode-default [data-state="default"].is-inline,
  body.state-mode-established [data-state="established"].is-inline,
  body.state-mode-top [data-state="top"].is-inline,
  body.state-mode-low [data-state="low"].is-inline,
  body.state-mode-unclaimed [data-state="unclaimed"].is-inline,
  body.state-mode-suspended [data-state="suspended"].is-inline {
    display: inline-flex !important;
  }
  /* Grid variants */
  body.state-mode-default [data-state="default"].is-grid,
  body.state-mode-established [data-state="established"].is-grid,
  body.state-mode-top [data-state="top"].is-grid,
  body.state-mode-low [data-state="low"].is-grid,
  body.state-mode-unclaimed [data-state="unclaimed"].is-grid,
  body.state-mode-suspended [data-state="suspended"].is-grid {
    display: grid !important;
  }
  /* Flex variants */
  body.state-mode-default [data-state="default"].is-flex,
  body.state-mode-established [data-state="established"].is-flex,
  body.state-mode-top [data-state="top"].is-flex,
  body.state-mode-low [data-state="low"].is-flex,
  body.state-mode-unclaimed [data-state="unclaimed"].is-flex,
  body.state-mode-suspended [data-state="suspended"].is-flex {
    display: flex !important;
  }

  /* ----------------------------------------------------------------
     STATE SWITCHER PANEL (floating, dev/preview-only)
     ---------------------------------------------------------------- */
  .state-switcher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1500;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 248px;
    overflow: hidden;
    font-size: 13px;
  }
  .state-switcher-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--slate-900);
    color: var(--white);
    cursor: pointer;
    user-select: none;
  }
  .state-switcher-header strong {
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
  }
  .state-switcher-header strong::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 3px rgba(56,173,78,.25);
  }
  .state-switcher-toggle {
    background: transparent; border: none; color: var(--white);
    width: 22px; height: 22px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s var(--ease);
  }
  .state-switcher-toggle:hover { background: rgba(255,255,255,.12); }
  .state-switcher-toggle svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform .2s var(--ease); }
  .state-switcher.is-collapsed .state-switcher-body { display: none; }
  .state-switcher.is-collapsed .state-switcher-toggle svg { transform: rotate(180deg); }
  .state-switcher-body {
    padding: 8px;
    display: grid;
    gap: 4px;
  }
  .state-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: 13px;
    color: var(--slate-700);
    width: 100%;
    transition: all .15s var(--ease);
  }
  .state-btn:hover {
    background: var(--slate-50);
    color: var(--slate-900);
  }
  .state-btn.is-active {
    background: var(--green-50);
    border-color: var(--green-200);
    color: var(--slate-900);
    font-weight: 600;
  }
  .state-btn .state-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--slate-300);
    flex: none;
  }
  .state-btn[data-mode="default"] .state-dot { background: var(--amber-500); }
  .state-btn[data-mode="established"] .state-dot { background: var(--green); }
  .state-btn[data-mode="top"] .state-dot { background: var(--green-dark); box-shadow: 0 0 0 2px var(--green-100); }
  .state-btn[data-mode="low"] .state-dot { background: var(--amber-500); }
  .state-btn[data-mode="unclaimed"] .state-dot { background: var(--blue-500); }
  .state-btn[data-mode="suspended"] .state-dot { background: var(--red-500); }
  .state-btn-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--slate-400);
    font-weight: 500;
  }

  @media (max-width: 600px) {
    .state-switcher { width: calc(100vw - 24px); right: 12px; bottom: 12px; }
  }

  /* ----------------------------------------------------------------
     TOP-OF-PAGE STATUS BANNER (claim CTA / suspended warning)
     ---------------------------------------------------------------- */
  .page-banner {
    margin: 16px 0 0;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid;
  }
  .page-banner svg {
    width: 22px; height: 22px;
    flex: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .page-banner-text { flex: 1; line-height: 1.5; }
  .page-banner-text strong { font-weight: 700; display: block; margin-bottom: 2px; }
  .page-banner-text span { color: inherit; opacity: .85; font-weight: 400; font-size: 13px; }
  .page-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    background: var(--white);
    border: 1px solid currentColor;
    color: inherit;
    transition: all .15s var(--ease);
    flex: none;
  }
  .page-banner-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .page-banner-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

  .page-banner.is-claim { background: var(--blue-50); border-color: #BFDBFE; color: #1D4ED8; }
  .page-banner.is-claim svg { stroke: #1D4ED8; fill: none; }
  .page-banner.is-suspended { background: var(--red-50); border-color: #FECACA; color: var(--red-600); }
  .page-banner.is-suspended svg { stroke: var(--red-600); fill: none; }
  .page-banner.is-warning { background: var(--amber-50); border-color: #FCD34D; color: #B45309; }
  .page-banner.is-warning svg { stroke: #B45309; fill: none; }

  @media (max-width: 600px) {
    .page-banner { flex-direction: column; align-items: flex-start; }
    .page-banner-cta { align-self: stretch; justify-content: center; }
  }

  /* ----------------------------------------------------------------
     HERO BADGE VARIANTS (verified, verified-pro, suspended)
     ---------------------------------------------------------------- */
  .claim-verified, .claim-verified-pro, .claim-suspended {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
  }
  .claim-verified {
    background: var(--green-50);
    border: 1px solid var(--green-200);
    color: var(--green-dark);
  }
  .claim-verified svg {
    width: 12px; height: 12px;
    fill: var(--green); stroke: none;
  }
  .claim-verified-pro {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    border: 1px solid #F59E0B;
    color: var(--white);
    box-shadow: 0 2px 6px -1px rgba(245,158,11,.35);
  }
  .claim-verified-pro svg {
    width: 12px; height: 12px;
    fill: var(--white); stroke: none;
  }
  .claim-suspended {
    background: var(--red-50);
    border: 1px solid #FECACA;
    color: var(--red-600);
  }
  .claim-suspended::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red-500);
  }

  /* ----------------------------------------------------------------
     SCORE RING COLOR VARIANTS
     ---------------------------------------------------------------- */
  .score-ring-fg { stroke: var(--green); transition: stroke-dashoffset 1s var(--ease-out), stroke .3s var(--ease); }
  body.state-mode-low .score-ring-fg { stroke: var(--amber-500); }
  body.state-mode-suspended .score-ring-fg { stroke: var(--red-500); }
  body.state-mode-top .score-ring-fg { stroke: var(--green-dark); }

  /* Score grade pill colors */
  .score-grade { transition: all .25s var(--ease); }
  body.state-mode-low .score-grade {
    background: var(--amber-50);
    color: #B45309;
    border-color: #FCD34D;
  }
  body.state-mode-suspended .score-grade {
    background: var(--red-50);
    color: var(--red-600);
    border-color: #FECACA;
  }
  body.state-mode-top .score-grade {
    background: var(--green-100);
    color: var(--green-dark);
    border-color: var(--green-200);
  }

  /* Stat trend variants per state */
  .stat-trend.is-down {
    background: var(--red-50);
    color: var(--red-600);
  }
  .stat-trend.is-warn {
    background: var(--amber-50);
    color: #B45309;
  }
  .stat-trend.is-neutral {
    background: var(--slate-100);
    color: var(--slate-600);
  }

  /* ----------------------------------------------------------------
     POPULATED REVIEW & COMPLAINT CARDS (used when reviews/complaints exist)
     ---------------------------------------------------------------- */
  .review-card {
    padding: 20px 22px;
    border-bottom: 1px solid var(--slate-100);
    display: flex; flex-direction: column;
    gap: 12px;
    scroll-margin-top: 96px;  /* room for sticky tab nav when jumping via #review-X */
  }
  .review-card:last-child { border-bottom: none; }
  /* Linked-review highlight: when a visitor arrives via /review/<slug>/ the
     review is pulled to the top of the list and tinted green so they can
     immediately spot the one they came from. */
  .review-card.is-focused {
    background: var(--green-50, #f0fdf4);
    border-left: 3px solid var(--green, #38ad4e);
    padding-left: 19px;
    border-bottom-color: var(--green-100, #dcfce7);
  }
  .review-focused-badge {
    display: inline-flex; align-items: center; gap: 5px;
    align-self: flex-start;
    padding: 3px 9px;
    background: var(--green, #38ad4e);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .review-head {
    display: flex; align-items: center;
    gap: 12px;
    /* v1.2.102: wrap on narrow widths so the product-tag pill can drop to a
       new row instead of squishing the avatar/author column. Matches the
       product-page .review-head behavior. */
    flex-wrap: wrap;
  }
  .review-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 15px;
    flex: none;
    overflow: hidden;
  }
  .review-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .review-author {
    display: flex; flex-direction: column;
    gap: 4px;
    flex: 1; min-width: 0;
  }
  .review-name {
    font-size: 14px; font-weight: 600; color: var(--slate-900);
    line-height: 1.2;
    display: flex; align-items: center; gap: 6px;
  }
  .review-name .verified-tick {
    width: 13px; height: 13px;
    color: var(--green);
    fill: currentColor; stroke: none;
  }
  .review-meta {
    font-size: 12px; color: var(--slate-500);
    display: flex; align-items: center; gap: 6px;
    line-height: 1.2;
  }
  .review-stars {
    display: inline-flex; gap: 2px;
  }
  .review-stars svg {
    width: 14px; height: 14px;
    fill: var(--amber-400); stroke: none;
  }
  .review-stars svg.is-empty,
  .review-stars svg.empty { fill: var(--slate-200); stroke: var(--slate-300); stroke-width: 1; padding: 0; }
  .review-product-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 999px;
    font-size: 12px;
    color: var(--slate-700);
    font-weight: 500;
  }
  .review-title {
    font-size: 15px; font-weight: 600; color: var(--slate-900);
    line-height: 1.4;
  }
  .review-body {
    /* v1.2.51: 14→16px / 1.6→1.7 per PDF audit */
    font-size: var(--fs-xl); color: var(--slate-700);
    line-height: var(--lh-relaxed);
  }
  .review-foot {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    padding-top: 4px;
  }
  .review-helpful {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; border: 1px solid var(--slate-200);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--slate-700);
    transition: all .15s var(--ease);
  }
  .review-helpful:hover { background: var(--slate-50); border-color: var(--slate-300); }
  .review-helpful.is-voted {
    background: var(--green-50);
    border-color: var(--green-200);
    color: var(--green-dark);
  }
  .review-helpful.is-voted svg { stroke: var(--green-dark); }
  .review-helpful svg {
    width: 12px; height: 12px;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .review-reply {
    margin-top: 4px;
    padding: 14px 16px;
    background: var(--green-50);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  .review-reply-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: var(--green-dark);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .review-reply-head svg {
    width: 13px; height: 13px;
    fill: var(--green); stroke: none;
  }
  .review-reply-body {
    font-size: 13px; color: var(--slate-700);
    line-height: 1.55;
  }

  /* Complaint card (similar to existing cp-row pattern but inline) */
  .complaint-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--slate-100);
    transition: background .15s var(--ease);
    align-items: center;
  }
  .complaint-row:hover { background: var(--slate-50); }
  .complaint-row:last-child { border-bottom: none; }
  .complaint-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-900);
    line-height: 1.4;
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .complaint-meta {
    grid-column: 1;
    font-size: 12px;
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .complaint-meta .meta-dot {
    width: 3px; height: 3px;
    background: var(--slate-300);
    border-radius: 50%;
  }
  /* .complaint-status removed — the company-page complaint list uses the
     canonical `.badge .badge-<status>` now. Only the grid-positioning rule
     stays here because it's specific to .complaint-row's 2-column layout. */
  .complaint-row > .badge {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
  @media (max-width: 600px) {
    .complaint-row { grid-template-columns: 1fr; }
    .complaint-row > .badge { grid-column: 1; grid-row: auto; justify-self: start; }
  }

  /* ----------------------------------------------------------------
     v1.2.102 — Reviews list mobile parity with the product page.
     The card markup is similar to .review-item on single-fb_product
     (avatar | author column | tag | stars) but used no mobile rules,
     so on narrow phones the product-tag pill and stars got squished
     into the avatar/author row. Mirror the product page's @700px
     rules (padding shrink, drop author min-width, smaller title +
     bumped body), and add tag-ellipsis so long product names don't
     blow out the layout.
     ---------------------------------------------------------------- */
  @media (max-width: 700px) {
    .review-card { padding: 16px; gap: 8px; }
    .review-card.is-focused { padding-left: 13px; }
    .review-head { gap: 8px; }
    .review-author { min-width: 0; flex: 1 1 auto; }
    .review-title { font-size: 14px; }
    .review-body { font-size: var(--fs-lg); }
    .review-product-tag {
      font-size: 11px;
      padding: 2px 8px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-shrink: 1;
      min-width: 0;
    }
    /* Helpful button + reply panel: tighten so they don't overflow the
       narrower card. */
    .review-helpful { font-size: 11px; padding: 4px 9px; }
    .review-reply { padding: 12px 14px; }
    .review-reply-body { font-size: 13px; }
    /* Review filter-bar: pad like the rest of the card body. */
    .filter-bar { padding: 12px 16px; }
    .filter-pill { font-size: 11px; padding: 5px 10px; }
    .filter-divider { flex: 1 0 100%; height: 0; }
    .filter-select { width: 100%; }
  }

  /* Suspended overlay treatment */
  body.state-mode-suspended .company-hero,
  body.state-mode-suspended .stat-strip,
  body.state-mode-suspended .trust-score-card {
    opacity: .92;
  }
  body.state-mode-suspended .company-name {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--red-500);
    text-underline-offset: 6px;
  }



/* #15: restore paragraph + list spacing inside the company About block. The global
   `* { margin: 0 }` reset strips <p>/<ul> margins; the main-column About (#about-main)
   had no restore, so multi-paragraph descriptions collapsed into one wall of text on
   publish. Scoped to #about-main so the global type scale is untouched. */
#about-main .card-body p { margin: 0 0 12px; }
#about-main .card-body p:last-child { margin-bottom: 0; }
#about-main .card-body ul,
#about-main .card-body ol { margin: 0 0 12px 1.25em; }
#about-main .card-body li { margin-bottom: 4px; }