/* ============================================================================
   AI READINESS DIAGNOSTIC, RESULTS DASHBOARD (v2)
   A more confident, more legible results presentation. Depends on tokens.css
   + app.css. New pieces: the readiness DIAL (echoes the concentric mark),
   the AT-A-GLANCE RAG tiles, and group cards with a SCORE METER.
   Everything reveals progressively, "calculated, then disclosed".
   ========================================================================== */

.rv2 { background: var(--ink-1000); color: #fff; min-height: 100%; font-family: var(--font-sans); }

/* shared reveal primitive, toggled to .in by the reveal observer ----------*/
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.rv2__wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter-mobile); }
@media (min-width: 760px) { .rv2__wrap { padding: 0 var(--gutter-desk); } }

/* ===========================================================================
   1 · VERDICT HERO ,  level + summary  +  readiness dial
   ========================================================================= */
.rv2-hero {
  background: radial-gradient(120% 120% at 80% -10%, #16203a 0%, var(--ink-900) 55%);
  border-bottom: 1px solid var(--ink-600);
}
.rv2-hero__inner { max-width: 1080px; margin: 0 auto; padding: var(--space-10) var(--gutter-mobile) var(--space-12); display: grid; gap: var(--space-10); }
.rv2-hero__top { display: flex; align-items: center; gap: var(--space-3); }
.rv2-hero__top svg { width: 26px; height: 26px; }
.rv2-hero__top span { font-weight: var(--w-extrabold); letter-spacing: var(--ls-heading); font-size: var(--fs-sm); }

.rv2-verdict { display: grid; gap: var(--space-5); align-content: center; }
.rv2-verdict .level { color: var(--ink-200); }
.rv2-verdict .level::before { background: var(--ink-400); }
.rv2-verdict h1 {
  font-size: clamp(2.6rem, 9vw, 4.5rem); font-weight: var(--w-extrabold); line-height: 0.98;
  letter-spacing: var(--ls-display); margin: 0;
}
.rv2-verdict h1 em { font-style: normal; color: var(--_rag, var(--brand-red)); }
.rv2-verdict__sub { color: var(--ink-200); font-size: var(--fs-lead); margin: 0; max-width: 46ch; line-height: 1.55; }
.rv2-verdict__for { font-size: var(--fs-sm); color: var(--ink-300); font-weight: var(--w-semibold); }
.rv2-verdict__for b { color: #fff; }

/* the dial */
.rv2-dial { display: grid; place-items: center; }
.rv2-dial__svg { width: 100%; max-width: 280px; overflow: visible; }
.rv2-dial__track { fill: none; stroke: var(--ink-700); }
.rv2-dial__value { fill: none; stroke: var(--_rag, var(--brand-red)); stroke-linecap: round; transition: stroke-dashoffset var(--dur-reveal) var(--ease-out); }
.rv2-dial__ring { fill: none; stroke: var(--ink-700); opacity: 0.6; }
.rv2-dial__center { text-anchor: middle; }
.rv2-dial__num { font-weight: var(--w-extrabold); fill: #fff; font-family: var(--font-sans); }
.rv2-dial__den { font-weight: var(--w-semibold); fill: var(--ink-300); font-family: var(--font-sans); }
.rv2-dial__cap { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; fill: var(--_rag, var(--brand-red)); font-family: var(--font-sans); }

@media (min-width: 760px) {
  .rv2-hero__main { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); align-items: center; }
  .rv2-hero__inner { padding: var(--space-16) var(--gutter-desk) var(--space-16); }
}

/* ===========================================================================
   2 · AT A GLANCE ,  five bold RAG tiles
   ========================================================================= */
.rv2-section { padding: var(--space-12) 0; }
.rv2-section__head {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6);
  font-size: var(--fs-eyebrow); font-weight: var(--w-bold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-300);
}
.rv2-section__head::before { content: ""; width: 26px; height: 2px; background: var(--brand-red); }
.rv2-section__head .count { margin-left: auto; color: var(--ink-400); letter-spacing: 0; text-transform: none; font-weight: var(--w-semibold); }

.glance { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 560px) { .glance { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .glance { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); } }

.gtile {
  position: relative; overflow: hidden;
  background: var(--ink-800); border: 1px solid var(--ink-600);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: grid; gap: var(--space-4); align-content: space-between; min-height: 150px;
}
/* the RAG presence: a saturated wash + a thick top accent bar */
.gtile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--_rag); }
.gtile { box-shadow: inset 0 0 0 100px transparent; }
.gtile.is-rag-low  { background: linear-gradient(180deg, var(--rag-low-soft), transparent 60%), var(--ink-800); --_rag: var(--rag-low); }
.gtile.is-rag-mid  { background: linear-gradient(180deg, var(--rag-mid-soft), transparent 60%), var(--ink-800); --_rag: var(--rag-mid); }
.gtile.is-rag-high { background: linear-gradient(180deg, var(--rag-high-soft), transparent 60%), var(--ink-800); --_rag: var(--rag-high); }

