/* Page styles: /genesys-voc-comparison/ */
:root{
  --ink:#0B2846;--ink-mid:#44565F;--ink-soft:#7A8B95;
  --green:#0E9C74;--mint:#34D399;--pink:#FF0081;--yellow:#FFC93C;
  --panel:#F1F5F7;--line:#E1E9ED;--rule:6px;--max:1280px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* header, identical to the homepage */
.btn{font-family:"Futura PT","Futura Std","Futura","Jost",Arial,sans-serif;display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;padding:14px 24px;border:3px solid var(--ink);background:var(--ink);color:#fff}
.btn:hover{background:var(--green);border-color:var(--green)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.sm{padding:10px 18px;font-size:.92rem;border-width:2px}

/* the one loud moment on the page */
.band{height:14px;background:var(--pink)}

/* page head */
.lede-sec{padding:64px 0 46px}
.crumb{font-size:.86rem;color:var(--ink-soft);margin:0 0 22px}
.crumb a{text-decoration:none;border-bottom:2px solid var(--pink);color:var(--ink);font-weight:600;padding-bottom:1px}
h1{font-size:clamp(2.1rem,4.3vw,3.5rem);max-width:19ch}
.lede{font-size:1.1rem;margin:22px 0 0;max-width:62ch}
.caveat{font-size:.95rem;margin:16px 0 0;max-width:62ch;color:var(--ink-soft)}

/* the scorecard, carried over from the homepage */
.score{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink);margin:44px 0 0}
.score div{background:var(--panel);padding:24px 22px}
.score b{display:block;font-family:"Futura PT","Futura Std","Futura","Jost",Arial,sans-serif;font-size:2.7rem;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
.score .hi b{color:var(--green)}
.score span{display:block;font-size:.84rem;line-height:1.4;margin-top:10px;color:var(--ink-mid)}

/* filters */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.chip{font-family:"Futura PT","Futura Std","Futura","Jost",Arial,sans-serif;font-size:.92rem;font-weight:500;padding:10px 16px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chip .sq{display:inline-block;width:9px;height:9px;margin-right:8px;vertical-align:baseline}
.sq.c1{background:var(--yellow)}.sq.c2{background:var(--mint)}.sq.c3{background:var(--pink)}
.find{margin-left:auto;display:flex;align-items:center;gap:10px}
.find input{font-family:inherit;font-size:.95rem;padding:11px 14px;border:2px solid var(--ink);background:#fff;color:var(--ink);min-width:230px}
.find input::placeholder{color:var(--ink-soft)}

/* matrix */
.matrix-sec{padding:20px 0 70px}
table{width:100%;border-collapse:collapse;border:var(--rule) solid var(--ink)}
thead th{
  font-family:"Futura PT","Futura Std","Futura","Jost",Arial,sans-serif;
  background:var(--ink);color:#fff;text-align:left;font-weight:500;font-size:.88rem;
  padding:15px 18px;white-space:nowrap;
}
tbody td{padding:15px 18px;border-top:2px solid var(--line);font-size:.95rem;vertical-align:top}
tbody tr:first-child td{border-top:0}
.cat-row td{background:var(--panel);padding:13px 18px;border-top:var(--rule) solid var(--ink)}
.cat-row span{font-family:"Futura PT","Futura Std","Futura","Jost",Arial,sans-serif;font-weight:600;color:var(--ink);font-size:.95rem}
.cat-row i{display:inline-block;width:11px;height:11px;margin-right:10px}
td.req{font-weight:600;color:var(--ink);width:30%}
td.adds{color:var(--ink-mid);width:30%}
.tag{display:inline-block;font-size:.76rem;font-weight:700;padding:5px 10px;white-space:nowrap;font-family:"Futura PT","Futura Std","Futura","Jost",Arial,sans-serif}
.t-yes{background:#E4F4EE;color:#0B6B4F;border:1px solid #C6E7DB}
.t-part{background:#F8F1E8;color:#8A6636;border:1px solid #EFE2D2}
.t-no{background:var(--panel);color:#5A6B75;border:1px solid var(--line)}
.t-cx{background:var(--green);color:#fff;border:1px solid var(--green)}
.empty{padding:40px 18px;text-align:center;color:var(--ink-soft)}
.count{font-size:.85rem;color:var(--ink-soft);margin:14px 0 0}

/* scope note */
.scope{background:var(--panel);border-top:var(--rule) solid var(--ink);padding:60px 0}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.scope h2{font-size:1.5rem;margin-bottom:16px}
.scope h3{font-size:1.05rem;margin:0 0 8px}
.scope p{margin:0 0 20px;font-size:.95rem;max-width:56ch}
.refs{display:flex;flex-wrap:wrap;gap:10px}
.refs a{font-size:.85rem;text-decoration:none;color:var(--ink);background:#fff;border:2px solid var(--line);padding:8px 12px}
.refs a:hover{border-color:var(--green)}

/* close */
.close{padding:70px 0;border-top:var(--rule) solid var(--ink)}
.close-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.close h2{font-size:clamp(1.8rem,3vw,2.4rem);max-width:19ch}
.close p{margin-top:16px;font-size:1.05rem;max-width:48ch}
.acts{display:flex;gap:12px;flex-wrap:wrap}


@media (max-width:900px){
  .scope-grid,.close-in{grid-template-columns:1fr;gap:30px}
  .find{margin-left:0;width:100%}
  .find input{width:100%;min-width:0}
}
@media (max-width:760px){
  :root{--rule:4px}
  .nav a:not(.btn){display:none}
  .score{grid-template-columns:1fr}
  .lede-sec{padding:42px 0 32px}
  /* the matrix becomes stacked records rather than a squeezed table */
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{border-top:var(--rule) solid var(--ink);padding:6px 0}
  tbody tr:first-child{border-top:0}
  tbody td{border-top:0;padding:6px 16px}
  td.req{font-size:1.05rem;padding-top:16px;width:auto}
  td.adds{width:auto;padding-bottom:16px}
  td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;color:var(--ink-soft);margin-bottom:5px;font-weight:600}
  .cat-row td{padding:13px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}