/* Globby Wizard — app styles. Builds on tokens.css (Globby DS). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--gb-violet-50) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--gb-ink-50) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--fg-2);
}
button { font-family: inherit; }
.gic { display: block; flex: none; }

/* ============ APP SHELL ============ */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 5vw, 48px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid var(--gb-border);
  backdrop-filter: saturate(140%) blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; display: block; }
.brand .brand-sub {
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--gb-violet-700);
  background: var(--gb-violet-50); border: 1px solid var(--gb-violet-100);
  padding: 3px 9px; border-radius: var(--r-pill); letter-spacing: .01em;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }

.langtoggle { display: inline-flex; background: var(--gb-ink-100); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.langtoggle button {
  border: none; background: transparent; cursor: pointer; padding: 6px 12px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: var(--fw-semibold); color: var(--gb-ink-500);
  transition: all var(--dur-base) var(--ease-standard);
}
.langtoggle button.on { background: #fff; color: var(--gb-violet-700); box-shadow: var(--shadow-xs); }

.exit-btn {
  border: 1px solid var(--gb-border); background: #fff; color: var(--gb-ink-600);
  border-radius: var(--r-md); padding: 8px 14px; font-size: 13px; font-weight: var(--fw-semibold);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--dur-base) var(--ease-standard);
}
.exit-btn:hover { background: var(--gb-ink-50); }

/* ============ PROGRESS RAIL ============ */
.progress { padding: 18px clamp(16px, 5vw, 48px) 0; max-width: 1180px; width: 100%; margin: 0 auto; }
.phaserow { display: flex; align-items: center; gap: 8px; }
.phase { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.phase-label {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--gb-ink-400); white-space: nowrap;
}
.phase.active .phase-label { color: var(--gb-violet-700); }
.phase.done .phase-label { color: var(--gb-emerald-600); }
.segs { display: flex; gap: 4px; flex: 1; }
.seg { height: 5px; border-radius: var(--r-pill); background: var(--gb-ink-200); flex: 1; overflow: hidden; position: relative; }
.seg .fill { position: absolute; inset: 0; background: var(--gb-violet); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-standard); }
.seg.done .fill { transform: scaleX(1); background: var(--gb-emerald-500); }
.seg.cur .fill { transform: scaleX(1); }

/* friendly overall step counter — identical UX on desktop & mobile */
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.step-counter {
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--gb-violet-50, #f3f0ff); color: var(--gb-violet-700);
  font-weight: var(--fw-bold); font-size: 13px; line-height: 1; white-space: nowrap;
}
.step-counter-word { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: 11px; }
.step-counter-num { font-size: 16px; font-weight: 800; }
.step-counter-sep, .step-counter-tot { color: var(--gb-violet); opacity: .75; }
.step-phase {
  font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--gb-ink-400); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* ============ STAGE / CARD ============ */
.stage { flex: 1; display: flex; justify-content: center; padding: clamp(20px, 4vw, 44px) clamp(16px, 5vw, 48px) 120px; }
.card-wrap { width: 100%; max-width: 880px; }
.card-wrap.wide { max-width: 1180px; }

.stepcard {
  background: #fff; border: 1px solid var(--gb-border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 44px);
  animation: stepIn var(--dur-slow) var(--ease-out);
}
@keyframes stepIn { from { transform: translateY(14px); } to { transform: none; } }

.eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--gb-violet-600);
}
.step-title { font-size: clamp(26px, 3.4vw, 38px); font-weight: var(--fw-black); line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--gb-ink); margin: 0 0 12px; text-wrap: balance; }
.step-sub { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--gb-ink-600); margin: 0 0 8px; max-width: 62ch; }
.muted-hint { font-size: 13px; color: var(--gb-ink-400); font-weight: var(--fw-semibold); }

/* ============ SELECT CARDS / GRID ============ */
.grid { display: grid; gap: 12px; margin-top: 24px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px){ .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

.selcard {
  text-align: left; cursor: pointer; position: relative;
  background: #fff; border: 1.5px solid var(--gb-border); border-radius: var(--r-lg);
  padding: 18px; display: flex; gap: 14px; align-items: flex-start;
  transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.selcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gb-violet-200); }
.selcard.sel { border-color: var(--gb-violet); background: var(--gb-violet-50); box-shadow: 0 0 0 3px rgba(110,57,240,.12); }
.selcard .ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--gb-violet-50); color: var(--gb-violet-700); transition: all var(--dur-base) var(--ease-standard);
}
.selcard.sel .ico { background: var(--gb-violet); color: #fff; }
.selcard .body { min-width: 0; flex: 1; }
.selcard .t { font-size: 16px; font-weight: var(--fw-bold); color: var(--gb-ink-900); margin: 2px 0 4px; }
.selcard .d { font-size: 13.5px; line-height: 1.45; color: var(--gb-ink-500); }
.selcard .tick {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gb-violet); color: #fff; display: grid; place-items: center;
  opacity: 0; transform: scale(.4); transition: all var(--dur-base) var(--ease-standard);
}
.selcard.sel .tick { opacity: 1; transform: scale(1); }
.selcard.compact { padding: 14px 16px; align-items: center; }
.selcard.compact .t { margin: 0; }