.gtile__name { font-size: var(--fs-sm); font-weight: var(--w-bold); color: #fff; letter-spacing: -0.01em; line-height: 1.25; }
.gtile__group { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--ink-300); font-weight: var(--w-semibold); }
.gtile__group i { width: 8px; height: 8px; border-radius: 50%; background: var(--_g); }
.gtile__rag { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.gtile__status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-eyebrow); font-weight: var(--w-extrabold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--_rag);
}
.gtile__status .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--_rag); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_rag) 22%, transparent); }
.gtile__score { font-size: var(--fs-h2); font-weight: var(--w-extrabold); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.gtile__score span { font-size: var(--fs-sm); color: var(--ink-300); font-weight: var(--w-medium); }

/* ===========================================================================
   3 · THE SHAPE (radar) , reuse renderRadar; just the framing here
   ========================================================================= */
.rv2-shape { display: grid; gap: var(--space-8); align-items: center; }
.rv2-shape__radar { max-width: 620px; margin: 0 auto; width: 100%; min-height: 300px; }
.rv2-shape__aside p { color: var(--ink-200); line-height: 1.6; max-width: 42ch; }
.rv2-key { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.rv2-key span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--ink-100); }
.rv2-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--_g); flex: none; }
@media (min-width: 760px) { .rv2-shape { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-10); align-items: center; } }

/* ===========================================================================
   4 · BREAKDOWN ,  group cards with a score METER + expandable narrative
   ========================================================================= */
.rv2-cards { display: grid; gap: var(--space-4); }
.gcard {
  background: var(--ink-800); border: 1px solid var(--ink-600);
  border-left: 3px solid var(--_g, var(--brand-red)); border-radius: var(--radius-lg);
  overflow: hidden;
}
.gcard__head { display: grid; gap: var(--space-4); padding: var(--space-6); cursor: pointer; width: 100%; text-align: left; background: transparent; border: 0; color: inherit; font-family: var(--font-sans); }
.gcard__top { display: flex; align-items: center; gap: var(--space-4); }
.gcard__name { flex: 1; font-size: var(--fs-lead); font-weight: var(--w-bold); color: #fff; letter-spacing: -0.01em; }
.gcard__status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-caption); font-weight: var(--w-extrabold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  color: var(--_rag); background: color-mix(in srgb, var(--_rag) 14%, transparent);
}
.gcard__status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--_rag); }
.gcard__chev { color: var(--ink-300); transition: transform var(--dur-base) var(--ease-out); flex: none; }
.gcard.is-open .gcard__chev { transform: rotate(180deg); }

/* the meter */
.gcard__meter { display: grid; gap: var(--space-2); }
.gcard__meterhead { display: flex; align-items: baseline; justify-content: space-between; }
.gcard__score { font-size: var(--fs-h3); font-weight: var(--w-extrabold); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.gcard__score span { font-size: var(--fs-sm); color: var(--ink-300); font-weight: var(--w-medium); }
.gcard__avg { font-size: var(--fs-sm); color: var(--ink-300); font-variant-numeric: tabular-nums; }
.meter { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--ink-600); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--radius-pill); background: var(--_rag); transition: width var(--dur-reveal) var(--ease-out); }
/* band boundary ticks (amber ≥53%, green ≥83% of the 0 to 3 scale) */
.meter__tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-900); opacity: 0.8; }

.gcard__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-in-out); }
.gcard.is-open .gcard__body { grid-template-rows: 1fr; }
.gcard__body > div { overflow: hidden; }
.gcard__narr { padding: 0 var(--space-6) var(--space-6); color: var(--ink-100); line-height: var(--lh-relaxed); }
.gcard__narr p { margin: 0 0 var(--space-3); max-width: 62ch; }
.gcard__hint { font-size: var(--fs-sm); color: var(--ink-400); padding: 0 var(--space-6) var(--space-5); }
.gcard.is-open .gcard__hint { display: none; }

/* ===========================================================================
   5 · CTAs
   ========================================================================= */
/* Flexbox, not grid: stacked on mobile, side-by-side on desktop. Avoids a
   grid auto-placement quirk that piled both buttons into one cell. */
.rv2-cta { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0 var(--space-20); }
@media (min-width: 560px) { .rv2-cta { flex-direction: row; max-width: 560px; } }
/* both CTAs fill their space identically (an <a> and a <button> size
   differently without an explicit box model), and the secondary button sits
   on a dark surface so its text + outline need the light treatment. */
.rv2-cta .btn { box-sizing: border-box; flex: 1 1 0; width: 100%; min-width: 0; }
.rv2-cta .btn--secondary { color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-500); }
.rv2-cta .btn--secondary:hover { box-shadow: inset 0 0 0 1.5px #fff; }

/* ===========================================================================
   6 · SEND ME MY RESULTS  (V3: email capture moved here, off the landing form)
   ========================================================================= */
.rm-send { margin: 0 0 var(--space-5); }
.rm-send__card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start;
  background: var(--ink-900); border: 1px solid var(--ink-600);
  border-left: 3px solid var(--brand-red); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.rm-send__icon { width: 28px; height: 28px; flex: none; display: block; color: #fff; }
.rm-send__icon svg { display: block; }
.rm-send__icon--ok { width: 26px; height: 26px; color: var(--rag-high); }
.rm-send__main { min-width: 0; }
.rm-send__title {
  font-size: var(--fs-h3); font-weight: var(--w-extrabold); color: #fff;
  margin: 0 0 var(--space-2); letter-spacing: -0.01em; line-height: var(--lh-snug);
}
.rm-send__lead { font-size: var(--fs-body); color: var(--ink-200); line-height: 1.55; margin: 0 0 var(--space-5); max-width: 60ch; }
.rm-send__card.is-sent .rm-send__lead { margin-bottom: 0; }
.rm-send__opt { font-weight: var(--w-medium); color: var(--ink-400); text-transform: none; letter-spacing: 0; }
.rm-send__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0 0 var(--space-4); }
.rm-send__form .btn { box-sizing: border-box; width: 100%; }
@media (min-width: 560px) { .rm-send__form .btn { width: auto; } }
@media (max-width: 620px) {
  .rm-send__card { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }
  .rm-send__fields { grid-template-columns: 1fr; }
}