/* ============================================================================
   niftimobility.com — /iq  (niftimobility IQ)
   ----------------------------------------------------------------------------
   Editorial add-on for the intelligence hub and its articles. Additive only:
   every value derives from tokens.css / the inherited brand palette, so /iq
   reads as the same family as the rest of the site. Loaded per-page via the
   front-matter `css_extra: iq.css`, never globally.
   ========================================================================== */

/* ---------------------------------------------------------------- masthead --- */

.iq-mast {
  padding-block: clamp(3rem, 1.8rem + 6vw, 7rem) var(--s-7);
  border-bottom: 1px solid var(--line-2);
}
.iq-mast__eyebrow { margin-bottom: var(--s-4); }
.iq-mast .h1 { max-width: 20ch; }
.iq-mast__lead {
  max-width: 60ch;
  margin-top: var(--s-5);
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  text-wrap: pretty;
}
.iq-mast__note { margin-top: var(--s-5); color: var(--muted); max-width: 62ch; }

/* Small type-lockup that names the hub without leaning on any other brand. */
.iq-lockup { display: inline-flex; align-items: baseline; gap: .4rem; }
.iq-lockup b { font-weight: 800; letter-spacing: var(--tr-tight); }
.iq-lockup span {
  font-family: var(--display);
  color: var(--orange-d);
  letter-spacing: .02em;
}

/* -------------------------------------------------------------- trust band --- */

