/* ============================================================================
   QUESTER — Targeted B2C Marketing Lists — section styles
   Aligned to the Global Data "Emerald" system used across ADC, Caspar, IDfex,
   ID Pass, WatchEye and Insiight.
   Canonical page tokens: primary #13ec80 / dark #0eb561 / accessible green #047857
   Quester brand secondary: a restrained BLUE (#2480bd) used sparingly as a
   co-accent (the quester wordmark, portal links), never as the dominant colour.
   Font: Manrope / Icons: Material Symbols Outlined
   Authentic Quester product chrome (white header, blue wordmark, dark-slate nav
   with orange active item, grey job-builder tabs + green "Review & Save Job",
   location statistics + SEIFA decile charts) is preserved ONLY inside the device
   mockups — sampled from the real Quester portal screenshots.
   Scoped under .qst so it can be enqueued alongside the ACF template safely.
   ============================================================================ */

.qst{
  --qs-primary:#13ec80;        /* bright accent — fills, dots, glows, button bg */
  --qs-primary-dark:#0eb561;   /* hover */
  --qs-green:#047857;          /* accessible green text */
  --qs-green-700:#065f46;
  --qs-green-soft:#ecfdf5;     /* emerald-50 tint */
  --qs-green-line:#a7f3d0;     /* emerald-200 */
  --qs-ink:#0f172a;            /* slate-900 headings */
  --qs-body:#475569;           /* slate-600 body */
  --qs-muted:#64748b;          /* slate-500 */
  --qs-faint:#94a3b8;          /* slate-400 */
  --qs-line:#e2e8f0;           /* slate-200 */
  --qs-line-soft:#eef2f7;
  --qs-surface:#ffffff;
  --qs-surface-2:#f8fafc;      /* slate-50 */
  --qs-surface-3:#f1f5f9;      /* slate-100 */
  /* Quester blue secondary */
  --qs-blue:#2480bd;
  --qs-blue-soft:#eaf4fb;
  --qs-blue-line:#c4e0f1;
  /* authentic Quester product chrome (from real portal screenshots) */
  --qs-brand-blue:#2480bd;     /* quester wordmark / portal links */
  --qs-brand-link:#2a7fc1;     /* portal link blue */
  --qs-nav:#41566a;            /* dark-slate top nav bar */
  --qs-nav-active:#e07a2b;     /* orange active nav item */
  --qs-tab-grey:#dadfe4;       /* inactive job-builder tab */
  --qs-tab-green:#7bbf4a;      /* "Review & Save Job" tab + action buttons */
  --qs-tab-green-d:#6aab3c;
  --qs-header-bar:#dfe3e7;     /* grey section header bar inside portal */
  --qs-header-ink:#4a5662;
  --qs-info-blue:#dce9f5;      /* light-blue info banner */
  --qs-info-blue-line:#b8d4ec;
  --qs-info-pink:#fbeceb;      /* pink "all locations included" note */
  --qs-info-pink-line:#f0d4d2;
  /* SEIFA decile chart colours */
  --qs-dec-ier:#6e8095;        /* Income & Economic Resources (slate-blue) */
  --qs-dec-sea:#82a98c;        /* Socio-Economic Advantage (sage) */
  --qs-dec-edu:#ab808a;        /* Education & Occupation (mauve) */
}

/* ---- glass + shadows ---- */
.qst .qs-soft{ box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.qst .qs-glow{ box-shadow:0 0 16px rgba(19,236,128,.35); }
.qst .qs-browser{ box-shadow:0 25px 50px -12px rgba(15,23,42,.18); }
.qst.qs-hero-mesh, .qst .qs-hero-mesh{ background-color:#fff; background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 96% 6%,rgba(36,128,189,.08),transparent 42%); }

/* ---- standardized brand badge / eyebrow ---- */
.qst .qs-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--qs-green-700); background:var(--qs-green-soft);
  padding:7px 14px; border-radius:100px; border:1px solid var(--qs-green-line);
}
.qst .qs-badge .material-symbols-outlined{ font-size:15px; }
.qst .qs-badge .qs-dot{ width:7px; height:7px; border-radius:50%; background:var(--qs-primary); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:qs-pulse 1.8s infinite; }
@keyframes qs-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }

