/* ==========================================================================
   bl-summary.css — the plan summary, built on the Loud! OOH insight-guide
   design system so a plan reads like the guides rather than like a form
   response: Montserrat 900 uppercase headings, navy and orange, tag pills,
   numbered sections, label/value price rows and a navy pull quote.
   ========================================================================== */
.bl-results{
  --sum-navy:#021234;
  --sum-orange:#FD4406;
  --sum-text:#021234;
  --sum-muted:#021234;
  --sum-soft:#021234;
  --sum-border:#e2e6ed;
  --sum-surface:#f5f5f7;
  --sum-face:#fff;
  --sum-radius:12px;
  --sum-shadow:0 1px 3px rgba(2, 18, 52, .06), 0 1px 2px rgba(2, 18, 52, .04);
  --sum-head-font:'Montserrat', system-ui, sans-serif;
  --sum-body-font:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --track-label:.045em;
  --track-subhead:.028em;
  --track-section:.018em;

  font-family:var(--sum-body-font);
  color:var(--sum-text);
}

/* ---------- header ---------- */
.bl-sum-head{ margin:0 0 24px; }
.bl-sum-eyebrow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 14px;
  font-size:.8125rem; color:var(--sum-soft);
}
.bl-sum-eyebrow span{
  padding:5px 10px;
  border-radius:999px;
  background:var(--sum-orange); color:#FFFFFF;
  font-family:var(--sum-head-font);
  font-size:.65625rem; font-weight:800;
  letter-spacing:var(--track-label); text-transform:uppercase;
}
.bl-sum-title{
  margin:0 0 12px;
  font-family:var(--sum-head-font);
  font-weight:900; text-transform:uppercase;
  letter-spacing:var(--track-section);
  font-size:clamp(1.5rem,1.4vw + 1.1rem,2.25rem);
  line-height:1.08;
  color:var(--sum-navy);
  text-wrap:balance;
}
.bl-sum-lead{
  margin:0; max-width:46rem;
  font-size:1.0625rem; line-height:1.6; color:var(--sum-text);
}

/* ---------- headline numbers ---------- */
.bl-sum-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:10px;
  margin:24px 0;
}
.bl-sum-stat{
  display:flex; flex-direction:column; gap:3px;
  padding:16px 16px 15px;
  border:1px solid var(--sum-border);
  border-radius:var(--sum-radius);
  background:var(--sum-face);
  box-shadow:var(--sum-shadow);
}
.bl-sum-stat.is-accent{ border-color:rgba(253, 68, 6, .4); background:linear-gradient(180deg,rgba(253, 68, 6, .05),transparent 70%); }
.bl-sum-stat-value{
  font-family:var(--sum-head-font);
  font-size:clamp(1.35rem,1.1vw + 1rem,1.75rem);
  font-weight:900; line-height:1; letter-spacing:-.02em;
  color:var(--sum-navy);
  font-variant-numeric:tabular-nums;
}
.bl-sum-stat.is-accent .bl-sum-stat-value{ color:var(--sum-orange); }
.bl-sum-stat-label{
  font-size:.6875rem; font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--sum-soft);
}
.bl-sum-stat-note{ font-size:.75rem; line-height:1.45; color:var(--sum-muted); }

/* ---------- the reasoning ---------- */
.bl-sum-quote{
  position:relative;
  margin:24px 0;
  padding:22px 24px 22px 3.25rem;
  border:0; border-radius:var(--sum-radius);
  background:var(--sum-navy);
  box-shadow:0 2px 16px rgba(2, 18, 52, .18);
  font-weight:600; font-size:1.0625rem; line-height:1.55;
  letter-spacing:-.015em;
  color:#FFFFFF;
  max-width:46rem;
}
.bl-sum-quote::before{
  content:"“";
  position:absolute; left:1.15rem; top:.55rem;
  font-family:var(--sum-head-font); font-weight:900;
  font-size:2.75rem; line-height:1; color:var(--sum-orange);
}