.trustband { padding-block: var(--s-7); }
.trustband__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
}
.stat {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.stat__n {
  font-family: var(--display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.stat__n em { font-style: normal; color: var(--orange-d); }
.stat__label { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.4; }
.trustband__src { margin-top: var(--s-5); color: var(--muted); font-size: var(--fs-xs); }

/* --------------------------------------------------------- article framework --- */

.iq-articles { padding-block: var(--section-y); }
.iq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.iq-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.iq-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: #f6d3ad; }
.iq-card__tag { margin-bottom: var(--s-4); }
.iq-card__thumb { margin-bottom: var(--s-5); border-radius: var(--r); overflow: hidden; }
.iq-card__thumb svg { display: block; width: 100%; height: auto; }
.iq-card .h3 { letter-spacing: var(--tr-tight); }
.iq-card .h3 a { color: inherit; text-decoration: none; }
.iq-card .h3 a:hover { color: var(--orange-d); }
.iq-card__dek { margin-top: var(--s-3); color: var(--ink-3); }
.iq-card__more { margin-top: auto; padding-top: var(--s-5); }
.iq-card--soon { background: var(--soft); border-style: dashed; border-color: #f6d3ad; }
.iq-card--soon .iq-card__dek { color: var(--ink-3); }

/* -------------------------------------------------------------- subscribe --- */

.iq-subscribe {
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--ink);
  color: #f4eee5;
  border-radius: var(--r-lg);
}
.iq-subscribe .h2 { color: #fff; }
.iq-subscribe p { color: #cfcbc4; max-width: 54ch; margin-top: var(--s-3); }
.iq-subscribe .footer-newsletter { margin-top: var(--s-5); max-width: 34rem; }
.iq-subscribe .footer-newsletter input {
  background: #232320; border-color: #3a3a36; color: #fff;
}
.iq-subscribe .footer-newsletter input::placeholder { color: #9a958d; }
.iq-subscribe .form-hint { color: #9a958d; font-size: var(--fs-xs); margin-top: var(--s-4); }

/* ------------------------------------------------------------- soft CTA ----- */

.iq-cta { padding-block: var(--section-y); }
.iq-cta__box {
  display: grid;
  gap: var(--s-5);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--wash);
}
@media (min-width: 760px) {
  .iq-cta__box { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.iq-cta__box .h3 { letter-spacing: var(--tr-tight); }
.iq-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ============================================================================
   THE SIZE-SCALE BALLOT  —  Article 2 hero + reusable figure
   Each dot is one company's size label for the exact same car, placed on the
   8-tier scale. Cars everyone agrees on form one column; contested cars scatter.
   Built as CSS grid (not raster) so it is sharp, responsive and readable to a
   screen reader from real text.
   ========================================================================== */

.ballot {
  --tiers: 8;
  margin: 0;
  padding: clamp(1rem, .5rem + 2vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
}
.ballot__inner { min-width: 640px; }

.ballot__scale {
  display: grid;
  grid-template-columns: var(--label-col, 8.5rem) repeat(var(--tiers), 1fr);
  align-items: end;
  gap: 0;
}
.ballot__scale--head { padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-2); }
.ballot__corner { font-size: var(--fs-xs); color: var(--muted); align-self: end; }
.ballot__tier {
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink-3);
  padding-inline: 2px;
}
.ballot__tier b { display: block; font-weight: 700; color: var(--ink); }
.ballot__tier--edge { color: var(--muted); }

.ballot__row {
  display: grid;
  grid-template-columns: var(--label-col, 8.5rem) repeat(var(--tiers), 1fr);
  align-items: center;
  min-height: 3.25rem;
  border-bottom: 1px dashed var(--line-2);
}
.ballot__row:last-child { border-bottom: 0; }
.ballot__car {
  padding-right: var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.ballot__car b { display: block; color: var(--ink); font-weight: 700; }
.ballot__car span { color: var(--muted); font-size: var(--fs-xs); }

.ballot__cell {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #f2ede4;
}
.ballot__cell:first-of-type { border-left: 0; }

/* The cell where every company agrees — tinted so consensus reads as a column. */
.ballot__cell--consensus { background: rgba(21,21,21,.05); }

/* A vote: one company's classification of this exact car. */
.vote {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.625rem; font-weight: 700;
  box-shadow: var(--shadow-1);
}
.vote--agree { background: var(--ink); color: #fff; }
.vote--contested { background: var(--orange); color: #fff; }
.vote--stack {
  width: auto; min-width: 20px; height: 20px;
  padding: 0 7px; border-radius: var(--r-pill);
}
.vote--ghost { background: transparent; box-shadow: none; color: transparent; }

/* Spread bracket under a contested row. */
.ballot__row--contested { background: linear-gradient(0deg, rgba(249,115,22,.05), rgba(249,115,22,.05)); }

.ballot__legend {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-sm); color: var(--ink-3);
}
.ballot__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.ballot__key { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ballot__key--agree { background: var(--ink); }
.ballot__key--contested { background: var(--orange); }

.ballot__caption { margin-top: var(--s-4); color: var(--muted); font-size: var(--fs-xs); }

/* Secondary contested example, shown as a stat rather than plotted (exact
   per-company tiers not in the public set). */
.iq-example {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--orange);
  border-radius: var(--r);
  background: var(--soft);
}
.iq-example b { color: var(--ink); }

/* -------------------------------------------------------- ghost-fleet cards --- */

.marquee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.marquee-card {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.marquee-card__car { font-weight: 700; color: var(--ink); }
.marquee-card__meta { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-xs); }
.marquee-card__count {
  margin-top: var(--s-4);
  font-family: var(--display);
  font-size: 1.5rem; line-height: 1;
  color: var(--orange-d);
}
.marquee-card__count span { font-family: var(--body); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; display:block; margin-top: 4px; }

.iq-datalink { margin-top: var(--s-5); font-size: var(--fs-sm); }

/* Gate / conversion callout used on both articles. */
.iq-gate {
  margin-block: var(--s-7);
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--wash);
}
.iq-gate .h3 { letter-spacing: var(--tr-tight); }
.iq-gate p { margin-top: var(--s-3); color: var(--ink-3); max-width: 60ch; }
.iq-gate__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ------------------------------------------------------------- misc article --- */

.article-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--muted); font-size: var(--fs-sm);
}
.article-kicker a { color: var(--muted); }
.article-kicker a:hover { color: var(--orange-d); }

/* ===================================================== IQ interactive ===== */
.iqx{margin-top:var(--s-6)}
.iqx-cars{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.iqx-chip{font:inherit;font-size:.95rem;font-weight:700;color:var(--ink-2);background:var(--paper);border:1.5px solid var(--line-2);border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.iqx-chip:hover{border-color:#f6b98a}
.iqx-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.iqx-scaleWrap{overflow-x:auto;padding:.25rem;margin:0 -.25rem}
.iqx-scale{display:grid;grid-template-columns:repeat(8,minmax(74px,1fr));gap:.4rem;min-width:640px}
.iqx-col{display:flex;flex-direction:column}
.iqx-tier{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;padding:.4rem .15rem;border-bottom:2px solid #ece5da;min-height:2.4em;line-height:1.15}
.iqx-cell{min-height:150px;display:flex;flex-direction:column-reverse;align-items:center;gap:.35rem;padding:.6rem .3rem;border-radius:8px}
.iqx-cell.hot{background:#fff4ea}
.iqx-cell.cool{background:#eef5ef}
.iqx-dot{width:26px;height:26px;border-radius:50%;flex:none;opacity:0;transform:translateY(-14px) scale(.7);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.iqx-dot.in{opacity:1;transform:none}
.iqx-dot.hot{background:var(--orange);box-shadow:0 2px 0 #d95f10}
.iqx-dot.cool{background:var(--green);box-shadow:0 2px 0 #145730}
.iqx-verdict{font-size:1.1rem;font-weight:700;line-height:1.4;margin-top:1.1rem;min-height:2.6em}
.iqx-verdict b{color:var(--orange-d)}
.iqx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:.4rem}
.iqx-replay{font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);border-radius:999px;padding:.45rem .9rem;cursor:pointer}
.iqx-replay:hover{border-color:#f6b98a}
.iqx-note{font-size:.8rem;color:var(--muted)}

/* cross-country: one company, same car, different country */
.iqx-cc{display:grid;gap:1.25rem}
@media(min-width:820px){.iqx-cc{grid-template-columns:repeat(3,1fr)}}
.iqx-cc-item{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:1.1rem 1.15rem}
.iqx-cc-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.7rem}
.iqx-cc-car{font-weight:800;letter-spacing:var(--tr-tight);font-size:1.05rem}
.iqx-cc-co{font-size:.75rem;font-weight:700;color:var(--orange-d);text-transform:uppercase;letter-spacing:.1em}
.iqx-cc-row{display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:.6rem;margin-top:.5rem}
.iqx-cc-country{font-size:.82rem;font-weight:600;color:var(--ink-2);text-align:right}
.iqx-cc-bar{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease}
.is-in .iqx-cc-bar{opacity:1;transform:none}
.iqx-cc-seg{height:26px;background:#efe9df;border-radius:3px;position:relative}
.iqx-cc-seg.on{background:var(--orange)}
.iqx-cc-lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:.62rem;font-weight:800;color:#fff}
@media(max-width:560px){.iqx-cc-lbl{display:none}}

/* ghost fleet big-number panel */
.iq-ghost{background:#060606;color:#fff;border-radius:16px;padding:clamp(2rem,1rem + 5vw,4rem);text-align:center}
.iq-ghost__eyebrow{color:var(--orange);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.iq-ghost__big{font-family:var(--display);font-size:clamp(3.4rem,2rem + 13vw,8.5rem);line-height:.9;margin:.5rem 0;color:#fff}
.iq-ghost__big em{color:var(--orange);font-style:normal}
.iq-ghost__sub{font-size:clamp(1.05rem,.9rem + 1vw,1.4rem);font-weight:700;max-width:26ch;margin:.5rem auto 0}
.iq-ghost__fine{color:#b9b4ac;max-width:54ch;margin:1.1rem auto 0}
.iq-ghost__fine strong{color:#fff}
.iq-ghost__cta{margin-top:1.6rem}
.iq-ghost .link-arrow{color:var(--orange)}

/* hero framing stat strip */
.iq-strip{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:var(--s-5);font-weight:700;color:var(--ink-2)}
.iq-strip b{color:var(--orange-d)}
.iq-stakes__grid{display:grid;gap:var(--s-4);margin-top:var(--s-5)}
@media(min-width:720px){.iq-stakes__grid{grid-template-columns:repeat(3,1fr)}}
.iq-stakes__card{background:var(--paper);border:1px solid var(--line-2);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:1.1rem 1.2rem}
.iq-stakes__card b{display:block;font-size:1.05rem;letter-spacing:var(--tr-tight);margin-bottom:.2rem}
.iq-stakes__card span{color:var(--ink-3);font-size:.95rem}

/* IQ articles: drop the off-center rail, center a roomier column (Brett: too narrow) */
.page-iq-doc .article-rail{display:none !important}
.page-iq-doc .article-layout{max-width:900px;display:block;margin-inline:auto}
@media(min-width:1180px){.page-iq-doc .article-layout{max-width:940px}}
.page-iq-doc .article-body{max-width:72ch;margin-inline:auto}
.page-iq-doc .article__hero,.page-iq-doc .article-header,.page-iq-doc .marquee-grid,.page-iq-doc .iq-gate{max-width:none}

/* ghost-fleet marquee cards — stronger, "discontinued" treatment */
.marquee-card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line-2);border-top:3px solid var(--orange);border-radius:0 0 12px 12px;padding:2.1rem 1.25rem 1.15rem;transition:box-shadow .15s,transform .15s}
.marquee-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.marquee-card::before{content:"OUT OF PRODUCTION";position:absolute;top:0;left:0;background:var(--orange);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.09em;padding:.28rem .6rem;border-radius:0 0 8px 0}
.marquee-card__car{font-family:var(--display);font-size:1.4rem;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.marquee-card__meta{margin-top:.45rem;color:var(--muted);font-size:.82rem;line-height:1.4}
.marquee-card__count{margin-top:1.05rem;padding-top:.95rem;border-top:1px solid var(--line-2);color:var(--orange-d);font-family:var(--display);font-size:2.1rem;line-height:1;display:flex;align-items:baseline;gap:.45rem}
.marquee-card__count span:last-child{font-family:var(--body);font-size:.78rem;color:var(--ink-3);font-weight:700;margin:0}