/* ---- buttons (system: bright green bg, dark text) ---- */
.qst .qs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; border:1px solid transparent; border-radius:12px;
  padding:13px 22px; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s; white-space:nowrap; text-decoration:none; }
.qst .qs-btn .material-symbols-outlined{ font-size:18px; }
.qst .qs-btn-primary{ background:var(--qs-primary); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.qst .qs-btn-primary:hover{ background:var(--qs-primary-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.qst .qs-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--qs-line); color:var(--qs-green-700); }
.qst .qs-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.qst .qs-btn-dark{ background:#0b1220; color:#fff; }
.qst .qs-btn-dark:hover{ background:#161f33; transform:translateY(-2px); }
.qst .qs-btn-on-dark{ background:#fff; color:#06281a; }
.qst .qs-btn-on-dark:hover{ background:var(--qs-primary); transform:translateY(-2px); }
.qst .qs-btn-ghost-on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
.qst .qs-btn-ghost-on-dark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

/* ---- generic cards ---- */
.qst .qs-card{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); transition:transform .3s ease, box-shadow .3s ease; }
.qst .qs-card-hover:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -12px rgba(15,23,42,.16); }
.qst .qs-ico{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--qs-green-soft); border:1px solid var(--qs-green-line); color:var(--qs-green); }
.qst .qs-ico .material-symbols-outlined{ font-size:26px; }
.qst .qs-ico-sm{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--qs-green-soft); border:1px solid var(--qs-green-line); color:var(--qs-green); }
.qst .qs-ico-sm .material-symbols-outlined{ font-size:23px; }
/* blue-accent icon tile variant (used sparingly for Quester-secondary moments) */
.qst .qs-ico.is-blue, .qst .qs-ico-sm.is-blue{ background:var(--qs-blue-soft); border-color:var(--qs-blue-line); color:var(--qs-blue); }

