/* ==========================================================================
   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:#0E1E3C;
  --sum-orange:#FF4A00;
  --sum-text:#1a2332;
  --sum-muted:#4d5969;
  --sum-soft:#6b7789;
  --sum-border:#e2e6ed;
  --sum-surface:#f5f5f7;
  --sum-face:#fff;
  --sum-radius:12px;
  --sum-shadow:0 1px 3px rgba(14,30,60,.06), 0 1px 2px rgba(14,30,60,.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:#fff;
  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(255,74,0,.4); background:linear-gradient(180deg,rgba(255,74,0,.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(14,30,60,.18);
  font-weight:600; font-size:1.0625rem; line-height:1.55;
  letter-spacing:-.015em;
  color:rgba(255,255,255,.94);
  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:#B3520E; }
.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(255,74,0,.28); border-radius:var(--sum-radius);
  background:linear-gradient(180deg,rgba(255,74,0,.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:#fff;
  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(14,30,60,.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(14,30,60,.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,#C2410C); }
.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; }
}