/* 2026-09-23 legal audit: the brand green was used as TEXT (and as a fill under white
   text) below WCAG AA. --green-aa (#15803D) and --green-aa-deep (#11692F) exist for
   exactly this and are used here; the green FILLS that carry no text are untouched. */
/* ===========================================================
   TaskLogix360 — tier-compare section
   Redesigned 2026-07-15: compact tier cards + category panels
   (replaces the earlier single comparison table). Static, no JS.
   Transparent section bg — inherits the page bg behind it.
   · --border / --border-soft redefined locally (embed used darker
     values than shared tokens.css); kept for continuity.
   · .tlx-tier-compare is the @container "tlxprice" — all responsive
     rules size off the section's real width, not the viewport.
   · ALL selectors scoped under .tlx-tier-compare so the generic
     class names (.tier, .cta, .panel …) never collide with other
     embeds on the same page.
   · Mobile (<768px container): the pill selector drives :has() to
     filter cards + panel value-columns to one tier at a time, with
     a no-:has() fallback that shows all columns (scrollable).
   =========================================================== */

/* ========== Section root ========== */
.tlx-tier-compare{
  position:relative;background:transparent;
  container-type:inline-size;container-name:tlxprice;
  color:#111827;
  overflow-x:hidden; /* panels scroll internally in fallback, never the page */
  --border:#D1D5DB;
  --border-soft:#E5E7EB;
}
.tlx-tier-compare :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}

/* ========== Wrapper ========== */
.tlx-tier-compare .wrap{position:relative;max-width:1180px;margin:0 auto;padding:24px 20px}
@container tlxprice (min-width:640px){.tlx-tier-compare .wrap{padding:28px 28px}}
@container tlxprice (min-width:1024px){.tlx-tier-compare .wrap{padding:32px 32px}}