/* ---- chips / status ---- */
.qst .qs-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.qst .qs-chip-pass{ background:var(--qs-green-soft); color:var(--qs-green-700); }
.qst .qs-chip-info{ background:rgba(36,128,189,.10); color:var(--qs-brand-link); }
.qst .qs-chip-warn{ background:#fef3c7; color:#b45309; }

/* ============================================================================
   AUTHENTIC QUESTER PRODUCT CHROME — only inside device mockups
   (white header + blue quester wordmark, dark-slate nav with orange active item,
   grey job-builder tabs + green "Review & Save Job", grey section bars,
   location statistics list, SEIFA decile charts, green action buttons)
   ============================================================================ */
.qst .qs-portal{ background:#ffffff; }
.qst .qs-header{ background:#ffffff; border-bottom:1px solid var(--qs-line); }

/* quester wordmark (blue, lowercase) + bubble mark */
.qst .qs-wordmark{ display:inline-flex; align-items:flex-end; gap:1px; font-weight:800; letter-spacing:-.02em; color:var(--qs-brand-blue); line-height:1; }
.qst .qs-bubbles{ display:inline-block; position:relative; width:14px; height:12px; }
.qst .qs-bubbles i{ position:absolute; border-radius:50%; background:var(--qs-brand-blue); }
.qst .qs-bubbles i:nth-child(1){ width:5px; height:5px; left:5px; bottom:0; }
.qst .qs-bubbles i:nth-child(2){ width:4px; height:4px; left:1px; bottom:4px; opacity:.85; }
.qst .qs-bubbles i:nth-child(3){ width:3px; height:3px; left:7px; bottom:7px; opacity:.7; }

/* dark-slate top nav with orange active item */
.qst .qs-qnav{ background:var(--qs-nav); display:flex; align-items:center; gap:2px; padding:0 6px; }
.qst .qs-qnav .qs-navitem{ font-size:10px; font-weight:700; color:#dbe3ea; padding:7px 9px; white-space:nowrap; border-radius:0; }
.qst .qs-qnav .qs-navitem.is-active{ background:var(--qs-nav-active); color:#fff; }

/* job-builder tabs (Job Name / Location / … / Review & Save Job) */
.qst .qs-jtabs{ display:flex; align-items:flex-end; gap:3px; }
.qst .qs-jtab{ font-size:9.5px; font-weight:700; color:var(--qs-header-ink); background:var(--qs-tab-grey); padding:6px 9px; border-radius:5px 5px 0 0; white-space:nowrap; border:1px solid transparent; border-bottom:none; }
.qst .qs-jtab.is-active{ background:#fff; color:var(--qs-ink); border-color:var(--qs-line); position:relative; top:1px; }
.qst .qs-jtab.is-save{ background:var(--qs-tab-green); color:#fff; }

/* grey section header bar inside the portal ("Job Type", "Add a Location", …) */
.qst .qs-secbar{ background:var(--qs-header-bar); color:var(--qs-header-ink); font-size:10px; font-weight:800; padding:6px 10px; border-radius:4px; }

/* "Add a Location" pill buttons */
.qst .qs-locpill{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; color:var(--qs-header-ink); background:#fff; border:1px solid var(--qs-line); border-radius:6px; padding:5px 9px; }
.qst .qs-locpill .material-symbols-outlined{ font-size:12px; color:var(--qs-brand-link); }
.qst .qs-locpill.is-ex .material-symbols-outlined{ color:#b9636b; }

/* location-statistics list */
.qst .qs-stat{ font-size:10px; line-height:1.6; }
.qst .qs-stat .qs-stat-h{ font-size:11px; font-weight:800; color:var(--qs-ink); margin-bottom:3px; }
.qst .qs-stat .qs-stat-row{ display:flex; justify-content:space-between; gap:10px; }
.qst .qs-stat .qs-stat-k{ color:var(--qs-muted); }
.qst .qs-stat .qs-stat-v{ font-weight:700; color:var(--qs-ink); font-variant-numeric:tabular-nums; }

/* SEIFA decile mini bar charts */
.qst .qs-decile{ display:flex; align-items:flex-end; gap:2px; height:30px; }
.qst .qs-decile .qs-dbar{ flex:1; border-radius:1px 1px 0 0; opacity:.9; }
.qst .qs-decile.ier .qs-dbar{ background:var(--qs-dec-ier); }
.qst .qs-decile.sea .qs-dbar{ background:var(--qs-dec-sea); }
.qst .qs-decile.edu .qs-dbar{ background:var(--qs-dec-edu); }
.qst .qs-decile-label{ font-size:7.5px; font-style:italic; color:var(--qs-faint); letter-spacing:.02em; }

/* light-blue / pink portal notes */
.qst .qs-note-blue{ background:var(--qs-info-blue); border:1px solid var(--qs-info-blue-line); color:#2c4a63; }
.qst .qs-note-pink{ background:var(--qs-info-pink); border:1px solid var(--qs-info-pink-line); color:#8a4f54; }

/* portal action button (green "Save Job and Process Count") */
.qst .qs-portal-btn{ background:var(--qs-tab-green); color:#fff; border:none; }
.qst .qs-portal-btn:hover{ background:var(--qs-tab-green-d); }

/* portal table heads + summary rows */
.qst .qs-th{ background:#e9edf1; color:#4a5662; font-size:9px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
.qst .qs-sumrow{ background:#dbeafc; }     /* highlighted "Job Name" summary rows (blue tint) */
.qst .qs-sumrow-alt{ background:#eef2f6; } /* grey summary rows */

/* ---- targeting option pill (ticks on during the hero loop) ---- */
.qst .qs-opt{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; border:1px solid var(--qs-line); background:#fff; transition:all .3s ease; }
.qst .qs-opt .qs-opt-box{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--qs-line); display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s ease; flex:none; }
.qst .qs-opt .qs-opt-box .material-symbols-outlined{ font-size:12px; opacity:0; transform:scale(.4); transition:all .25s ease; font-variation-settings:'wght' 700; }
.qst .qs-opt .qs-opt-ico{ font-size:15px; color:var(--qs-muted); transition:color .25s ease; }
.qst .qs-opt .qs-opt-name{ font-size:10.5px; font-weight:600; color:var(--qs-muted); transition:color .25s ease; }
.qst .qs-opt.is-on{ border-color:var(--qs-green-line); background:var(--qs-green-soft); }
.qst .qs-opt.is-on .qs-opt-box{ background:var(--qs-primary); border-color:var(--qs-primary); }
.qst .qs-opt.is-on .qs-opt-box .material-symbols-outlined{ opacity:1; transform:scale(1); }
.qst .qs-opt.is-on .qs-opt-ico{ color:var(--qs-green); }
.qst .qs-opt.is-on .qs-opt-name{ color:var(--qs-green-700); }

/* ---- bar / progress ---- */
.qst .qs-bar-track{ background:rgba(19,236,128,.18); border-radius:3px; overflow:hidden; }
.qst .qs-bar-fill{ height:100%; background:var(--qs-primary); transition:width .5s cubic-bezier(.2,.8,.2,1); }
/* authentic blocky "Count (Busy)" progress (square segments) */
.qst .qs-count-prog{ display:inline-flex; gap:2px; }
.qst .qs-count-prog i{ width:7px; height:13px; background:#cbd5e1; border-radius:1px; transition:background .3s ease; }
.qst .qs-count-prog i.on{ background:var(--qs-brand-blue); }

/* ---- how-it-works scrollytelling screens ---- */
.qst .qs-screen{ opacity:0; transform:translateY(15px); transition:all .6s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.qst .qs-screen.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.qst .qs-step{ transition:opacity .5s ease, transform .5s ease; }
.qst .qs-tl-icon{ transition:all .4s ease; }

/* ---- count-up stat ---- */
.qst .qs-stat-num{ font-weight:800; letter-spacing:-.025em; color:var(--qs-primary); line-height:.92; }

/* ---- target / data-point grid card ---- */
.qst .qs-data-card{ display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--qs-line); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.qst .qs-data-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(15,23,42,.18); border-color:var(--qs-green-line); }
.qst .qs-data-card .qs-data-ico{ width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--qs-green-soft); border:1px solid var(--qs-green-line); color:var(--qs-green); }
.qst .qs-data-card .qs-data-ico .material-symbols-outlined{ font-size:21px; }

.qst .qs-ico-sm {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qs-green-soft);
    border: 1px solid var(--qs-green-line);
    color: var(--qs-green);
}



/* ---- reveal on scroll ---- */
.qst .qs-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.qs-anim .qst .qs-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.qst .qs-reveal.in{ opacity:1; transform:none; }
.qst .qs-reveal.d1{ transition-delay:.08s } .qst .qs-reveal.d2{ transition-delay:.16s } .qst .qs-reveal.d3{ transition-delay:.24s }

/* ---- faq ---- */
.qst .qs-faq{ background:rgba(255,255,255,.8); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.qst .qs-faq summary::-webkit-details-marker{ display:none; }
.qst .qs-faq summary{ list-style:none; }
.qst .qs-faq[open] .qs-faq-plus{ transform:rotate(45deg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .qst .qs-reveal{ opacity:1!important; transform:none!important; }
  .qst .qs-badge .qs-dot{ animation:none!important; }
}

/* ============================================================================
   MOBILE — keep device-mockup chrome inside its frame at phone width.
   ============================================================================ */
@media (max-width:1023px){
  .qst .qs-jtabs{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .qst .qs-jtabs::-webkit-scrollbar{ display:none; }
  .qst .qs-jtab{ flex:0 0 auto; }
  .qst .qs-qnav{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .qst .qs-qnav::-webkit-scrollbar{ display:none; }
  .qst .qs-qnav .qs-navitem{ flex:0 0 auto; }
}
@media (max-width:639px){
  .qst .qs-opt{ min-width:0; }
  .qst .qs-opt .qs-opt-ico{ flex:none; }
  .qst .qs-opt .qs-opt-name{ min-width:0; line-height:1.2; overflow-wrap:anywhere; }
  .qst .qs-portal table{ font-size:9px; }
  .qst .qs-portal thead th, .qst .qs-portal tbody td{ padding:5px 4px; }
  .qst .qs-portal td.truncate{ max-width:70px; }
}