/* ---------- numbered sections ---------- */
.bl-sum-section{
  margin:32px 0;
  padding-top:26px;
  border-top:1px solid var(--sum-border);
}
.bl-sum-section.is-quiet{ background:var(--sum-surface); margin-inline:-14px; padding:24px 14px; border-radius:var(--sum-radius); border-top:0; }
.bl-sum-section-head{ display:flex; gap:14px; align-items:flex-start; margin:0 0 16px; }
.bl-sum-section-num{
  flex:none;
  font-family:var(--sum-head-font);
  font-size:1.5rem; font-weight:900; line-height:1;
  letter-spacing:-.02em; color:var(--sum-orange);
}
.bl-sum-section-title{
  margin:0 0 5px;
  font-family:var(--sum-head-font);
  font-size:1.125rem; font-weight:900;
  text-transform:uppercase; letter-spacing:var(--track-subhead);
  line-height:1.18; color:var(--sum-navy);
}
.bl-sum-section-lead{ margin:0; max-width:46rem; font-size:.9375rem; line-height:1.6; color:var(--sum-muted); }

/* ---------- format cards ---------- */
.bl-sum-formats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.bl-sum-format{
  display:flex; flex-direction:column;
  border:1px solid var(--sum-border);
  border-radius:var(--sum-radius);
  background:var(--sum-face);
  box-shadow:var(--sum-shadow);
  overflow:hidden;
}
.bl-sum-format-body{ padding:18px 20px 14px; }
.bl-sum-format-tag{
  display:inline-block; margin:0 0 11px; padding:4px 9px;
  border:1px solid var(--sum-border); border-radius:4px;
  font-size:.65625rem; font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--sum-soft);
}
.bl-sum-format-title{
  margin:0 0 9px;
  font-family:var(--sum-head-font);
  font-size:1.0625rem; font-weight:900;
  text-transform:uppercase; letter-spacing:var(--track-subhead);
  line-height:1.16; color:var(--sum-navy);
}
.bl-sum-format-text{ margin:0; font-size:.875rem; line-height:1.55; color:var(--sum-muted); }
.bl-sum-format-prices{
  display:flex; flex-direction:column; gap:7px;
  padding:14px 20px;
  border-top:1px solid var(--sum-border);
  background:linear-gradient(180deg,rgba(245,245,247,.7),transparent);
}
.bl-sum-format-flag{
  margin:0; padding:11px 20px 14px;
  border-top:1px dashed var(--sum-border);
  font-size:.75rem; line-height:1.5; color:var(--sum-muted); font-style:italic;
}

