/* Home Team Construction — outcomes

   COMPONENT 07 — OUTCOMES
   SHIPPING SOURCE OF TRUTH.
   CORRECTED in Revision 11. The first version was a full-width white section
   with a two-column checklist. The live section is nothing of the sort: it is
   a DARK PANEL forming the left column of a two-column row, with the lead
   form as a white card on the right overlapping it. Single-column list, not
   two. Rebuilt to match.
   The eyebrow is white here, not red: #E63946 on --htc-grey-dark is 3.91:1,
   which fails AA at 13px. The live section runs it in red on near-black and
   has the same problem. The red is kept as the rule beside it.
   This block is the LEFT COLUMN of that row. Vertical and horizontal padding,
   no max-width, so it fills whatever column it is dropped into.

   Ported from deliverables/review.html <template id="cmp-outcomes">.
   Tokens come from tokens.css; only local overrides are declared here.
*/

/* Home Team Construction — 07 Outcomes panel */
.htc-outcomes{
  --htc-measure:52ch;

  box-sizing:border-box;
  width:100%;
  /* The section's vertical rhythm lives here, on the outer wrapper, not on the
     coloured panel. Without it the panel sits flush against the dark service
     section above and the two dark masses merge into one shape. The block owns
     this rather than depending on the Elementor container, so it holds however
     the container is padded. */
  /* Was `padding:var(--htc-s7) 0;`. This block relied on Elementor's container for its horizontal
     padding and 1400px centring; there is no such container in this theme, so it
     carries both itself. max-width puts the gutters outside the container width
     so content aligns with sections that centre an __inner at --htc-container. */
  padding:var(--htc-s7) var(--htc-s4);
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  font-family:var(--htc-font-body);
}

.htc-outcomes__panel{
  background:var(--htc-grey-dark);
  border-radius:var(--htc-radius);
  padding:var(--htc-s6);
}

.htc-outcomes *,
.htc-outcomes *::before,
.htc-outcomes *::after{ box-sizing:border-box; }

.htc-outcomes__eyebrow{
  display:flex;
  align-items:center;
  gap:var(--htc-s2);
  margin:0 0 var(--htc-s2);
  font-size:var(--htc-eyebrow);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--htc-white);
}
.htc-outcomes__eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:24px;
  height:2px;
  background:var(--htc-red);
}

.htc-outcomes__title{
  margin:0 0 var(--htc-s3);
  font-size:var(--htc-h2);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--htc-white);
  max-width:18ch;
  text-wrap:balance;
}

.htc-outcomes__lead{
  margin:0 0 var(--htc-s5);
  font-size:var(--htc-lead);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:var(--htc-measure);
}

.htc-outcomes__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--htc-s3);
}
.htc-outcomes__list li{
  display:flex;
  align-items:flex-start;
  gap:var(--htc-s2);
  font-size:var(--htc-body);
  font-weight:600;
  line-height:1.5;
  color:var(--htc-white);
}
.htc-outcomes__list svg{ flex:0 0 auto; display:block; margin-top:3px; color:var(--htc-red); }

@media (max-width:1150px){
  .htc-outcomes{ padding:var(--htc-s6) 0; }
  .htc-outcomes__panel{ padding:var(--htc-s5); }
}

@media (max-width:767px){
  .htc-outcomes{ padding:var(--htc-s5) 0; }
  .htc-outcomes__panel{ padding:var(--htc-s4) var(--htc-s3); }
  .htc-outcomes__title{ max-width:none; }
  .htc-outcomes__list{ gap:var(--htc-s2); }
}