:root{
  /* Design tokens (light) */
  --qc-text:#0b0c0f;
  --qc-muted:#61646b;
  --qc-overlay:rgba(8,10,20,.55);
  --qc-surface:rgba(255,255,255,.78);         /* glass card */
  --qc-hover:rgba(0,0,0,.04);
  --qc-hairline:rgba(0,0,0,.12);
  --qc-shadow:0 20px 60px rgba(0,0,0,.18);
  --qc-width:min(92vw,560px);
  --qc-radius:18px;
  --qc-icon:#111827;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --qc-text:#f5f7fb;
    --qc-muted:#a3a7b0;
    --qc-overlay:rgba(0,0,0,.68);
    --qc-surface:rgba(24,26,30,.62);
    --qc-hover:rgba(255,255,255,.06);
    --qc-hairline:rgba(255,255,255,.14);
    --qc-shadow:0 20px 60px rgba(0,0,0,.5);
    --qc-icon:#e5e7eb;
  }
}

/* prevent ghost clicks when closed */
.qc{ pointer-events:none; }
.qc--open{ pointer-events:auto; }

/* overlay */
.qc-overlay{
  position:fixed; inset:0;
  background:var(--qc-overlay);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:2147483643;
}
.qc-overlay.is-open{ opacity:1; pointer-events:auto; }

/* MODAL (centered glass card with dvh cap) */
.qc, .qc *{ box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"SF Pro Text","SF Pro Display",sans-serif; }
.qc{
  position:fixed; left:50%; top:50%;
  width:var(--qc-width);
  max-height:min(86dvh,640px);
  border-radius:var(--qc-radius);
  overflow:hidden;
  color:var(--qc-text);
  background:var(--qc-surface);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border:1px solid var(--qc-hairline);
  box-shadow:var(--qc-shadow);

  transform:translate(-50%,-46%) scale(.985);  /* closed pose */
  opacity:0;
  transition:
    transform .33s cubic-bezier(.22,.9,.22,1),
    opacity .2s ease;

  display:grid; grid-template-rows:auto 1fr;   /* (header removed) + body */
  z-index:2147483644;
}
.qc--open{ transform:translate(-50%,-50%) scale(1); opacity:1; }

/* remove old banner */
.qc__weave{ display:none; }

/* body area scrolls; paddings tuned */
.qc__body{
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  overflow:auto; -webkit-overflow-scrolling:touch;
}

/* Title + subtitle */
.qc__title{
  margin:0 0 6px; font-weight:700;
  font-size:clamp(20px,3.2vw,24px); letter-spacing:-.012em; line-height:1.15;
}
.qc__subtitle{
  margin:0 0 16px; color:var(--qc-muted); font-size:14px; line-height:1.35;
}

/* Panel container */
.qc__panel{
  background:transparent; border:1px solid var(--qc-hairline);
  border-radius:16px; padding:8px; display:grid; gap:10px;
}

/* Action rows – clean list style */
.qc__actions{ display:grid; gap:10px; }
.qc__action{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px; border-radius:12px;
  border:1px solid transparent;
  text-decoration:none; color:inherit;
  background:transparent;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.qc__action:hover{ background:var(--qc-hover); border-color:var(--qc-hairline); }
.qc__action:active{ transform:scale(.997); }
.qc__action:focus-visible{
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--qc-icon) 20%, transparent);
  border-color:color-mix(in srgb, var(--qc-icon) 35%, transparent);
}

/* Icon: monochrome, subtle capsule */
.qc__icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 36px;
  background:color-mix(in srgb, var(--qc-hairline) 16%, transparent);
  color:var(--qc-icon);
}
.qc__icon svg{ stroke: currentColor !important; }

/* Labels */
.qc__label{ font-weight:600; line-height:1.2; }
.qc__hint{ font-size:12.5px; color:var(--qc-muted); }

/* Footer buttons */
.qc__cta{ margin-top:8px; display:flex; gap:10px; justify-content:flex-end; }
.qc__btn{
  border:1px solid var(--qc-hairline);
  border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer;
  background:transparent; color:var(--qc-text);
  transition:background-color .12s ease, border-color .12s ease;
}
.qc__btn:hover{ background:var(--qc-hover); }
.qc__btn--ghost{ /* keep same visuals for simplicity */ }

/* Even row height + centered text block */
.qc__action{ min-height: 64px; align-items: center; }
.qc__action > span:last-child{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically centers label + hint */
}

/* Small typographic tweaks for balance */
.qc__label{ line-height: 1.15; }
.qc__hint{ margin-top: 2px; }

/* If the quote row still looks 1px high on your font rendering, nudge it: */
/* .qc__action--quote > span:last-child{ transform: translateY(1px); } */


/* Mobile refinement */
@media (max-width:640px){
  .qc{ width:96vw; max-height:min(88dvh,580px); border-radius:16px; }
  .qc__body{ padding:16px 16px calc(18px + env(safe-area-inset-bottom)); }
  .qc__title{ font-size:20px; }
}

/* Reduce motion honour */
@media (prefers-reduced-motion:reduce){
  .qc, .qc-overlay, .qc__action{ transition:none; }
}

/* Navy-tinted blur overlay */
:root{ --qc-navy:#0f3d7a; } /* your brand navy */

.qc-overlay{
  /* subtle navy instead of near-black */
  background: rgba(15, 61, 122, .58);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

@media (prefers-color-scheme: dark){
  /* a touch stronger in dark mode */
  .qc-overlay{ background: rgba(15, 61, 122, .70); }
}