/* ---------- label / value rows ---------- */
.bl-sum-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:.84375rem;
}
.bl-sum-row-label{ color:var(--sum-muted); }
.bl-sum-row-value{
  font-weight:700; color:var(--sum-navy);
  text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.bl-sum-row.is-accent .bl-sum-row-value{ color:var(--sum-orange); }
.bl-sum-row.is-good .bl-sum-row-value{ color:#1E7A55; }
.bl-sum-row.is-warn .bl-sum-row-value{ color:#FD4406; }
.bl-sum-row.is-total{
  margin-top:4px; padding-top:9px;
  border-top:1px solid var(--sum-border);
  font-size:.9375rem;
}
.bl-sum-row.is-total .bl-sum-row-label{ font-weight:600; color:var(--sum-navy); }

.bl-sum-totals{
  display:flex; flex-direction:column; gap:8px;
  margin-top:12px; padding:18px 20px;
  border:1px solid var(--sum-border); border-radius:var(--sum-radius);
  background:var(--sum-face); box-shadow:var(--sum-shadow);
}

/* ---------- audience ---------- */
.bl-sum-audience{ display:grid; grid-template-columns:1.35fr 1fr; gap:12px; }
.bl-sum-audience-figure{
  padding:20px;
  border:1px solid rgba(253, 68, 6, .28); border-radius:var(--sum-radius);
  background:linear-gradient(180deg,rgba(253, 68, 6, .055),transparent 65%);
}
.bl-sum-audience-figure b{
  display:block;
  font-family:var(--sum-head-font);
  font-size:clamp(1.4rem,1.6vw + 1rem,2rem);
  font-weight:900; line-height:1.05; letter-spacing:-.02em;
  color:var(--sum-navy); font-variant-numeric:tabular-nums;
}
/* the caption only — must not also catch the confidence pill below it */
.bl-sum-audience-figure > .bl-sum-caption{
  display:block; margin-top:7px;
  font-size:.6875rem; font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--sum-soft);
}
.bl-sum-audience-figure p{ margin:9px 0 12px; font-size:.875rem; line-height:1.55; color:var(--sum-muted); }
.bl-sum-tag{
  display:inline-block; width:fit-content; padding:4px 10px;
  border-radius:999px; background:var(--sum-navy); color:#FFFFFF;
  font-size:.65625rem; font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase;
}
.bl-sum-audience-side{
  display:flex; flex-direction:column; gap:9px; justify-content:center;
  padding:20px;
  border:1px solid var(--sum-border); border-radius:var(--sum-radius);
  background:var(--sum-face);
}
.bl-sum-note{
  margin:14px 0 0; max-width:46rem;
  font-size:.8125rem; line-height:1.6; color:var(--sum-muted);
}
.bl-sum-note strong{ color:var(--sum-navy); }

/* ---------- trade-off ---------- */
.bl-sum-tradeoff{
  padding:16px 18px;
  border:1px solid var(--sum-border); border-left:3px solid var(--sum-orange);
  border-radius:var(--sum-radius);
  background:var(--sum-face); box-shadow:var(--sum-shadow);
}
.bl-sum-tradeoff p{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--sum-text); }
.bl-sum-geo{ margin-top:12px; padding:14px 18px; border:1px solid var(--sum-border); border-radius:var(--sum-radius); background:var(--sum-face); }

/* ---------- alternative scenarios ---------- */
.bl-sum-alts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.bl-sum-alt{
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:18px 20px; text-align:left; cursor:pointer;
  border:1px solid var(--sum-border); border-radius:var(--sum-radius);
  background:var(--sum-face); box-shadow:var(--sum-shadow);
  font:inherit; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bl-sum-alt:hover{ border-color:var(--sum-orange); transform:translateY(-2px); box-shadow:0 8px 22px -14px rgba(2, 18, 52, .45); }
.bl-sum-alt:focus-visible{ outline:2px solid var(--sum-orange); outline-offset:2px; }
.bl-sum-alt-meta{
  display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 14px;
}
.bl-sum-alt-meta span{
  padding:4px 9px; border-radius:4px;
  background:var(--sum-surface);
  font-size:.75rem; font-weight:600; color:var(--sum-navy);
  font-variant-numeric:tabular-nums;
}
.bl-sum-alt-cta{
  margin-top:auto;
  font-size:.8125rem; font-weight:700;
  letter-spacing:var(--track-subhead); text-transform:uppercase;
  color:var(--sum-orange);
}
.bl-sum-alt-cta i{ font-style:normal; display:inline-block; transition:transform .2s ease; }
.bl-sum-alt:hover .bl-sum-alt-cta i{ transform:translateX(3px); }

/* ---------- caveats ---------- */
.bl-sum-caveats{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.bl-sum-caveats li{
  padding-left:17px; position:relative;
  font-size:.8125rem; line-height:1.6; color:var(--sum-muted);
}
.bl-sum-caveats li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:2px; background:var(--sum-orange);
}
.bl-sum-caveats b{ color:var(--sum-navy); font-weight:650; }

/* ---------- foot ---------- */
.bl-sum-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--sum-border);
}
.bl-sum-foot span{ font-size:.8125rem; color:var(--sum-soft); }