/* small pill grid for sectors */
.selcard .meta { font-size: 12px; color: var(--gb-ink-400); margin-top: 6px; font-weight: var(--fw-semibold); }

/* ============ CHIPS ============ */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--gb-border); background: #fff; color: var(--gb-ink-700);
  border-radius: var(--r-pill); padding: 9px 15px; font-size: 14px; font-weight: var(--fw-semibold);
  transition: all var(--dur-base) var(--ease-standard);
}
.chip:hover { border-color: var(--gb-violet-200); background: var(--gb-violet-50); }
.chip.sel { border-color: var(--gb-violet); background: var(--gb-violet); color: #fff; }
.chip.suggest { border-style: dashed; color: var(--gb-ink-500); }
.chip.suggest:hover { color: var(--gb-violet-700); }
.chip .x { opacity: .8; }
.chip.kw { background: var(--gb-violet-50); border-color: var(--gb-violet-100); color: var(--gb-violet-700); }

/* ============ INPUTS ============ */
.field { margin-top: 22px; }
.field > label { display: block; font-size: 14px; font-weight: var(--fw-bold); color: var(--gb-ink-900); margin-bottom: 7px; }
.field .sublabel { font-size: 13px; color: var(--gb-ink-400); font-weight: var(--fw-medium); margin-bottom: 9px; }
.inp, .sel {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--gb-border); border-radius: var(--r-md);
  font-family: inherit; font-size: 16px; color: var(--gb-ink-900); background: #fff;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.inp::placeholder { color: var(--gb-ink-400); }
.inp:focus, .sel:focus { outline: none; border-color: var(--gb-violet); box-shadow: 0 0 0 3px rgba(110,57,240,.15); }
.inp-wrap { position: relative; }
.inp-wrap .lead-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gb-ink-400); }
.inp-wrap.has-lead .inp { padding-left: 44px; }
textarea.inp { resize: vertical; min-height: 84px; line-height: 1.5; }

/* segmented tabs */
.segtabs { display: inline-flex; background: var(--gb-ink-100); padding: 4px; border-radius: var(--r-md); gap: 4px; margin-top: 8px; }
.segtabs button {
  border: none; background: transparent; cursor: pointer; padding: 10px 18px; border-radius: 7px;
  font-size: 14px; font-weight: var(--fw-semibold); color: var(--gb-ink-500); display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--dur-base) var(--ease-standard);
}
.segtabs button.on { background: #fff; color: var(--gb-violet-700); box-shadow: var(--shadow-xs); }

/* toggle for trade type */
.dualtoggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============ AI / TIP ============ */
.tip {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  background: var(--gb-emerald-50); border: 1px solid var(--gb-border-mint); border-radius: var(--r-md);
  padding: 13px 15px; font-size: 13.5px; line-height: 1.5; color: var(--gb-emerald);
}
.tip .gic { color: var(--gb-emerald-600); margin-top: 1px; }
.tip b { color: var(--gb-emerald); }

.ai-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-bold);
  color: #fff; background: linear-gradient(120deg, var(--gb-violet) 0%, #8B5CF6 100%);
  padding: 4px 11px; border-radius: var(--r-pill); letter-spacing: .02em;
}
.ai-detect {
  margin-top: 20px; border: 1.5px solid var(--gb-violet-100); background: linear-gradient(180deg, var(--gb-violet-50), #fff);
  border-radius: var(--r-lg); padding: 20px; animation: stepIn var(--dur-slow) var(--ease-out);
}
.ai-detect .row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--gb-violet-100); }
.ai-detect .row:last-of-type { border-bottom: none; }
.ai-detect .lbl { font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--gb-ink-400); width: 130px; flex: none; }
.ai-detect .val { font-size: 16px; font-weight: var(--fw-bold); color: var(--gb-ink-900); }
.conf { font-size: 12px; font-weight: var(--fw-bold); color: var(--gb-emerald-600); background: var(--gb-emerald-50); padding: 2px 8px; border-radius: var(--r-pill); }

/* analyzing animation */
.analyzing { margin-top: 22px; border: 1.5px solid var(--gb-violet-100); border-radius: var(--r-lg); padding: 22px; background: var(--gb-violet-50); }
.analyzing .spin { animation: spin 1s linear infinite; color: var(--gb-violet); }
@keyframes spin { to { transform: rotate(360deg); } }
.astep { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--gb-ink-400); font-weight: var(--fw-semibold); transition: color var(--dur-base); }
.astep.on { color: var(--gb-ink-900); }
.astep.ok { color: var(--gb-emerald-600); }
.astep .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gb-ink-200); display: grid; place-items: center; flex: none; }
.astep.on .dot { border-color: var(--gb-violet); }
.astep.ok .dot { border-color: var(--gb-emerald-500); background: var(--gb-emerald-500); color: #fff; }

/* ============ FOOTER NAV ============ */
.footnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 5vw, 48px);
  background: rgba(255,255,255,0.9); border-top: 1px solid var(--gb-border);
  backdrop-filter: blur(8px);
}
.footnav .inner { width: 100%; max-width: 880px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-md); font-size: 16px; font-weight: var(--fw-bold);
  border: none; cursor: pointer; transition: all var(--dur-base) var(--ease-standard);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--gb-violet); color: #fff; box-shadow: var(--shadow-violet); }
