/* ==========================================================================
   PRICING COMPARE — "Module by module" plan matrix. Loaded by pricing.html only.

   One card per module, each with a real <table> (so screen readers still get a
   table with headers). Plan columns are tinted bands separated by white gutters
   (a border in the card colour with background-clip: padding-box). The
   "Highlight" control sets data-plan on the section and CSS dims the rows that
   plan does not include. Entrance is per module, once, via .is-in.
   ========================================================================== */
.cm-section {
  --cm-ease: cubic-bezier(.22, 1, .36, 1);
  --cm-navy: #0b1533; --cm-muted: #5a6a8a;
  --s: 20 107 255; --g: 18 183 106; --e: 124 58 237;
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(36px, 6vh, 80px) 0 clamp(48px, 7vh, 96px);
}
.cm-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 30% at 6% 8%, rgb(20 107 255 / 6%), transparent 70%),
    radial-gradient(30% 26% at 96% 40%, rgb(124 58 237 / 5%), transparent 70%),
    radial-gradient(30% 26% at 4% 78%, rgb(18 183 106 / 5%), transparent 70%);
}
.cm-shell { width: min(100% - 2 * clamp(12px, 1.8vw, 32px), 1760px); margin-inline: auto; }

/* --- Heading + plan highlight control ------------------------------------ */
.cm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding-inline: clamp(4px, 1vw, 16px); }
.cm-intro { max-width: 820px; }
.cm-kicker { display: block; font-size: clamp(13px, .85vw, 15px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #146bff; }
.cm-intro h2 { margin: 10px 0 0; font-size: clamp(30px, 2.6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; color: var(--cm-navy); }
.cm-grad { background: linear-gradient(90deg, #146bff 0%, #2d6bff 60%, #5b4bf0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.cm-intro p { margin: 12px 0 0; max-width: 720px; font-size: clamp(15.5px, 1.02vw, 18.5px); line-height: 1.55; color: var(--cm-muted); }

.cm-filter { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 85%); border: 1px solid #e3e9f4; box-shadow: 0 8px 24px -16px rgb(30 60 130 / 30%); }
.cm-filter-label { padding: 0 10px 0 12px; font-size: 13px; font-weight: 600; color: #7a88a6; }
.cm-filter button { position: relative; z-index: 1; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #4a587a; cursor: pointer; transition: color 260ms ease; }
.cm-filter button:hover { color: var(--cm-navy); }
.cm-filter button.is-on { color: #fff; }
.cm-filter button:focus-visible { outline: 2px solid #146bff; outline-offset: 2px; }
.cm-filter-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: var(--x, 0); width: var(--w, 0); border-radius: 999px; background: var(--pill, #0b1533); box-shadow: 0 6px 16px -8px var(--pill-shadow, rgb(11 21 51 / 60%)); transition: left 420ms var(--cm-ease), width 420ms var(--cm-ease), background-color 300ms ease; }
.cm-section[data-plan='s'] .cm-filter-pill { --pill: #146bff; --pill-shadow: rgb(20 107 255 / 60%); }
.cm-section[data-plan='g'] .cm-filter-pill { --pill: #0fa86f; --pill-shadow: rgb(18 183 106 / 60%); }
.cm-section[data-plan='e'] .cm-filter-pill { --pill: #7c3aed; --pill-shadow: rgb(124 58 237 / 60%); }

/* --- Module card --------------------------------------------------------- */
.cm-module {
  --m: #146bff; --m-rgb: 20 107 255; --m-tint: #e8f0ff; --m-grad: linear-gradient(150deg, #5b95ff 0%, #146bff 60%, #0f55d6 100%);
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(18px, 2.4vh, 26px);
  border-radius: clamp(20px, 1.6vw, 28px);
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  border: 1px solid #e5eaf4;
  box-shadow: 0 1px 2px rgb(20 40 90 / 4%), 0 24px 60px -32px rgb(30 60 130 / 22%);
}
.cm-module--talent { --m: #10a76d; --m-rgb: 16 167 109; --m-tint: #e2f7ee; --m-grad: linear-gradient(150deg, #4fd8a0 0%, #12b76a 60%, #0b9a5a 100%); }
.cm-module--payroll { --m: #7c3aed; --m-rgb: 124 58 237; --m-tint: #efe7ff; --m-grad: linear-gradient(150deg, #a98bff 0%, #7c3aed 60%, #6227d4 100%); }
.cm-module--commercial { --m: #e08a00; --m-rgb: 224 138 0; --m-tint: #fff3dc; --m-grad: linear-gradient(150deg, #ffc94d 0%, #f5a524 60%, #dd8a00 100%); }
.cm-module::before { content: ''; position: absolute; z-index: -1; width: 46%; height: 260px; right: -8%; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--m-rgb) / 10%), transparent); pointer-events: none; }

.cm-mhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.8vw, 30px); border-bottom: 1px solid #eef1f8; }
.cm-micon { position: relative; overflow: hidden; display: grid; place-items: center; width: clamp(60px, 4.3vw, 78px); aspect-ratio: 1; border-radius: clamp(16px, 1.1vw, 22px); color: #fff; background: var(--m-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 12px 26px -12px rgb(var(--m-rgb) / 70%); }
.cm-micon svg { width: 48%; height: 48%; stroke-width: 2; }
.cm-micon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 40%) 50%, transparent 65%); transform: translateX(-120%); }
.cm-mtitle h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: clamp(22px, 1.8vw, 32px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; color: var(--cm-navy); }
.cm-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 14px; border-radius: 999px; background: var(--m-tint); color: var(--m); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cm-mtitle p { margin: 6px 0 0; font-size: clamp(14.5px, 1vw, 18px); color: var(--cm-muted); }

.cm-stats { display: flex; align-items: center; gap: 12px; }
.cm-stat { display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 16px; background: #f7f9fd; border: 1px solid #edf1f8; }
.cm-stat-ico { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; color: var(--m); background: var(--m-tint); }
.cm-stat-ico svg { width: 21px; height: 21px; }
.cm-stat--note .cm-stat-ico { color: #fff; background: linear-gradient(150deg, #34d399, #12b76a); border-radius: 50%; }
.cm-stat b { display: block; font-size: 14.5px; font-weight: 700; color: var(--cm-navy); white-space: nowrap; }
.cm-stat small { display: block; margin-top: 1px; font-size: 12.5px; color: #7a88a6; white-space: nowrap; }

/* --- Table --------------------------------------------------------------- */
.cm-table-wrap { padding: 0 clamp(10px, 1vw, 18px) clamp(12px, 1vw, 18px); }
.cm-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cm-col-feature { width: 29%; } .cm-col-desc { width: 29%; } .cm-col-plan { width: 14%; }
.cm-table th, .cm-table td { padding: 0 clamp(10px, 1vw, 16px); text-align: left; vertical-align: middle; }
.cm-table thead th { height: 74px; font-size: clamp(14px, .92vw, 16px); font-weight: 600; color: #4a587a; background: #f5f7fc; }
.cm-table thead th.cm-th-feature { border-radius: 14px 0 0 0; }
.cm-table thead th.cm-th-desc { border-radius: 0 14px 0 0; }

.cm-p-s { --col: var(--s); } .cm-p-g { --col: var(--g); } .cm-p-e { --col: var(--e); }
/* Plan bands: white gutters between columns come from a border in the card colour. */
.cm-table .cm-th-plan, .cm-table .cm-cell { border-left: clamp(6px, .6vw, 10px) solid #fdfeff; background-clip: padding-box; transition: background-color 300ms ease, opacity 300ms ease; }
.cm-table .cm-th-plan { background: linear-gradient(180deg, rgb(var(--col) / 13%), rgb(var(--col) / 8%)); background-clip: padding-box; border-radius: 16px 16px 0 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); }
.cm-table .cm-cell { background-color: rgb(var(--col) / 5%); text-align: center; border-bottom: 1px solid rgb(var(--col) / 7%); }
.cm-table tbody tr:last-child .cm-cell { border-radius: 0 0 16px 16px; border-bottom: 0; }
.cm-plan { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-plan-ico { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; color: rgb(var(--col)); background: #fff; box-shadow: 0 6px 14px -8px rgb(var(--col) / 55%); }
.cm-plan-ico svg { width: 23px; height: 23px; stroke-width: 2.1; }
.cm-plan b { display: block; font-size: clamp(14.5px, .98vw, 17px); font-weight: 700; color: var(--cm-navy); }
.cm-plan small { display: block; margin-top: 2px; font-size: clamp(11.5px, .72vw, 13px); font-weight: 500; line-height: 1.3; color: #6b7a99; }
.cm-plan > span:last-child { min-width: 0; }
.cm-table thead .cm-th-plan { padding-inline: clamp(8px, .7vw, 14px); }

.cm-table tbody th, .cm-table .cm-desc { height: 56px; border-bottom: 1px solid #eef1f8; transition: background-color 220ms ease, opacity 300ms ease; }
.cm-table tbody tr:last-child th, .cm-table tbody tr:last-child .cm-desc { border-bottom: 0; }
.cm-feat { display: flex; align-items: center; gap: clamp(12px, 1vw, 18px); min-width: 0; }
.cm-ficon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; color: var(--m); background: var(--m-tint); transition: transform 240ms var(--cm-ease), box-shadow 240ms ease; }
.cm-ficon svg { width: 20px; height: 20px; }
.cm-fname { font-size: clamp(14px, .92vw, 16px); font-weight: 500; line-height: 1.35; color: #111c3d; }
.cm-fdesc-inline { display: none; }
.cm-desc { font-size: clamp(13.5px, .9vw, 15.5px); line-height: 1.45; color: var(--cm-muted); }

.cm-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; transition: transform 240ms var(--cm-ease); }
.cm-mark svg { width: 18px; height: 18px; stroke-width: 2.8; }
.cm-yes { color: #10a050; background: #dcf6e6; box-shadow: inset 0 0 0 1px rgb(16 160 80 / 10%); }
.cm-no { color: #e5484d; background: #fde8ea; box-shadow: inset 0 0 0 1px rgb(229 72 77 / 10%); }

/* Row + column hover */
.cm-row:hover th, .cm-row:hover .cm-desc { background-color: #f7f9fe; }
.cm-row:hover .cm-cell { background-color: rgb(var(--col) / 10%); }
.cm-row:hover .cm-ficon { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgb(var(--m-rgb) / 70%); }
.cm-row:hover .cm-mark { transform: scale(1.1); }
.cm-table:has(.cm-p-s:hover) .cm-p-s, .cm-table:has(.cm-p-g:hover) .cm-p-g, .cm-table:has(.cm-p-e:hover) .cm-p-e { background-color: rgb(var(--col) / 10%); }

/* Plan highlight (data-plan on the section) */
.cm-section[data-plan='s'] .cm-row:not(.has-s) :is(th, .cm-desc, .cm-cell),
.cm-section[data-plan='g'] .cm-row:not(.has-g) :is(th, .cm-desc, .cm-cell),
.cm-section[data-plan='e'] .cm-row:not(.has-e) :is(th, .cm-desc, .cm-cell) { opacity: .3; }
.cm-section[data-plan='s'] :is(.cm-p-g, .cm-p-e),
.cm-section[data-plan='g'] :is(.cm-p-s, .cm-p-e),
.cm-section[data-plan='e'] :is(.cm-p-s, .cm-p-g) { opacity: .45; }
.cm-section[data-plan='s'] .cm-cell.cm-p-s, .cm-section[data-plan='g'] .cm-cell.cm-p-g, .cm-section[data-plan='e'] .cm-cell.cm-p-e { background-color: rgb(var(--col) / 12%); }
.cm-section[data-plan='s'] .cm-th-plan.cm-p-s, .cm-section[data-plan='g'] .cm-th-plan.cm-p-g, .cm-section[data-plan='e'] .cm-th-plan.cm-p-e { box-shadow: inset 0 0 0 2px rgb(var(--col) / 45%), inset 0 1px 0 rgb(255 255 255 / 70%); }

.cm-hint { display: flex; align-items: flex-start; gap: 10px; max-width: 980px; margin: 22px 0 0; padding-inline: clamp(4px, 1vw, 16px); font-size: 14px; line-height: 1.55; color: #6b7a99; }
.cm-hint svg { width: 18px; height: 18px; margin-top: 2px; color: #146bff; flex-shrink: 0; }

/* --- Entrance (once per module) ----------------------------------------- */
.js .cm-section:not(.is-in) .cm-a, .js .cm-module:not(.is-in) { opacity: 0; }
.cm-section.is-in .cm-a { animation: cm-up 760ms var(--cm-ease) backwards; }
.cm-section.is-in .cm-filter { animation-delay: 160ms; }
.cm-module.is-in { animation: cm-up 820ms var(--cm-ease) backwards; --y: 34px; }
.cm-module.is-in .cm-micon { animation: cm-pop 700ms var(--cm-ease) 180ms backwards; }
.cm-module.is-in .cm-micon::after { animation: cm-sheen 7s ease-in-out 1.6s infinite; }
.cm-module.is-in .cm-stats > * { animation: cm-left 640ms var(--cm-ease) backwards; }
.cm-module.is-in .cm-stats > :nth-child(1) { animation-delay: 260ms; }
.cm-module.is-in .cm-stats > :nth-child(2) { animation-delay: 340ms; }
.cm-module.is-in .cm-stats > :nth-child(3) { animation-delay: 420ms; }
.cm-module.is-in .cm-th-plan { animation: cm-down 620ms var(--cm-ease) 300ms backwards; }
.cm-module.is-in .cm-th-plan.cm-p-g { animation-delay: 390ms; }
.cm-module.is-in .cm-th-plan.cm-p-e { animation-delay: 480ms; }
/* Row by row: each row slides in, then its three marks pop left to right. */
.cm-module.is-in .cm-row :is(th, .cm-desc) { animation: cm-row 520ms var(--cm-ease) backwards; animation-delay: calc(560ms + var(--r) * 110ms); }
.cm-module.is-in .cm-mark { animation: cm-mark 460ms cubic-bezier(.34, 1.45, .64, 1) backwards; animation-delay: calc(700ms + var(--r) * 110ms + var(--c) * 80ms); }
/* Modules skipped past while scrolling fast appear at once (set by JS). */
.cm-module.cm-instant, .cm-module.cm-instant * { animation: none !important; }
@keyframes cm-up { from { opacity: 0; transform: translateY(var(--y, 18px)); } }
@keyframes cm-left { from { opacity: 0; transform: translateX(16px); } }
@keyframes cm-down { from { opacity: 0; transform: translateY(-10px); } }
@keyframes cm-row { from { opacity: 0; transform: translateX(-10px); } }
@keyframes cm-pop { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }
@keyframes cm-mark { from { opacity: 0; transform: scale(.4); } }
@keyframes cm-sheen { 0% { transform: translateX(-120%); } 28%, 100% { transform: translateX(120%); } }

/* --- Responsive ---------------------------------------------------------- */
/* Below 1700px the plan header stacks (icon over name) so subtitles fit whole. */
@media (max-width: 1700px) {
  .cm-table thead th { height: 104px; }
  .cm-plan { flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
}
@media (max-width: 1360px) {
  .cm-stat--note { display: none; }
  .cm-col-feature { width: 30%; } .cm-col-desc { width: 25%; } .cm-col-plan { width: 15%; }
  .cm-plan { gap: 10px; }
  .cm-plan-ico { width: 40px; height: 40px; }
}
@media (max-width: 1180px) {
  .cm-mhead { grid-template-columns: auto minmax(0, 1fr); }
  .cm-stats { grid-column: 1 / -1; flex-wrap: wrap; }
}
/* Below ~1000px the description folds under the feature name. */
@media (max-width: 1000px) {
  .cm-col-desc { width: 0; }
  .cm-th-desc, .cm-desc { padding: 0 !important; font-size: 0 !important; border-left: 0; }
  .cm-table thead th.cm-th-feature { border-radius: 14px 14px 0 0; }
  .cm-col-feature { width: 46%; } .cm-col-plan { width: 18%; }
  .cm-fdesc-inline { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--cm-muted); }
  .cm-table tbody th { height: auto; padding-block: 12px; }
  .cm-plan small { display: none; }
}
@media (max-width: 640px) {
  .cm-head { padding-inline: 0; }
  .cm-filter { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cm-filter-label { display: none; }
  .cm-filter button { flex: 1 0 auto; padding: 0 12px; font-size: 13.5px; }
  .cm-mhead { gap: 14px; }
  .cm-stat b { font-size: 13.5px; }
  .cm-col-feature { width: 52%; } .cm-col-plan { width: 16%; }
  .cm-table th, .cm-table td { padding: 0 6px; }
  .cm-table tbody th { padding: 10px 8px 10px 4px; }
  .cm-table .cm-th-plan, .cm-table .cm-cell { border-left-width: 4px; }
  .cm-plan { flex-direction: column; gap: 4px; text-align: center; }
  .cm-plan-ico { width: 30px; height: 30px; border-radius: 9px; }
  .cm-plan-ico svg { width: 17px; height: 17px; }
  .cm-plan b { font-size: 10.5px; letter-spacing: -.01em; }
  .cm-col-feature { width: 49%; } .cm-col-plan { width: 17%; }
  .cm-table thead th { height: 72px; font-size: 13px; }
  .cm-ficon { display: none; }
  .cm-fname { font-size: 13.5px; }
  .cm-mark { width: 26px; height: 26px; }
  .cm-mark svg { width: 14px; height: 14px; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cm-section *, .cm-section *::before, .cm-section *::after { animation: none !important; }
  .js .cm-section:not(.is-in) .cm-a, .js .cm-module:not(.is-in) { opacity: 1; }
  .cm-filter-pill { transition: none; }
  .cm-row:hover .cm-ficon, .cm-row:hover .cm-mark { transform: none; }
}