.live .elementor-16232 .elementor-element.elementor-element-5bc5ccf{--display:flex;}.live .elementor-16232 .elementor-element.elementor-element-5bc5ccf:not(.elementor-motion-effects-element-type-background){background-color:var( --e-global-color-1189c12 );}.live .elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.live .elementor-16232 .elementor-element.elementor-element-7d6edff > .elementor-widget-container{padding:40px 40px 20px 40px;}.live .elementor-16232 .elementor-element.elementor-element-7d6edff{text-align:center;}.live .elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.live .elementor-16232 .elementor-element.elementor-element-12c8f22 > .elementor-widget-container{padding:0px 0px 60px 0px;}.live .elementor-16232 .elementor-element.elementor-element-12c8f22{text-align:center;}.live .elementor-16232 .elementor-element.elementor-element-ef99d52{--display:flex;}@media(max-width:1024px){.live .elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.live .elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.live .elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.live .elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}
/* harmon.ie feature comparison table
   Matches /products/harmonie-feature-comparison/.
   TYPOGRAPHY: the .t-* classes below hold the site's named styles - Features,
   Text, Icon Name - and are the only place font values live. Body cells default
   to Features; section headings use Text, which carries its own colour. */
.live .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2rem 0}
.live .cmp{width:100%;min-width:760px;color:#003E56;
     font-family:"Poppins",sans-serif;font-size:15px;font-weight:500;line-height:1.6;
     table-layout:fixed;border-collapse:separate;border-spacing:0}
