/* TTEC Licensed Agent Hub.
 *
 * Lifted from Jessie's ttec-landing-page.html prototype and extended for a
 * multi-page app. Her layout was already sound: numbered step cards that
 * visibly lock and unlock, <details> accordions for the FAQ, a facts table.
 *
 * Her notes flag the palette as "a neutral professional set, not Paramount's
 * actual brand", and invite re-skinning. Contrast was AA throughout in the
 * original, so re-check it after any palette change.
 */
:root{
  --ink:#101720; --ink-2:#3d4a58; --ink-3:#6b7887;
  --line:#e2e7ec; --bg:#f6f8fa; --card:#ffffff;
  --brand:#12395c; --brand-2:#1f6f8b; --accent:#c8952f;
  --ok:#1f7a52; --ok-bg:#e8f5ee; --warn:#8a5a00; --warn-bg:#fdf3e0;
  --stop:#8c2f2f; --stop-bg:#fbecec;
  --r:14px; --sh:0 1px 2px rgba(16,23,32,.06), 0 8px 24px rgba(16,23,32,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:840px;margin:0 auto;padding:0 20px}
a{color:var(--brand-2)}

header{background:var(--brand);color:#fff;padding:14px 0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:30px;width:auto;display:block}
.brand .name{font-weight:700;letter-spacing:.14em;font-size:14px;text-transform:uppercase}
.hdr-note{font-size:13px;opacity:.72}
.hdr-note a{color:#cfe1ee}

.hero{background:linear-gradient(168deg,var(--brand) 0%,#0b2942 100%);color:#fff;padding:38px 0 44px}
.hero h1{margin:0 0 10px;font-size:32px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.hero p.lede{margin:0 0 22px;font-size:17px;color:#c3d4e2;max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:7px 14px;font-size:13.5px;color:#e8f0f6}
.chip b{color:#fff}

main{padding:30px 0 60px}

/* progress rail */
.rail{display:flex;gap:6px;margin:0 0 24px;flex-wrap:wrap}
.rail div{flex:1;min-width:70px;height:5px;border-radius:3px;background:#dbe2e8}
.rail div.done{background:var(--ok)}
.rail div.now{background:var(--brand-2)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);margin-bottom:18px;padding:24px 22px}
.card h2{margin:0 0 4px;font-size:21px;letter-spacing:-.01em}
.card p.sub{margin:0 0 18px;font-size:14.5px;color:var(--ink-3)}

/* video */
.video{position:relative;width:100%;aspect-ratio:16/9;background:#0b1a26;border-radius:10px;
  overflow:hidden;display:grid;place-items:center;border:1px solid var(--line)}
.video video{width:100%;height:100%;display:block;background:#000}
.vbar{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.vprog{flex:1;min-width:180px;height:8px;border-radius:4px;background:#dbe2e8;overflow:hidden}
.vprog i{display:block;height:100%;width:0;background:var(--brand-2);transition:width .4s linear}
.vnote{font-size:13px;color:var(--ink-3)}

label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 5px}
.field{margin-bottom:14px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #cfd8e0;border-radius:9px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2);outline-offset:1px;border-color:var(--brand-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 14px}
.check input{width:auto;margin-top:4px;flex:0 0 auto}
.check label{font-weight:400;font-size:14px;color:var(--ink-2);margin:0}

.btn{background:var(--brand);color:#fff;border:0;border-radius:9px;padding:12px 22px;
  font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#0e2e4b}
.btn:disabled{background:#c3ccd5;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid #cfd8e0}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.note{border-radius:10px;padding:14px 16px;font-size:14.5px;margin:14px 0;line-height:1.55}
.note.ok{background:var(--ok-bg);color:#155e3f;border:1px solid #bfe3d1}
.note.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #f0dcb4}
.note.stop{background:var(--stop-bg);color:var(--stop);border:1px solid #edc9c9}
.note strong{display:block;margin-bottom:3px}

/* tasks */
.task{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:11px;background:#fff}
.task.is-locked{background:#fafbfc;border-style:dashed;color:var(--ink-3)}
.task.is-done{background:var(--ok-bg);border-color:#bfe3d1}
.task .tick{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid #cfd8e0;display:grid;
  place-items:center;font-size:12px;color:#fff;font-weight:700}
.task.is-done .tick{background:var(--ok);border-color:var(--ok)}
.task .tx{flex:1;min-width:0}
.task .tx b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.task.is-locked .tx b{color:var(--ink-3)}
.task .tx span{font-size:13.5px;color:var(--ink-3)}
.task .go{white-space:nowrap;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.task a.linkbtn{display:inline-block;background:var(--brand-2);color:#fff;text-decoration:none;
  padding:8px 15px;border-radius:8px;font-size:14px;font-weight:600}
.task a.linkbtn:hover{background:#185b73}
.task button.mark{background:none;border:0;color:var(--brand-2);font:inherit;font-size:13.5px;
  cursor:pointer;text-decoration:underline;padding:4px 0}
@media(max-width:560px){.task{flex-wrap:wrap}.task .go{width:100%;justify-content:flex-start}}

/* faq */
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:13px 26px 13px 0;font-weight:600;font-size:15px;
  list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:4px;top:11px;font-size:19px;color:var(--ink-3);font-weight:400}
details[open] summary:after{content:"–"}
details p{margin:0 0 14px;color:var(--ink-2);font-size:15px;padding-right:20px}
.faq-group{margin-top:22px}
.faq-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--brand-2);
  margin:0 0 8px;font-weight:700}

/* tables (staff views) */
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th,table.data td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.data th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
table.data tr:hover td{background:#f9fbfc}
.scroll{overflow-x:auto}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600}
.pill.ok{background:var(--ok-bg);color:#155e3f}
.pill.no{background:#eef1f4;color:var(--ink-3)}
.pill.rev{background:var(--warn-bg);color:var(--warn)}
.pill.weak{background:#eef4f8;color:var(--brand-2)}

footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--ink-3);font-size:13px}
footer b{color:var(--ink-2)}
.small{font-size:12.5px;line-height:1.5}