@media (max-width:760px){
  .bl-sum-audience{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .bl-sum-stats{ grid-template-columns:repeat(2,1fr); }
  .bl-sum-quote{ padding:20px 18px 20px 2.75rem; font-size:1rem; }
  .bl-sum-section{ margin:26px 0; padding-top:22px; }
}
@media (prefers-reduced-motion:reduce){
  .bl-sum-alt, .bl-sum-alt-cta i{ transition:none; }
}

/* The sticky site chrome overlaps anything scrolled to the top of the
   viewport, so give the summary a landing offset. */
#bl-results{ scroll-margin-top: calc(var(--lo-chrome-h, 72px) + 20px); }

/* ==========================================================================
   Take this plan with you — the single send block, last in the summary.
   One email form on the page: you read the plan, act on it, then take it.
   ========================================================================== */
.bl-sum-send{
  /* anchored from the "Send this plan to a planner" CTA — clear the sticky nav */
  scroll-margin-top:calc(var(--lo-chrome-h, 72px) + 20px);
  margin:30px 0 0;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--sum-border);
  border-radius:var(--sum-radius);
  background:var(--sum-face);
  box-shadow:var(--sum-shadow);
}
.bl-sum-send h3{
  margin:0 0 6px;
  font-family:var(--sum-head-font);
  font-size:1.0625rem; font-weight:900;
  text-transform:uppercase; letter-spacing:var(--track-subhead);
  color:var(--sum-navy);
}
.bl-sum-send-lead{
  margin:0 0 16px; max-width:52ch;
  font-size:.9375rem; line-height:1.6; color:var(--sum-muted);
}
.bl-sum-send .bl-ai-lead-row{
  display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end;
}
.bl-sum-send .bl-ai-field{ display:grid; gap:5px; min-width:0; }
.bl-sum-send .bl-ai-field span{
  font-size:.6875rem; font-weight:700;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--sum-soft);
}
.bl-sum-send .bl-ai-field em{
  font-style:normal; text-transform:none; letter-spacing:0; font-weight:600; opacity:.75;
}
.bl-sum-send .bl-ai-field input{
  width:100%; padding:11px 13px;
  border:1px solid rgba(2, 18, 52, .18); border-radius:9px;
  background:#fff; color:var(--sum-navy); font:inherit; font-size:.9375rem;
}
.bl-sum-send .bl-ai-field input:focus-visible{
  outline:2px solid var(--sum-orange); outline-offset:1px; border-color:var(--sum-orange);
}
.bl-sum-send .bl-btn{
  white-space:nowrap;
  /* WCAG 2.2 AA 2.5.8 comfortable target on touch */
  min-height:48px;
}
.bl-sum-send .bl-ai-error{ margin:10px 0 0; font-size:.875rem; color:var(--block,#FD4406); }
.bl-sum-send .bl-ai-done{ margin:10px 0 0; font-size:.875rem; color:var(--align,#1E7A55); }

@media (max-width:760px){
  .bl-sum-send .bl-ai-lead-row{ grid-template-columns:1fr 1fr; }
  .bl-sum-send .bl-btn{ grid-column:1 / -1; width:100%; min-height:50px; }
}
@media (max-width:460px){
  .bl-sum-send .bl-ai-lead-row{ grid-template-columns:1fr; }
}

/* ---- plan score: earned, not assumed (point 2 + 4) ---- */
.bl-sum-score{
  margin:18px 0; padding:20px; background:var(--sum-face);
  border:1px solid var(--sum-border); border-radius:var(--sum-radius);
  box-shadow:var(--sum-shadow);
}
.bl-sum-score-head{ display:flex; gap:18px; align-items:flex-start; }
.bl-sum-score-num{
  flex:0 0 auto; display:flex; align-items:baseline; gap:2px;
  padding:10px 16px; background:var(--sum-navy); color:#FFFFFF; border-radius:10px;
}
.bl-sum-score-num b{ font-family:var(--sum-head-font); font-size:2rem; line-height:1; font-weight:800; }
.bl-sum-score-num span{ font-size:.8125rem; opacity:.75; }
.bl-sum-score-label{
  margin:2px 0 4px; font-family:var(--sum-head-font); font-weight:800;
  font-size:1.0625rem; color:var(--sum-navy);
}
.bl-sum-score-why{ margin:0; font-size:.8125rem; line-height:1.5; color:var(--sum-muted); }
.bl-sum-score-bars{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px; }
.bl-sum-score-bar-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.8125rem; font-weight:700; color:var(--sum-text); margin-bottom:5px;
}
.bl-sum-score-bar-top b{ font-variant-numeric:tabular-nums; color:var(--sum-navy); }
.bl-sum-score-bar{
  height:8px; border-radius:99px; background:var(--sum-surface);
  border:1px solid var(--sum-border); overflow:hidden;
}
.bl-sum-score-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--sum-navy),#24416e);
}
.bl-sum-score-note{ margin:5px 0 0; font-size:.75rem; line-height:1.45; color:var(--sum-soft); }

/* ---- per-line detail rows (point 1) ---- */
.bl-sum-format-detail{
  margin:12px 0 0; padding:10px 12px; background:var(--sum-surface);
  border-radius:8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:6px 16px;
}
.bl-sum-format-detail > div{ display:flex; justify-content:space-between; gap:8px; font-size:.75rem; }
.bl-sum-format-detail dt{ color:var(--sum-soft); }
.bl-sum-format-detail dd{ margin:0; font-weight:700; color:var(--sum-text); font-variant-numeric:tabular-nums; text-align:right; }

/* ---- alternative comparison table (point 5) ---- */
.bl-sum-compare-wrap{ overflow-x:auto; margin:0 0 14px; }
.bl-sum-compare{
  width:100%; border-collapse:collapse; font-size:.8125rem; background:var(--sum-face);
}
.bl-sum-compare caption{
  caption-side:top; text-align:left; font-size:.75rem; color:var(--sum-soft);
  padding:0 0 8px;
}
.bl-sum-compare th, .bl-sum-compare td{
  padding:10px 12px; text-align:left; border-bottom:1px solid var(--sum-border);
  font-variant-numeric:tabular-nums; vertical-align:top;
}
.bl-sum-compare thead th{
  font-family:var(--sum-head-font); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sum-soft); background:var(--sum-surface);
}
.bl-sum-compare tbody th{ font-weight:700; color:var(--sum-navy); white-space:nowrap; }
.bl-sum-compare tr.is-current{ background:var(--sum-orange-soft,#FFF1EA); }
.bl-sum-compare tr.is-current th{ color:var(--sum-orange); }
.bl-sum-compare-badge{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px;
  background:var(--sum-orange); color:#FFFFFF; font-size:.625rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; vertical-align:middle;
}
.bl-sum-compare-notes{ margin:0 0 16px; padding:0; list-style:none; display:grid; gap:8px; }
.bl-sum-compare-notes li{
  font-size:.8125rem; line-height:1.5; color:var(--sum-muted);
  padding-left:12px; border-left:3px solid var(--sum-border);
}
.bl-sum-compare-notes b{ color:var(--sum-navy); }

/* ---- proof: case studies + pricing links (point 7) ---- */
.bl-sum-proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.bl-sum-proof-card{
  display:flex; flex-direction:column; gap:6px; padding:16px;
  background:var(--sum-face); border:1px solid var(--sum-border); border-radius:var(--sum-radius);
  text-decoration:none; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bl-sum-proof-card:hover{
  border-color:var(--sum-orange); transform:translateY(-2px);
  box-shadow:0 8px 22px -14px rgba(2, 18, 52, .45);
}
.bl-sum-proof-card h4{ font-family:var(--sum-head-font); font-size:.9375rem; color:var(--sum-navy); margin:0; }
.bl-sum-proof-card p{ margin:0; font-size:.8125rem; line-height:1.5; color:var(--sum-muted); flex:1; }
.bl-sum-proof-cta{ font-size:.75rem; font-weight:800; color:var(--sum-orange); letter-spacing:.03em; }
.bl-sum-proof-cta i{ font-style:normal; display:inline-block; transition:transform .2s ease; }
.bl-sum-proof-card:hover .bl-sum-proof-cta i{ transform:translateX(3px); }

@media (max-width:560px){
  .bl-sum-score-head{ flex-direction:column; gap:10px; }
  .bl-sum-format-detail{ grid-template-columns:1fr 1fr; }
}