 
    .lf-section {
      margin-top: 0.5rem;
    }

    .lf-origin-hint {
      font-style: italic;     /* cursive */
      font-size: 1rem;        /* reset to regular text size */
      font-weight: normal;    /* not bold, even if inside a heading */
    }
    

    .lf-results {
      display: grid;
      gap: 1.5rem;
      padding: 1rem;      /* space around the whole grid */
    }

    .lf-info-card {
      width:100%;
      border: solid 1px #ccc;
      border-radius: 8px;
    }

    .lf-info-card {
      padding: 1rem;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
    }
    
    /* title as "slightly bigger text" */
    .lf-info-title {
      font-size: 1.25rem;   /* a bit larger than normal text */
      font-weight: 600;
      margin-bottom: 1rem;
    }
    
    /* responsive grid for key/value */
    .lf-info-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
    
    .lf-info-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.5rem;
    }
    
    .lf-info-key {
      font-size: 0.875rem;
      font-weight: 600;
      color: #374151; /* slate-700 */
    }
    
    .lf-info-val {
      font-size: 1rem;
      color: #111827; /* slate-900 */
    }
    


    .prod_img {
      height: 10vw;
      width: auto;
    }


    /* Apply to all PAC macro tables */
    .lf-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;   /* ensures consistent column widths */
    }
    
    .lf-table th,
    .lf-table td {
      border: 1px solid #ccc;
      padding: 0.4rem 0.6rem;
      vertical-align: top;
      text-align: left;
    }
    
    /* Key/value style: 1/3 vs 2/3 columns */
    .lf-table--kv th.lf-th--key {
      width: 33%;
      font-weight: 600;
    }
    .lf-table--kv td.lf-td--val {
      width: 67%;
    }

    .lf-attr-image {
      width: 30px;
    }

    /* Services laid out as equal-width grid columns */
    .lf-services {
      display: grid;
      gap: 0.75rem;
    
      /* 2 columns on small, 3 on md, 4 on lg — tweak as you like */
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (min-width: 640px) {
      .lf-services { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1024px) {
      .lf-services { grid-template-columns: repeat(4, 1fr); }
    }
    
    /* Each service card fills its grid cell */
    .lf-service {
      display: flex;            /* still use flex inside for icon + text */
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.6rem;
      height: 100%;             /* same height across a row (since your content height is uniform) */
      width: 100%;              /* ensure full cell width */
      text-decoration: none;
      color: var(--lf-link, #2563eb);
    }
    
    .lf-service:hover {
      font-size: 1.05em;            /* ~5% larger */
      text-decoration: none;
    }
    
    .lf-service__icon { width: 1rem; height: 1rem; flex-shrink: 0; }
    .lf-service__name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
        


    /* Position context */
    .lf-ref-card-wrap {
        position: relative;
        display: inline-block;
    }
    
    /* The floating card is hidden by default */
    .lf-ref-card {
        display: none;
        position: absolute;
        top: 100%;       /* appear below the reference text */
        left: 0;
        z-index: 1000;
        width: min(420px, 90vw);
        margin-top: .5rem;
        padding: 1rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }
    
    /* Show on hover */
    .lf-ref-card-wrap:hover .lf-ref-card {
        display: block;
    }
    
    /* Style the inline reference */
    .lf-reference {
        color: var(--lf-link, #2563eb);
    }


  