/* Column widths mirror the page grid: 350px 1fr 1fr 1fr 1fr */
.live .cmp thead th:first-child,.live .cmp tbody th[scope="row"]{width:350px}
.live .cmp thead tr:last-child th:not(:first-child),.live .cmp td{width:auto}
/* No backgrounds anywhere - overrides theme table striping */
.live .cmp,.live .cmp tr,.live .cmp thead tr,.live .cmp tbody tr,.live .cmp tbody tr:nth-child(even),.live .cmp tbody tr:nth-child(odd),.live .cmp th{background:transparent !important;
     color:#003E56}
.live .cmp td{color:#003E56}
/* No grid lines; rows separated by spacing */
.live .cmp th{padding:.85rem 1rem;text-align:left;vertical-align:middle;border:0}
/* td padding is the gap between the tinted blocks; the tint itself is on .cell,
   because border-radius doesn't render on cells under border-collapse:collapse */
.live .cmp td{padding:8px 4px;text-align:left;vertical-align:middle;border:0;
        background:transparent !important}
/* 28px tinted block holding an 18px icon - 5px clear above and below it */
.live .cmp .cell{display:flex;align-items:center;gap:.5rem;
           padding:5px 18px;border-radius:8px;min-height:28px}
/* Value cells are tinted by state; the feature column and headers stay clear */
.live .cmp td.yes .cell{background:#E5EBFF}
.live .cmp td:nth-child(4).yes .cell,.live .cmp td:nth-child(5).yes .cell{background:#E5F3C8}
.live .cmp td.no .cell,.live .cmp td.note .cell{background:#E8EDF2}
/* Row hover: a band behind the whole row, around the tinted blocks rather than
   replacing them. Feature rows only - not the section headings. */
.live .cmp tbody tr:not(.section):hover th,
.live .cmp tbody tr:not(.section):hover td{background:#F5F7F9 !important}
.live .cmp tbody tr:not(.section):hover th{border-radius:8px 0 0 8px}
.live .cmp tbody tr:not(.section):hover td:last-child{border-radius:0 8px 8px 0}
/* No theme borders anywhere on the table - this is what was drawing a line above it */
.live .cmp,.live .cmp thead,.live .cmp tbody,.live .cmp tr,.live .cmp th,.live .cmp td{border:0 !important}
/* The only rules: under the Product row and under the Edition row.
   Drawn as inset lines (4px clear each side) so each cell's rule is separate. */
.live .cmp thead th{position:relative;height:52px}
.live .cmp thead th::after{content:"";position:absolute;left:4px;right:4px;bottom:0;
                     height:1px;background:#E2E8F0}
/* Everything left-aligned, headers and values alike */
.live .cmp .prod-logo{height:24px;width:auto;vertical-align:-.3em;margin-right:.5em}
.live .cmp td.note{white-space:nowrap}
.live .cmp td.note a{color:#003E56;text-decoration:underline}
/* ---- Typography: the site's named styles ---- */
/* Features */
.live .t-features{font-family:"Poppins",sans-serif;font-size:15px;font-weight:500;line-height:1.6}
/* Text - section headings; this style carries its own colour */
.live .t-text{font-family:"Poppins",sans-serif;font-size:14px;font-weight:400;line-height:1.6;
        color:#647A87 !important}
/* Icon Name - product family headers */
.live .t-iconname{font-family:"Poppins",sans-serif;font-size:20px;font-weight:500;line-height:1.1}
/* Edition names */
.live .t-edition{font-family:"Poppins",sans-serif;font-size:16px;font-weight:700;line-height:1.4}
/* Section headings: spacing only, no band */
/* Supported: blue tick in the New harmon.ie columns, green in the Classic columns */
.live .cmp .mark{display:inline-block;width:18px;height:18px;border-radius:50%;margin-top:1px;
           background:#476FFF;position:relative;vertical-align:middle;flex:0 0 18px}
.live .cmp .mark::after{content:"";position:absolute;left:50%;top:50%;
                  width:6px;height:10px;box-sizing:border-box;
                  border:solid #F8FAFC;border-width:0 2px 2px 0;
                  transform:translate(-50%,-58%) rotate(45deg)}
.live .cmp td:nth-child(4) .mark,.live .cmp td:nth-child(5) .mark{background:#6B911F}
/* Not supported: thin grey X, no circle - matches the live icon (#647A87) */
.live .cmp .mark-no{display:inline-block;width:18px;height:18px;position:relative;
              vertical-align:middle;flex:0 0 18px}
.live .cmp .mark-no::before,.live .cmp .mark-no::after{content:"";position:absolute;left:8px;top:1px;
              width:1.5px;height:16px;background:#647A87}
.live .cmp .mark-no::before{transform:rotate(45deg)}
.live .cmp .mark-no::after{transform:rotate(-45deg)}
.live .cmp td.yes{white-space:nowrap}
/* visually hidden - carries the meaning for screen readers and parsers */
.live .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:767px){
  /* Below 767px the grid stops working - four columns can't hold a tick and its
     note text at phone widths - so each feature becomes a card instead. */
  .live .cmp-wrap{padding:12px}
  .live .cmp tbody tr:not(.section):hover th,
  .live .cmp tbody tr:not(.section):hover td{background:transparent !important}
  .live .cmp{min-width:0;display:block;font-size:15px}
  .live .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .live .cmp tbody,.live .cmp tr,.live .cmp th,.live .cmp td{display:block;width:auto}
  .live .cmp tbody tr{padding:.9rem 0;border-bottom:1px solid #E2E8F0 !important}
  .live .cmp tbody th[scope="row"]{width:auto;padding:0 0 .5rem;font-weight:600}
  .live .cmp td{padding:2px 0;display:flex;align-items:center;gap:.75rem}
  .live .cmp .cell{flex:1;min-height:28px;align-items:flex-start}
  .live .cmp td::before{content:attr(data-label);flex:0 0 9.5em;
                  font-size:14px;font-weight:400;color:#647A87}
  .live .cmp td.yes,.live .cmp td.note{white-space:normal}
  /* Column-position selectors don't apply once cells are blocks, so the
     Classic columns are matched by their labels instead. */
}
/* --- side gutters: generated by scripts/live-gutters.mjs --- */
@media (max-width: 767px){.live .elementor-16232 .elementor-element.elementor-element-5bc5ccf{--padding-left:16px!important;--padding-right:16px!important}}
@media (min-width: 768px) and (max-width: 1024px){.live .elementor-16232 .elementor-element.elementor-element-5bc5ccf{--padding-left:20px!important;--padding-right:20px!important}}
@media (min-width: 1025px){.live .elementor-16232 .elementor-element.elementor-element-5bc5ccf{--padding-left:24px!important;--padding-right:24px!important}}
/* --- end side gutters --- */