.btn-primary:hover { background: var(--gb-violet-600); }
.btn-primary:disabled { background: var(--gb-ink-200); color: var(--gb-ink-400); box-shadow: none; cursor: not-allowed; }
.btn-back { background: transparent; color: var(--gb-ink-500); padding: 14px 18px; }
.btn-back:hover { color: var(--gb-ink-900); }
.btn-ghost-v { background: var(--gb-violet-50); color: var(--gb-violet-700); }
.btn-ghost-v:hover { background: var(--gb-violet-100); }
.btn-skip { background: transparent; color: var(--gb-ink-400); font-weight: var(--fw-semibold); padding: 14px; font-size: 14px; }
.btn-skip:hover { color: var(--gb-ink-700); }
.btn-em { background: var(--gb-emerald); color: #fff; box-shadow: var(--shadow-emerald); }
.btn-em:hover { background: var(--gb-emerald-hover); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ============ FIND STEP ============ */
.findlayout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-top: 22px; align-items: start; }
@media (max-width: 920px){ .findlayout { grid-template-columns: 1fr; } }
.filterpanel { background: #fff; border: 1px solid var(--gb-border); border-radius: var(--r-lg); padding: 18px; position: sticky; top: 96px; }
.filterpanel h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--gb-ink-400); margin: 0 0 14px; font-weight: var(--fw-bold); }
.fgroup { margin-bottom: 16px; }
.fgroup > label { display: block; font-size: 13px; font-weight: var(--fw-bold); color: var(--gb-ink-700); margin-bottom: 7px; }