/* ========== Mobile tier-pill selector (segmented control) ========== */
.tlx-tier-compare .tier-pills{display:none;margin:0 0 16px}
.tlx-tier-compare .t-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tlx-tier-compare .t-pill{
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px 12px;border-radius:8px;
  font-size:13.5px;font-weight:700;color:var(--slate);background:transparent;
  letter-spacing:.04em;
  transition:background 200ms ease,color 200ms ease,box-shadow 200ms ease;
}
.tlx-tier-compare .t-pill:hover{color:var(--navy);background:#fff}
.tlx-tier-compare .t-pill.is-popular::before{
  content:"\2605";color:var(--green);margin-right:4px;font-size:13.5px;
  display:inline-block;transform:translateY(-.5px);
}
.tlx-tier-compare .t-radio:checked+.t-pill{
  background:var(--navy);color:#fff;
  box-shadow:0 4px 12px -4px rgba(8,54,93,.3);
}
.tlx-tier-compare .t-radio:checked+.t-pill.is-popular::before{color:#9CCFA6}
.tlx-tier-compare .t-radio:focus-visible+.t-pill{outline:2px solid var(--navy);outline-offset:2px}

/* ========== Tier cards ========== */
.tlx-tier-compare .tiers{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:40px}
@container tlxprice (min-width:768px){.tlx-tier-compare .tiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
@container tlxprice (min-width:1024px){.tlx-tier-compare .tiers{gap:20px;margin-bottom:44px}}

.tlx-tier-compare .tier{
  position:relative;display:flex;flex-direction:column;gap:20px;
  padding:24px;border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--navy-100),0 6px 18px -10px rgba(8,54,93,.14);
  transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease;
}
@container tlxprice (min-width:1024px){.tlx-tier-compare .tier{padding:24px}}
.tlx-tier-compare .tier:not(.popular):hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--navy),0 18px 36px -16px rgba(8,54,93,.28)}
.tlx-tier-compare .tier.popular{
  background:linear-gradient(160deg,#0B4678,#08365D);color:#fff;
  box-shadow:0 20px 46px -20px rgba(8,54,93,.5);
}
.tlx-tier-compare .tier.popular:hover{transform:translateY(-4px)}

.tlx-tier-compare .popular-banner{
  position:absolute;top:-12px;right:24px;
  padding:4px 12px;border-radius:999px;background:var(--green-aa);color:#fff;
  font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  box-shadow:0 6px 16px -4px rgba(30,154,68,.45);white-space:nowrap;
}

.tlx-tier-compare .tier-top{display:flex;align-items:center;gap:16px}
.tlx-tier-compare .tier-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:16px;background:var(--navy-50);color:var(--navy)}
.tlx-tier-compare .tier-ico svg{width:32px;height:32px}
.tlx-tier-compare .tier.popular .tier-ico{background:var(--green);color:#fff;box-shadow:0 10px 22px -8px rgba(30,154,68,.55)}
.tlx-tier-compare .tier-head{flex:1;min-width:0;display:flex;flex-direction:column}
.tlx-tier-compare .tier-name{font-size:25px;font-weight:800;letter-spacing:-.015em;line-height:1.05;color:var(--navy-deep)}
.tlx-tier-compare .tier.popular .tier-name{color:#fff}
.tlx-tier-compare .tier-desc{margin-top:4px;font-size:13.5px;font-weight:500;color:var(--slate)}
.tlx-tier-compare .tier.popular .tier-desc{color:rgba(255,255,255,.75)}

.tlx-tier-compare .cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:12px;border-radius:10px;background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:700;text-decoration:none;
  transition:background-color 200ms ease,color 200ms ease;
}
.tlx-tier-compare .cta:hover{background:var(--navy-deep)}
.tlx-tier-compare .tier.popular .cta{background:#fff;color:var(--navy)}
.tlx-tier-compare .tier.popular .cta:hover{background:var(--green);color:#fff}
.tlx-tier-compare .cta-arrow{display:inline-block;transition:transform 200ms ease;font-weight:700}
.tlx-tier-compare .cta:hover .cta-arrow{transform:translateX(3px)}

/* ========== Category comparison panels ========== */
.tlx-tier-compare .panels{display:flex;flex-direction:column;gap:24px}
.tlx-tier-compare .panel{border:1px solid var(--border);border-radius:16px;background:#fff;
  box-shadow:0 18px 40px -28px rgba(8,54,93,.3);overflow:hidden}

/* header row: section title + tier labels share one row */
.tlx-tier-compare .panel-h{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;align-items:center;
  background:linear-gradient(90deg,#ECF2F8,#F6FAFD);border-bottom:2px solid var(--navy-100)}
.tlx-tier-compare .ph-title{display:flex;align-items:center;gap:12px;padding:16px 20px}
.tlx-tier-compare .pn-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff}
.tlx-tier-compare .pn-ico svg{width:20px;height:20px}
.tlx-tier-compare .ph-name{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--navy-deep)}
.tlx-tier-compare .ph-lab{text-align:center;font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--slate)}
.tlx-tier-compare .ph-lab.pc{display:flex;justify-content:center}
.tlx-tier-compare .ph-lab.pc span{padding:4px 16px;border-radius:999px;background:var(--navy);color:#fff;
  font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;box-shadow:0 6px 14px -6px rgba(8,54,93,.5)}

/* body rows: zebra striping, no dividers */
.tlx-tier-compare .ptable{padding:0}
/* stretch cells to full row height so the Premium band stays a
   continuous column even where a feature name / value wraps to two
   lines; content stays vertically centered via flex. */
.tlx-tier-compare .prow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;align-items:stretch}
.tlx-tier-compare .prow .pf{display:flex;align-items:center;padding:16px 20px;font-size:13.5px;font-weight:600;color:var(--navy)}
.tlx-tier-compare .prow .pv{display:flex;align-items:center;justify-content:center;padding:16px 8px;text-align:center;font-size:13.5px;font-weight:500;color:var(--navy-deep)}
.tlx-tier-compare .prow:nth-child(even){background:#F1F6FB}

/* Premium value column — straight-edged subtle outline band */
.tlx-tier-compare .prow .pv.pc{background:#E3EEFA;border-left:1px solid var(--navy-100);border-right:1px solid var(--navy-100)}
.tlx-tier-compare .prow:first-child .pv.pc{border-top:1px solid var(--navy-100)}
.tlx-tier-compare .panel .prow:last-child .pv.pc{border-bottom:1px solid var(--navy-100)}

/* ========== Cell components (shared) ========== */
.tlx-tier-compare .check{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--green-50);color:var(--green-aa);
  vertical-align:middle}
.tlx-tier-compare .check svg{width:12px;height:12px}
.tlx-tier-compare .cell-pair{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.tlx-tier-compare .cell-text{color:var(--navy-deep);font-weight:600}
.tlx-tier-compare .cell-text.dim{color:#5C6472;font-weight:500}
.tlx-tier-compare .dash{display:inline-block;color:var(--slate-dim);font-weight:400;font-size:16px}

/* ========== Mobile (<768px container): pills filter to one tier ==========
   @container (not @media) fires off the section's true width. :has()
   (Baseline 2023) lets the checked radio drive both the hero card and the
   panel value-column visibility from a single source of truth. */
@container tlxprice (max-width: 767px){
  /* Show pills (segmented control) */
  .tlx-tier-compare .tier-pills{
    display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
    padding:4px;background:var(--surface);
    border-radius:11px;box-shadow:inset 0 0 0 1px var(--border);
    margin-bottom:28px; /* clearance for popular-banner above hero card */
  }

  /* Hero cards: hide all, show only the one matching the checked radio */
  .tlx-tier-compare .tier{display:none}
  .tlx-tier-compare .wrap:has(#tlx-t-basic:checked)      .tier[data-tier="basic"],
  .tlx-tier-compare .wrap:has(#tlx-t-premium:checked)    .tier[data-tier="premium"],
  .tlx-tier-compare .wrap:has(#tlx-t-enterprise:checked) .tier[data-tier="enterprise"]{
    display:flex;
  }
  .tlx-tier-compare .tiers{gap:0;margin-bottom:32px}

  /* Panels: collapse to feature + one value column.
     Hide scoped under .panel-h so it out-specifies the base
     .ph-lab.pc{display:flex} rule and the Premium pill hides too. */
  .tlx-tier-compare .panel-h{grid-template-columns:1fr auto}
  .tlx-tier-compare .prow{grid-template-columns:1fr auto}
  .tlx-tier-compare .panel-h .ph-lab,
  .tlx-tier-compare .prow .pv{display:none}
  .tlx-tier-compare .panel-h .ph-lab{padding-right:20px}
  .tlx-tier-compare .prow .pv{padding-right:20px}
  /* single-column view: drop the Premium band framing */
  .tlx-tier-compare .prow .pv.pc{background:transparent;border:0}

  .tlx-tier-compare .wrap:has(#tlx-t-basic:checked)      .panel-h .ph-lab:nth-child(2){display:block}
  .tlx-tier-compare .wrap:has(#tlx-t-basic:checked)      .prow .pv:nth-child(2){display:block}
  .tlx-tier-compare .wrap:has(#tlx-t-premium:checked)    .panel-h .ph-lab:nth-child(3){display:flex}
  .tlx-tier-compare .wrap:has(#tlx-t-premium:checked)    .prow .pv:nth-child(3){display:block}
  .tlx-tier-compare .wrap:has(#tlx-t-enterprise:checked) .panel-h .ph-lab:nth-child(4){display:block}
  .tlx-tier-compare .wrap:has(#tlx-t-enterprise:checked) .prow .pv:nth-child(4){display:block}
}

/* :has() fallback — browsers with @container but no :has() (Firefox 110–120,
   ESR 115) would hide every card + column with no way to reveal them. Show
   them all; panels scroll horizontally so mobile pricing still works. */
@container tlxprice (max-width: 767px){
  @supports not (selector(:has(*))){
    .tlx-tier-compare .tier-pills{display:none}
    .tlx-tier-compare .tier{display:flex}
    .tlx-tier-compare .panel-h{grid-template-columns:2fr 1fr 1fr 1fr}
    .tlx-tier-compare .prow{grid-template-columns:2fr 1fr 1fr 1fr}
    .tlx-tier-compare .ph-lab{display:block}
    .tlx-tier-compare .ph-lab.pc{display:flex}
    .tlx-tier-compare .prow .pv{display:block;padding:16px 8px}
    .tlx-tier-compare .prow .pv.pc{background:#E3EEFA;border-left:1px solid var(--navy-100);border-right:1px solid var(--navy-100)}
    .tlx-tier-compare .prow:first-child .pv.pc{border-top:1px solid var(--navy-100)}
    .tlx-tier-compare .panels{overflow-x:auto}
    .tlx-tier-compare .panel{min-width:560px}
  }
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce){
  .tlx-tier-compare .tier,.tlx-tier-compare .cta,.tlx-tier-compare .cta-arrow{transition:none}
  .tlx-tier-compare .tier:hover{transform:none}
}

/* ============================================================
   2026-08-05 (revision round 3) — tier merge.
   John asked for the tiers to sit behind one "compare all features"
   disclosure. The cards now carry the feature story (copy lifted from
   the home page's approved cards) and the six comparison panels are
   collapsed underneath, so the page shows ONE three-tier block.
   ============================================================ */
.tlx-tier-compare .tier-feats{
  list-style:none;margin:0;padding:16px 0 0;flex:1;
  border-top:1px solid var(--navy-100);
  display:flex;flex-direction:column;gap:12px;
}
.tlx-tier-compare .tier.popular .tier-feats{border-top-color:rgba(255,255,255,.20)}
.tlx-tier-compare .tier-feats li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;line-height:1.45;font-weight:500;color:var(--slate);
}
.tlx-tier-compare .tier.popular .tier-feats li{color:rgba(255,255,255,.88)}
.tlx-tier-compare .tf-ic{flex-shrink:0;display:inline-flex;margin-top:4px;color:var(--green)}
.tlx-tier-compare .tf-ic svg{width:12px;height:12px}
.tlx-tier-compare .tier.popular .tf-ic{color:#4FD97E}

/* --- "Compare all features" disclosure --- */
.tlx-tier-compare .tier-disclosure{border-top:1px solid var(--border-soft);padding-top:28px}
.tlx-tier-compare .tier-disclosure>summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 24px;border-radius:999px;
  background:var(--navy-50);color:var(--navy);
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  transition:background 180ms ease,color 180ms ease;
}
.tlx-tier-compare .tier-disclosure>summary::-webkit-details-marker{display:none}
.tlx-tier-compare .tier-disclosure>summary::marker{content:""}
.tlx-tier-compare .tier-disclosure>summary:hover{background:var(--navy);color:#fff}
.tlx-tier-compare .tier-disclosure>summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.tlx-tier-compare .tier-disclosure .chev{width:12px;height:12px;transition:transform 200ms ease}
.tlx-tier-compare .tier-disclosure[open]>summary .chev{transform:rotate(180deg)}
.tlx-tier-compare .tier-disclosure .panels{margin-top:28px}
@media (prefers-reduced-motion:reduce){
  .tlx-tier-compare .tier-disclosure .chev{transition:none}
}