/* ==========================================================================
   QQSAgents - round 3: logo mark, panel chrome, reviews
   ========================================================================== */

/* ---------- Logo mark: a real mark, not a blank square ---------- */
.brand{gap:0;font-size:1.15rem}
.brand::before{
  content:'Q';
  width:30px;height:30px;border-radius:9px;flex:none;margin-right:.6rem;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 4px 12px -3px rgba(37,99,235,.55);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.02rem;font-weight:700;line-height:1;
  letter-spacing:-.02em;
  font-family:var(--sans);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}
.brand:hover::before{transform:rotate(-8deg) scale(1.06);box-shadow:0 6px 18px -4px rgba(124,58,237,.6)}
.site-foot .brand::before{width:26px;height:26px;font-size:.9rem;border-radius:8px}

/* ---------- Panel chrome: traffic-light dots, readable title ---------- */
.panel-head,.demo-head{background:linear-gradient(180deg,#fbfcfe,#f4f6fa);padding:.78rem 1rem}
.panel-head .dot:nth-of-type(1),.demo-head .dot:nth-of-type(1){background:#ff5f57;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.panel-head .dot:nth-of-type(2),.demo-head .dot:nth-of-type(2){background:#febc2e;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.panel-head .dot:nth-of-type(3),.demo-head .dot:nth-of-type(3){background:#28c840;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.dot{width:10px;height:10px}
.panel-title{
  color:#334155;font-weight:600;font-size:.775rem;letter-spacing:.005em;
  margin-left:.6rem;
  background:#eef1f6;border:1px solid #dfe4ec;border-radius:6px;
  padding:.16rem .55rem;
}
.panel-badge{font-size:.7rem;font-weight:600;padding:.2rem .6rem}

/* ---------- Reviews: rebuilt for real ---------- */
.review{
  padding:0;overflow:hidden;
  background:#fff;border:1px solid #e2e6ee;border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.review::before{content:none}          /* drop the odd floating glyph */
.review::after{height:4px}

.review-top{
  padding:1.5rem 1.6rem .35rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.review .stars{margin:0;font-size:1rem;letter-spacing:.1em;color:#f59e0b}
.review-mark{
  font-family:Georgia,'Times New Roman',serif;
  font-size:2.75rem;line-height:.7;
  color:var(--accent);opacity:.16;
  user-select:none;flex:none;
}
.review q{
  display:block;margin:0;
  padding:.35rem 1.6rem 1.4rem;
  font-size:.965rem;line-height:1.7;color:#1e293b;
}
.review-by{
  margin:0;padding:1.05rem 1.6rem;
  border-top:1px solid #eef1f6;
  background:#fafbfd;
  display:flex;align-items:center;gap:.8rem;
}
/* The avatar is a <span> inside .review-by, so it needs to outrank
   the `.review-by span { display:block }` role-text rule. */
.review-by span.avatar,
.review-by .avatar{
  width:42px;height:42px;min-width:42px;border-radius:50%;flex:none;
  display:flex!important;align-items:center;justify-content:center;
  color:#fff!important;font-weight:700;font-size:.85rem;letter-spacing:.03em;
  line-height:1;margin:0;
  font-family:var(--sans);
  border:0;overflow:hidden;
  box-shadow:0 0 0 3px #fff,0 2px 8px -2px rgba(16,24,40,.28);
}
.review-by .who{min-width:0;flex:1}
.review-by b{display:block;font-size:.905rem;font-weight:600;color:#0f172a;line-height:1.25}
.review-by .who span{display:block;font-size:.795rem;color:#64748b;margin-top:.12rem;line-height:1.35}

.review:hover{box-shadow:0 20px 46px -20px rgba(16,24,40,.26),0 2px 6px rgba(16,24,40,.05);transform:translateY(-5px);border-color:#d5dbe7}

@media(max-width:520px){
  
  .review-top,.review q,.review-by{padding-left:1.2rem;padding-right:1.2rem}
}
@media(prefers-reduced-motion:reduce){
  .brand:hover::before,.review:hover{transform:none!important}
}

/* Verified moved to the top row so the author line never wraps */
.review .vpill{display:inline-flex;align-items:center;gap:.3rem;flex:none;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;border-radius:999px;padding:.26rem .62rem;font-size:.685rem;font-weight:600;letter-spacing:.01em;line-height:1;font-family:var(--sans)}
.review-by .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1080px){.review .vpill{font-size:.64rem;padding:.24rem .5rem}}

.review-by::after{content:none!important}

/* ---------- REVIEW ALIGNMENT ----------
   Cards stretch to the tallest in the row and the author strip is pinned
   to the bottom, so every footer lines up across the row. */
.grid > .review, .reviews-grid > .review{height:100%}
.review{display:flex!important;flex-direction:column!important;align-self:stretch}
.review .review-top{flex:none}
.review q{flex:1 1 auto!important;margin-bottom:0}
.review .review-by{margin-top:auto!important;flex:none}

/* ---------- Calendly embed ----------
   The privacy link sits inside Calendly's cross-origin iframe, so it cannot
   be removed from here. This masks it visually only. pointer-events:none
   means nothing underneath is ever blocked from being clicked. */
.cal-embed{position:relative}
.cal-mask{position:absolute;left:0;bottom:0;width:46%;height:52px;background:#fff;border-bottom-left-radius:14px;pointer-events:none;z-index:2}
@media(max-width:900px){.cal-mask{width:100%;height:56px}}

/* ---------- Brand logo ----------
   The CSS 'Q' placeholder is replaced by the real shield mark. */
.brand::before{content:none!important}
.brand{display:inline-flex;align-items:center;gap:.6rem;line-height:1}
.brand-mark{width:36px;height:36px;object-fit:contain;display:block;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.07)}
.brand-text{font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.brand-text span{color:var(--accent)}
.site-foot .brand-mark{width:32px;height:32px}
@media(max-width:1000px){.brand-mark{width:32px;height:32px}}

/* ---------- Long-form content: tables and callouts ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}
.dtable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.dtable th{text-align:left;padding:.95rem 1.15rem;background:var(--surface-2);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600;white-space:nowrap}
.dtable td{padding:.95rem 1.15rem;border-bottom:1px solid var(--line-2);color:#4a5568;vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.dtable td:first-child{color:var(--ink);font-weight:500}
.dtable td:nth-child(2){white-space:nowrap;font-family:var(--mono);font-size:.82rem;color:var(--accent)}
.dtable tbody tr:hover td{background:var(--accent-bg)}
.callout{margin-top:1.5rem;background:var(--accent-bg);border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:12px;padding:1.15rem 1.35rem}
.callout p{margin:0;color:#334155;font-size:.94rem;line-height:1.7}
.callout strong{color:var(--ink)}
@media(max-width:620px){.dtable{font-size:.86rem}.dtable th,.dtable td{padding:.75rem .85rem}}