/* filter panel mobile collapse */
.filterpanel-head { display: flex; align-items: center; justify-content: space-between; }
.filterpanel-toggle { display: none; }
@media (max-width: 920px) {
  .filterpanel { padding: 14px 16px; }
  .filterpanel h4 { margin: 0; }
  .filterpanel-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--gb-ink-50); border: 1px solid var(--gb-border); border-radius: var(--r-pill);
    padding: 6px 12px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--gb-ink-600);
    cursor: pointer;
  }
  .filterpanel-body { margin-top: 12px; }
  .filterpanel-body.panel-closed { display: none; }
  /* bigger touch targets for filter chips on mobile */
  .chip.filter-chip { padding: 8px 12px; font-size: 13px; min-height: 36px; }
  .chip.filter-expand-btn { padding: 8px 10px; }
  .chip.filter-remove-btn { padding: 8px 10px; }
  .chip.filter-variant-chip { padding: 6px 10px; font-size: 12px; }
  /* matrix: tighter cells on mobile */
  td.mx-cell { min-width: 52px; padding: 7px 6px; font-size: 12px; }
  table.matrix th.mx-col { padding: 7px 6px; font-size: 13px; }
  table.matrix td.mx-row { max-width: 120px; padding: 8px 10px; font-size: 12px; }
  table.matrix th.mx-cnr { padding: 8px 10px; }
  /* result cards: tighter on mobile */
  .bcard { padding: 12px 14px; gap: 10px; }
  .bcard .avatar { width: 38px; height: 38px; border-radius: 10px; font-size: 14px; }
  .bcard .nm { font-size: 14px; }
  .bcard .sub2 { font-size: 12px; gap: 3px 8px; }
}
.fsel { width: 100%; padding: 10px 12px; border: 1.5px solid var(--gb-border); border-radius: var(--r-sm); font-family: inherit; font-size: 14px; color: var(--gb-ink-900); background: #fff; }
.fsel:focus { outline: none; border-color: var(--gb-violet); }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.results-head .count { font-size: 16px; font-weight: var(--fw-bold); color: var(--gb-ink-900); }
.results-head .count b { color: var(--gb-violet-700); }
.results-head .count .count-of { color: var(--gb-ink-400); font-weight: 400; font-size: 14px; }

.empty-find { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed var(--gb-border); border-radius: var(--r-lg); }
.empty-find .circle { width: 72px; height: 72px; border-radius: 50%; background: var(--gb-ink-50); display: grid; place-items: center; margin: 0 auto 16px; color: var(--gb-ink-400); }
.empty-find h3 { font-size: 20px; color: var(--gb-ink-900); margin: 0 0 6px; }
.empty-find p { font-size: 14px; color: var(--gb-ink-500); margin: 0; }

.bcard { background: #fff; border: 1px solid var(--gb-border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; gap: 14px; align-items: center; transition: all var(--dur-base) var(--ease-standard); animation: stepIn var(--dur-base) var(--ease-out); }
.bcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.bcard.sel { border-color: var(--gb-violet); background: var(--gb-violet-50); }
.bcard .avatar { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: var(--fw-bold); color: #fff; font-size: 16px; }
.bcard .info { flex: 1; min-width: 0; }
.bcard .nm { font-size: 16px; font-weight: var(--fw-bold); color: var(--gb-ink-900); display: flex; align-items: center; gap: 8px; }
.bcard .sub2 { font-size: 13.5px; color: var(--gb-ink-500); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.bcard .sub2 .dotsep { color: var(--gb-ink-300); }
.vbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: var(--fw-bold); color: var(--gb-emerald-600); }
.matchpill { font-size: 13px; font-weight: var(--fw-black); color: var(--gb-violet-700); background: var(--gb-violet-50); border: 1px solid var(--gb-violet-100); padding: 6px 11px; border-radius: var(--r-pill); flex: none; }
.matchpill .lab { font-size: 10px; font-weight: var(--fw-bold); color: var(--gb-ink-400); text-transform: uppercase; display: block; line-height: 1; margin-top: 1px; letter-spacing: .04em; }
.addbtn { flex: none; border: 1.5px solid var(--gb-border); background: #fff; color: var(--gb-ink-700); border-radius: var(--r-md); padding: 9px 14px; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-base) var(--ease-standard); }
.addbtn:hover { border-color: var(--gb-violet-200); color: var(--gb-violet-700); }
.addbtn.added { background: var(--gb-violet); border-color: var(--gb-violet); color: #fff; }
.results-list { display: flex; flex-direction: column; gap: 10px; }

.demo-note { font-size: 12.5px; color: var(--gb-ink-400); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 6px; }

/* selection action bar */
.actionbar { position: sticky; bottom: 78px; margin-top: 18px; background: var(--gb-ink-900); color: #fff; border-radius: var(--r-lg); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-xl); animation: stepIn var(--dur-base) var(--ease-out); }
.actionbar .sel-n { font-size: 15px; font-weight: var(--fw-bold); }
.actionbar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.actionbar .ab { border: none; cursor: pointer; border-radius: var(--r-md); padding: 10px 15px; font-size: 14px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 7px; transition: all var(--dur-base) var(--ease-standard); }
.ab.white { background: rgba(255,255,255,.12); color: #fff; }
.ab.white:hover { background: rgba(255,255,255,.22); }
.ab.green { background: var(--gb-emerald-500); color: #fff; }
.ab.green:hover { background: var(--gb-emerald-600); }

/* ============ MODAL / TOAST ============ */
.modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(2,6,23,.5); display: grid; place-items: center; padding: 20px; animation: fade var(--dur-base); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { background: #fff; border-radius: var(--r-xl); padding: 28px; width: 100%; max-width: 560px; box-shadow: var(--shadow-xl); animation: stepIn var(--dur-base) var(--ease-out); max-height: 88vh; overflow: auto; }
.modal h3 { font-size: 24px; font-weight: var(--fw-black); color: var(--gb-ink); margin: 0 0 4px; }
.modal .msub { font-size: 14px; color: var(--gb-ink-500); margin: 0 0 18px; }
.modal-close { float: right; border: none; background: var(--gb-ink-100); color: var(--gb-ink-600); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: grid; place-items: center; }
.modal-close:hover { background: var(--gb-ink-200); }
.modal-success { text-align: center; }
.modal-success .big { width: 72px; height: 72px; border-radius: 50%; background: var(--gb-emerald-50); color: var(--gb-emerald-500); display: grid; place-items: center; margin: 4px auto 16px; }

.toast { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 90; background: var(--gb-ink-900); color: #fff; padding: 13px 20px; border-radius: var(--r-pill); font-size: 14px; font-weight: var(--fw-semibold); box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 8px; animation: toastIn var(--dur-base) var(--ease-out); }
.toast .gic { color: var(--gb-emerald-500); }
@keyframes toastIn { from { opacity: 0; transform: transl(-50%, 10px); } to { opacity: 1; } }

/* summary chips on persona/finish */
.summary-box { margin-top: 22px; background: var(--gb-ink-50); border: 1px solid var(--gb-border); border-radius: var(--r-lg); padding: 18px; }
.hub-ai-summary { margin-top: 0; margin-bottom: 24px; background: var(--gb-violet-50); border-color: var(--gb-violet-100); }
.summary-box h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--gb-ink-600); margin: 0 0 12px; font-weight: var(--fw-bold); }
.summary-row { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; align-items: baseline; }
.summary-row .k { width: 120px; flex: none; color: var(--gb-ink-600); font-weight: var(--fw-bold); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.summary-row .v { color: var(--gb-ink-900); font-weight: var(--fw-semibold); }

.add-inline { display: flex; gap: 8px; margin-top: 12px; }
.add-inline .inp { flex: 1; }
.icon-btn-v { border: none; background: var(--gb-violet); color: #fff; border-radius: var(--r-md); padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: 14px; }
.icon-btn-v:hover { background: var(--gb-violet-600); }

.search-row { position: relative; margin-top: 8px; }
.search-row .gic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gb-ink-400); }
.search-row input { width: 100%; padding: 12px 14px 12px 42px; border: 1.5px solid var(--gb-border); border-radius: var(--r-md); font-size: 15px; font-family: inherit; }
.search-row input:focus { outline: none; border-color: var(--gb-violet); box-shadow: 0 0 0 3px rgba(110,57,240,.15); }

.scroll-grid { max-height: 420px; overflow: auto; padding-right: 6px; margin-right: -6px; }
.scroll-grid::-webkit-scrollbar { width: 8px; }
.scroll-grid::-webkit-scrollbar-thumb { background: var(--gb-ink-200); border-radius: 4px; }

/* ===== spacing refinements ===== */
.selcard .body { display: flex; flex-direction: column; }
.selcard .t, .selcard .d, .selcard .meta { display: block; }
.selcard { gap: 15px; padding: 18px 20px; }
.selcard .t { margin: 1px 0 5px; line-height: 1.25; }
.selcard .d { line-height: 1.55; margin-top: 1px; }
.selcard .meta { margin-top: 8px; }
.selcard.compact .d { margin-top: 3px; }
.field .sublabel { margin-top: 4px; }
.step-sub { margin-bottom: 4px; }
.ai-detect .row { align-items: flex-start; padding: 13px 0; gap: 14px; }
.ai-detect .lbl { width: 148px; line-height: 1.35; padding-top: 2px; }
.ai-detect .val { flex: 1; line-height: 1.35; }
.ai-detect .conf { flex: none; align-self: center; }
.chips { gap: 10px 10px; }
.chips > .chip { display: inline-flex !important; width: auto !important; flex: 0 0 auto; align-self: flex-start; max-width: 100%; }

/* ===== country picker ===== */
.country-list { max-height: 248px; overflow: auto; border: 1.5px solid var(--gb-border); border-radius: var(--r-md); margin-top: 8px; background: #fff; }
.country-row { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: none; background: transparent; cursor: pointer; font-size: 14.5px; font-family: inherit; color: var(--gb-ink-700); text-align: left; border-bottom: 1px solid var(--gb-ink-50); transition: background var(--dur-fast) var(--ease-standard); }
.country-row:last-child { border-bottom: none; }
.country-row:hover { background: var(--gb-violet-50); }
.country-row.sel { background: var(--gb-violet-50); color: var(--gb-violet-700); font-weight: var(--fw-bold); }
.country-row .flag { font-size: 19px; line-height: 1; }
.country-row .cn { flex: 1; }
.country-row .ck { color: var(--gb-violet); }
.country-list::-webkit-scrollbar { width: 9px; }
.country-list::-webkit-scrollbar-thumb { background: var(--gb-ink-200); border-radius: 5px; border: 2px solid #fff; }

/* ===== autocomplete ===== */
.ac-list { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 30; background: #fff; border: 1.5px solid var(--gb-violet-200); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 320px; overflow-y: auto; }
.ac-row { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px; border: none; background: #fff; cursor: pointer; text-align: left; border-bottom: 1px solid var(--gb-ink-50); transition: background var(--dur-fast) var(--ease-standard); }
.ac-row:last-child { border-bottom: none; }
.ac-row:hover { background: var(--gb-violet-50); }
.ac-row .ac-l { font-size: 15px; font-weight: var(--fw-semibold); color: var(--gb-ink-900); }
.ac-row .ac-meta { font-size: 12.5px; color: var(--gb-ink-400); }

/* ===== AI candidate cards ===== */
.cand-card { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--gb-violet-100); border-radius: var(--r-md); padding: 14px 16px; transition: all var(--dur-base) var(--ease-standard); }
.cand-card:hover { border-color: var(--gb-violet); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cand-card.sel { border-color: var(--gb-violet); background: var(--gb-violet-50); box-shadow: 0 0 0 3px rgba(110,57,240,.12); }
.cand-check { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1.5px solid var(--gb-ink-300); display: grid; place-items: center; color: #fff; transition: all var(--dur-base) var(--ease-standard); }
.cand-card.sel .cand-check { background: var(--gb-violet); border-color: var(--gb-violet); }

/* ===== HS code picker ===== */
.hs-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.hs-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--gb-border); border-radius: var(--r-md); padding: 11px 13px; transition: all var(--dur-base) var(--ease-standard); }
.hs-row:hover { border-color: var(--gb-violet-200); background: var(--gb-violet-50); }
.hs-row.sel { border-color: var(--gb-violet); background: var(--gb-violet-50); }
.hs-code { flex: none; font-family: var(--font-mono); font-size: 14px; font-weight: var(--fw-bold); color: var(--gb-violet-700); background: var(--gb-violet-50); border: 1px solid var(--gb-violet-100); padding: 5px 9px; border-radius: var(--r-sm); letter-spacing: .02em; }
.hs-row.sel .hs-code { background: #fff; }
.hs-desc { flex: 1; min-width: 0; font-size: 13.5px; color: var(--gb-ink-700); line-height: 1.35; }
.hs-ic { flex: none; color: var(--gb-violet); }
.hs-pct { flex: none; font-size: 12px; font-weight: var(--fw-black); color: var(--gb-emerald-600); background: var(--gb-emerald-50); border: 1px solid var(--gb-border-mint); padding: 4px 8px; border-radius: var(--r-pill); }

/* ===== section heads (compact) + phase sections ===== */
.phase-intro { margin-bottom: 16px; }
.phase-intro .step-title { font-size: clamp(24px, 3vw, 32px); }
.phase-section { padding: 24px 0; border-top: 1px solid var(--gb-ink-100); }
.phase-section:first-child { padding-top: 0; border-top: none; }
.phase-section.muted { opacity: .96; }
.sechead { margin-bottom: 14px; }
.sechead-row { display: flex; align-items: center; gap: 10px; }
.sechead-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gb-violet); color: #fff; font-size: 13px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.sechead-title { font-size: 19px; font-weight: var(--fw-bold); color: var(--gb-ink-900); margin: 0; line-height: 1.25; }
.sechead-sub { font-size: 14px; color: var(--gb-ink-500); margin: 7px 0 0; line-height: 1.5; }
.ai-badge.sm { font-size: 11px; padding: 3px 8px; }

/* ===== hub ===== */
.hub { padding: 8px 0; }
.hub-head { text-align: center; max-width: 620px; margin: 0 auto 26px; }
.hub-badge { width: 64px; height: 64px; border-radius: 50%; background: var(--gb-emerald-50); color: var(--gb-emerald-500); display: grid; place-items: center; margin: 0 auto; }
.hub-head .step-title { text-align: center; }
.hub-head .step-sub { margin-left: auto; margin-right: auto; }
.hub-grid { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.hub-card { display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--gb-border); border-radius: var(--r-lg); padding: 20px 22px; transition: all var(--dur-base) var(--ease-standard); }
.hub-card:hover { border-color: var(--gb-violet); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hub-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--gb-violet-50); color: var(--gb-violet-700); display: grid; place-items: center; }
.hub-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hub-card-t { font-size: 18px; font-weight: var(--fw-bold); color: var(--gb-ink-900); }
.hub-card-d { font-size: 14px; color: var(--gb-ink-500); line-height: 1.45; }
.hub-arrow { flex: none; color: var(--gb-violet); }

/* ===== route page (destinations) ===== */
.route-back { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--gb-border); background: #fff; color: var(--gb-ink-600); border-radius: var(--r-pill); padding: 8px 15px; font-size: 13.5px; font-weight: var(--fw-semibold); cursor: pointer; margin-bottom: 18px; transition: all var(--dur-base) var(--ease-standard); }
.route-back:hover { background: var(--gb-ink-50); }
.route-page.narrow { max-width: 680px; margin: 0 auto; }
.route-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }

/* ===== market analysis ===== */
.mk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mk-card { background: #fff; border: 1px solid var(--gb-border); border-radius: var(--r-lg); padding: 16px 18px; transition: box-shadow var(--dur-base) var(--ease-standard); }
.mk-card:hover { box-shadow: var(--shadow-md); }
.mk-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mk-rank { flex: none; font-size: 13px; font-weight: var(--fw-black); color: var(--gb-violet-700); background: var(--gb-violet-50); padding: 3px 9px; border-radius: var(--r-pill); }
.mk-flag { font-size: 22px; line-height: 1; }
.mk-name { flex: 1; min-width: 0; font-size: 16px; font-weight: var(--fw-bold); color: var(--gb-ink-900); }
.mk-score { flex: none; font-size: 20px; font-weight: var(--fw-black); color: var(--gb-emerald-600); display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.mk-score-l { font-size: 10px; font-weight: var(--fw-bold); color: var(--gb-ink-400); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.mk-metrics { display: flex; flex-direction: column; gap: 9px; }
.mk-metric-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--gb-ink-500); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.mk-metric-v { color: var(--gb-ink-800); font-weight: var(--fw-bold); }
.mk-bar { height: 6px; border-radius: var(--r-pill); background: var(--gb-ink-100); overflow: hidden; }
.mk-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--gb-violet); }
.mk-bar-fill.demand { background: var(--gb-violet); }
.mk-bar-fill.pct { background: var(--gb-emerald-500); }
.mk-bar-fill.comp { background: var(--gb-amber, #F59E0B); }

/* ===== segmented (email templates/tone) ===== */
.seg2row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg2 { border: 1.5px solid var(--gb-border); background: #fff; color: var(--gb-ink-600); border-radius: var(--r-pill); padding: 9px 15px; font-size: 13.5px; font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--dur-base) var(--ease-standard); }
.seg2:hover { border-color: var(--gb-violet-200); }
.seg2.on { border-color: var(--gb-violet); background: var(--gb-violet); color: #fff; }

/* ===== mobile ===== */
@media (max-width: 760px) {
  .mk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .brand img { height: 22px; }
  .brand .brand-sub { font-size: 11px; padding: 2px 7px; }
  .exit-btn span:not(.gic) { display: none; }
  .exit-btn { padding: 8px 10px; }
  .stage { padding: 16px 14px 130px; }
  .stepcard { padding: 20px 16px; border-radius: var(--r-lg); }
  .progress { padding: 14px 16px 0; }
  .progress-head { margin-bottom: 8px; }
  .step-counter { padding: 4px 10px; font-size: 12px; }
  .step-counter-num { font-size: 15px; }
  .step-counter-word { font-size: 10px; }
  .step-phase { font-size: 11px; }
  .phase-label { font-size: 10px; }
  .step-title { font-size: 23px; }
  .step-sub { font-size: 15px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .dualtoggle { grid-template-columns: 1fr; }
  .footnav { padding: 12px 16px; }
  .footnav .inner { gap: 8px; }
  .btn { padding: 13px 18px; font-size: 15px; }
  .btn-primary { flex: 1; }
  .segtabs { width: 100%; }
  .segtabs button { flex: 1; justify-content: center; padding: 11px 10px; }
  .hub-card { padding: 16px; gap: 12px; }
  .hub-ic { width: 44px; height: 44px; }
  .hub-card-t { font-size: 16px; }
  .route-head { flex-direction: column; gap: 8px; }
  .modal { padding: 22px 18px; }
  .ai-detect, .analyzing { padding: 16px; }
  .filterpanel { position: static; }
  .actionbar { position: sticky; bottom: 80px; flex-direction: column; align-items: stretch; }
  .actionbar .acts { justify-content: stretch; }
  .actionbar .ab { flex: 1; justify-content: center; }

  /* tighter options so the page doesn't get too tall */
  .grid { gap: 9px; margin-top: 16px; }
  .field { margin-top: 18px; }
  .selcard { padding: 13px 14px; gap: 11px; align-items: center; }
  .selcard .ico { width: 38px; height: 38px; }
  .selcard .t { font-size: 15px; margin: 0 0 2px; }
  .selcard .d { font-size: 12.5px; line-height: 1.35; }
  .selcard .tick { top: 50%; transform: translateY(-50%) scale(.4); right: 12px; }
  .selcard.sel .tick { transform: translateY(-50%) scale(1); }
  .chips { gap: 8px; }
  .chip { padding: 8px 13px; font-size: 13.5px; }
  .cand-card { padding: 12px 13px; gap: 10px; }
  .cand-prod { font-size: 15px; }
  .cand-sec { font-size: 12px; }
  .country-list { max-height: 200px; }
}
/* very small screens: drop secondary descriptions to keep choices scannable */
@media (max-width: 430px) {
  .selcard:not(.compact) .d { display: none; }
}
.hs-list::-webkit-scrollbar { width: 9px; }
.hs-list::-webkit-scrollbar-thumb { background: var(--gb-ink-200); border-radius: 5px; border: 2px solid #fff; }
.cand-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cand-prod { font-size: 16px; font-weight: var(--fw-bold); color: var(--gb-ink-900); }
.cand-sec { font-size: 13px; color: var(--gb-ink-500); }
.cand-conf { flex: none; font-size: 13px; font-weight: var(--fw-black); color: var(--gb-violet-700); background: var(--gb-violet-50); padding: 5px 10px; border-radius: var(--r-pill); }
.cand-arrow { color: var(--gb-violet); flex: none; }

/* ---- Contact Modal ---- */
.contact-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(15,15,30,.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.contact-modal {
  background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.18);
  width: 100%; max-width: 420px;
  overflow: hidden; animation: slideUp .22s ease;
}
.contact-modal-head {
  background: linear-gradient(120deg,#6E39F0,#8B5CF6);
  padding: 26px 28px 22px; text-align: center;
}
.contact-modal-head h3 { color: #fff; }
.contact-modal-head p { color: rgba(255,255,255,.8); }
.contact-modal-body { padding: 20px 24px 4px; }
.contact-row { display: flex; gap: 12px; }
.contact-row .field { flex: 1; min-width: 0; }
.contact-modal-foot {
  padding: 16px 24px 22px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
@keyframes slideUp {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 480px) {
  .contact-row { flex-direction: column; gap: 0; }
  .contact-modal-head { padding: 20px 20px 18px; }
  .contact-modal-body { padding: 16px 18px 4px; }
  .contact-modal-foot { padding: 14px 18px 20px; }
}

/* ---- Pre-search match count (firms / people) ---- */
.precount {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px; margin-bottom: 6px;
  background: var(--gb-violet-50); border: 1px solid var(--gb-violet-200, #ddd0fb);
  border-radius: var(--r-md, 12px);
}
.precount-n { font-size: 22px; font-weight: var(--fw-black, 800); color: var(--gb-violet-700); line-height: 1; }
.precount-l { font-size: 13px; color: var(--gb-ink-600); }

/* ---- Keyword × country count matrix ---- */
/* people-mode filter chips (include/exclude toggle) */
.filter-hint { font-weight: 400; color: var(--gb-ink-400); font-size: 12px; }
.chip.filter-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px; cursor: pointer; border: none; }
.chip.filter-chip.on { background: var(--gb-violet); color: #fff; border-color: var(--gb-violet); }
.chip.filter-chip.off { background: var(--gb-ink-50, #f5f5f8); color: var(--gb-ink-400); border-color: var(--gb-ink-100); opacity: .75; }
.chip.filter-chip.off:hover { opacity: 1; }
/* title chip sub-types */
.chip.filter-expand-btn { padding: 5px 7px; }
.chip.filter-remove-btn { padding: 5px 8px; }
.chip.filter-variant-chip { font-size: 11px; padding: 3px 8px; }
/* titles matrix row states */
.tm-title { cursor: pointer; user-select: none; }
.tm-title:hover { background: var(--gb-violet-50); color: var(--gb-violet-700); }
.tm-toggle-icon { color: var(--gb-violet-400); vertical-align: -2px; }
.tm-row-off { opacity: .45; }
.tm-row-off .tm-toggle-icon { color: var(--gb-ink-300); }
.tm-total-row td { background: var(--gb-violet-50); border-top: 2px solid var(--gb-violet-100); }

/* keyword-add input + suggestions */
.kw-add-row { display: flex; align-items: center; gap: 6px; }
.kw-add-inp { font-size: 13px !important; padding: 7px 10px !important; flex: 1; }
.kw-add-btn { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 8px; background: var(--gb-violet); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kw-add-btn:hover { background: var(--gb-violet-700); }
.kw-add-spin { margin-left: 4px; color: var(--gb-violet); }
.kw-suggestions { background: #fff; border: 1px solid var(--gb-ink-100, #ececf1); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.08); margin-top: 4px; overflow: hidden; }
.kw-suggestion { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; color: var(--gb-ink-800); cursor: pointer; transition: background .12s; }
.kw-suggestion:hover { background: var(--gb-violet-50); color: var(--gb-violet-700); }
.kw-sug-loading { padding: 10px 12px; color: var(--gb-ink-400); font-size: 13px; }

.matrix-divider { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; font-size: 12px; color: var(--gb-ink-400); font-style: italic; }

/* AI auto-picked country notice */
.ai-auto-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 12px; font-size: 12.5px; line-height: 1.35;
  color: var(--gb-violet-700); background: var(--gb-violet-50); border: 1px solid var(--gb-violet-100); border-radius: var(--r-md, 12px); }
.ai-auto-note span { flex: 1; }
.ai-auto-x { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; color: var(--gb-violet-600); padding: 2px; border-radius: 6px; }
.ai-auto-x:hover { background: var(--gb-violet-100); }

/* company-type (buyer archetype) row tag in the keyword × country matrix */
.mx-typetag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gb-violet-700); background: var(--gb-violet-50); border: 1px solid var(--gb-violet-100); border-radius: 999px; vertical-align: middle; }

.matrix-wrap { margin-bottom: 18px; }
.matrix-head h3 { font-size: 15px; font-weight: var(--fw-bold, 700); margin: 0; color: var(--gb-ink-900); }
.matrix-scroll { overflow-x: auto; margin-top: 12px; border: 1px solid var(--gb-ink-100, #ececf1); border-radius: var(--r-md, 12px); }
table.matrix { border-collapse: collapse; width: 100%; font-size: 13px; }
table.matrix th, table.matrix td { border-bottom: 1px solid var(--gb-ink-100, #ececf1); border-right: 1px solid var(--gb-ink-100, #ececf1); }
table.matrix th.mx-cnr { text-align: left; padding: 9px 12px; background: var(--gb-violet-50); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gb-violet-700); position: sticky; left: 0; z-index: 2; }
table.matrix th.mx-col { padding: 8px 10px; background: var(--gb-violet-50); text-align: center; white-space: nowrap; font-size: 15px; }
table.matrix th.mx-col .mx-cc { display: block; font-size: 10px; color: var(--gb-ink-500); font-weight: 600; margin-top: 1px; }
table.matrix td.mx-row { padding: 9px 12px; font-weight: 600; color: var(--gb-ink-800); position: sticky; left: 0; background: #fff; z-index: 1; max-width: 160px; }
td.mx-cell { padding: 8px 10px; text-align: center; color: var(--gb-ink-400); cursor: default; min-width: 64px; }
td.mx-cell.hit { cursor: pointer; color: var(--gb-ink-700); }
td.mx-cell.hit:hover { background: var(--gb-violet-50); }
td.mx-cell.on { background: var(--gb-violet-100, #efe6fe); color: var(--gb-violet-700); font-weight: 700; }
.mx-n { display: inline-block; }
.mx-tick { display: inline-block; width: 12px; margin-left: 4px; color: var(--gb-violet-700); font-weight: 800; }
.matrix-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.mx-total { font-size: 14px; color: var(--gb-ink-700); }

/* ---- Custom data request box ---- */
.datareq { margin-top: 22px; padding: 18px; border: 1px dashed var(--gb-violet-200, #ddd0fb); border-radius: var(--r-md, 12px); background: var(--gb-violet-50); }
.datareq-head { display: flex; gap: 10px; align-items: flex-start; color: var(--gb-violet-700); }
.datareq-head h4 { margin: 0; font-size: 15px; font-weight: var(--fw-bold, 700); color: var(--gb-ink-900); }
.datareq-head p { margin: 2px 0 0; font-size: 13px; color: var(--gb-ink-600); line-height: 1.5; }
.datareq.done { display: flex; align-items: center; gap: 10px; color: var(--gb-violet-700); border-style: solid; }
.datareq.done p { margin: 0; font-size: 14px; color: var(--gb-ink-800); }

/* lead-capture gate — the conversion CTA panel (stronger than a plain data request) */
.datareq.gate-panel { border-style: solid; border-color: var(--gb-violet-300, #c9b3fb); background: linear-gradient(180deg, var(--gb-violet-50), #fff); }
.datareq.gate-panel .results-head { padding: 0; border: none; }
.datareq.gate-panel .count { font-size: 18px; }

/* market teaser — country cards with the metrics locked behind the gate */
.mk-grid-teaser .mk-card-locked { opacity: .92; }
.mk-grid-teaser .mk-card-locked .mk-card-head { margin-bottom: 0; }

/* matrix cell checkbox */
.mx-cellbox { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mx-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--gb-ink-300, #c7c7d1); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.mx-check.on { background: var(--gb-violet, #6E39F0); border-color: var(--gb-violet, #6E39F0); }