/* ============================================================
   CARDIER · "Intelligence" section — new app features folded
   into the marketing site: Stacks, Card Advisor, Annual Review,
   plus a compact "more in Pro" grid. Phone-mock pieces are
   authored at 390px inside .app-screen (scaled by --app-scale),
   reusing the .ha-* / .cc-slot vocabulary from hero-screen.css.
   ============================================================ */

/* ---- shared section eyebrow tint already gold via .feat-text ---- */

/* =======================================================
   STACKS — portfolio intelligence (overlaps + gaps + rec)
   ======================================================= */
.iq-gaptot { text-align: right; flex: none; }
.iq-gaptot .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--urgent);
  letter-spacing: -0.02em; filter: drop-shadow(0 0 12px rgba(230,107,92,0.4)); white-space: nowrap; }
.iq-gaptot .v span { font-size: 11px; color: var(--urgent); }
.iq-gaptot .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.iq-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }

/* overlap rows */
.iq-over { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line);
  position: relative; overflow: hidden; }
.iq-over::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.iq-over .n { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.iq-over .n::after { content: "2×"; font-family: var(--font-mono); font-size: 8.5px; color: var(--accent);
  background: var(--accent-soft); border-radius: 5px; padding: 2px 5px; letter-spacing: 0.04em; }
.iq-over .b { font-size: 11px; color: var(--ink-3); line-height: 1.45; margin-top: 5px; }

/* gap rows (single line) */
.iq-gap { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); }
.iq-gap .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.iq-gap .dot.high { background: var(--urgent); box-shadow: 0 0 8px rgba(230,107,92,0.5); }
.iq-gap .dot.med { background: var(--amber); }
.iq-gap .g-n { font-size: 13.5px; font-weight: 600; flex: none; }
.iq-gap .g-sub { font-size: 11px; color: var(--ink-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-gap .g-v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--urgent); flex: none; }

/* recommendation card */
.iq-rec { display: flex; align-items: center; gap: 13px; margin-top: 13px; padding: 14px;
  border-radius: 14px; border: 1px solid var(--gold-soft);
  background: linear-gradient(120deg, rgba(212,175,122,0.12), rgba(212,175,122,0.02)); }
.iq-rec .cc-slot { flex: none; }
.iq-rec-meta { flex: 1; min-width: 0; }
.iq-rec-theme { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.iq-rec-name { font-size: 14px; font-weight: 600; margin-top: 4px; }
.iq-rec-why { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; margin-top: 4px; }
.iq-rec-net { text-align: right; flex: none; }
.iq-rec-net .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--sage); }
.iq-rec-net .l { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

/* =======================================================
   CARD ADVISOR — which card for this purchase
   ======================================================= */
.iq-pro-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--gold);
  border: 1px solid var(--gold-soft); background: var(--gold-soft); border-radius: 999px; padding: 3px 9px; flex: none; align-self: flex-start; margin-top: 2px; }
.iq-cats { display: flex; gap: 7px; margin-top: 18px; overflow: hidden; }
.iq-cat { font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); white-space: nowrap; flex: none; }
.iq-cat.on { background: var(--gold); color: #241a08; border-color: var(--gold); font-weight: 600; }
.iq-cat-sub { font-size: 11px; color: var(--ink-3); margin-top: 11px; }
.iq-recs { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.iq-rrow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); position: relative; }
.iq-rrow.win { border-color: var(--gold-soft); background: linear-gradient(120deg, rgba(212,175,122,0.10), rgba(212,175,122,0.01)); }
.iq-rrow .cc-slot { flex: none; }
.iq-rrow .m { flex: 1; min-width: 0; }
.iq-rrow .m .n { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.iq-rrow .m .n .win-b { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #241a08; background: var(--gold); border-radius: 5px; padding: 2px 6px; }
.iq-rrow .m .r { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.iq-rrow .earn { text-align: right; flex: none; }
.iq-rrow .earn .pct { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.iq-rrow.win .earn .pct { color: var(--gold); }
.iq-rrow .earn .x { font-size: 9.5px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 2px; }
.iq-credit { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 12px 14px; border-radius: 12px;
  border: 1px dashed var(--gold-soft); font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.iq-credit svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.iq-credit b { color: var(--gold); font-weight: 600; }

/* =======================================================
   ANNUAL REVIEW — renew or drop
   ======================================================= */
.iq-verdict { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 15px; border-radius: 12px; }
.iq-verdict.pos { background: rgba(111,191,138,0.12); border: 1px solid rgba(111,191,138,0.3); }
.iq-verdict .vk { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); flex: none; }
.iq-verdict .vt { font-size: 14px; font-weight: 600; }
.iq-verdict.pos .vt { color: var(--sage); }
.iq-rev-bd { margin-top: 18px; }
.iq-rev-bd .iq-rev-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.iq-rev-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 9px; position: relative; }
.iq-rev-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--gold)); width: 100%; }
.iq-rev-bar .fee { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.5; }
.iq-rev-note { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; }
.iq-rev-note b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }

/* =======================================================
   "More in Pro" — the five smaller utilities, listed
   ======================================================= */
.iq-more { margin-top: clamp(72px,10vw,128px); }
.iq-more-head { max-width: 680px; }
.iq-more-head .eyebrow { color: var(--gold); }
.iq-more-head h3 { font-family: var(--font-display); font-size: clamp(26px,3.4vw,42px); line-height: 1.05; margin-top: 16px; letter-spacing: -0.01em; }
.iq-more-head h3 em { font-style: italic; color: var(--gold); }
.iq-more-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.iq-more-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 0; transition: border-color .35s var(--ease), transform .35s var(--ease); }
.iq-more-card:hover { border-color: var(--gold-soft); transform: translateY(-3px); }
.iq-more-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--gold-soft); border: 1px solid var(--gold-soft); color: var(--gold); margin-bottom: 18px; }
.iq-more-ic svg { width: 19px; height: 19px; }
.iq-more-card .imc-n { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.iq-more-card .imc-pro { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; color: var(--gold);
  border: 1px solid var(--gold-soft); border-radius: 5px; padding: 2px 5px; margin-left: 7px; vertical-align: middle; }
.iq-more-card .imc-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 9px; }
@media (prefers-reduced-motion: reduce) { .iq-more-card { transition: none; } .iq-more-card:hover { transform: none; } }
@media (max-width: 1040px) { .iq-more-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .iq-more-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .iq-more-grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .iq-more-grid { gap: 10px; } }