/* ══════════════════════════════════════════════════════════════
   GTM Deliverables — Growth Playbook Padding Refinement
   CSS PREFIX: hjws-gtm-deliv

   WHAT CHANGED IN THIS PASS:

   SCOPE: Final Deliverables panel (Panel 3) only.
   Specifically: the "Your Growth Playbook" card.
   Nothing else in the module changed.

   ─────────────────────────────────────────────
   ROOT CAUSE — WHY THE PLAYBOOK FELT TIGHT
   ─────────────────────────────────────────────

   The Growth Playbook card was inheriting the base
   .hjws-gtm-deliv__doc-card padding (18px 22px) and
   only overriding the top padding to accommodate the
   badge (padding-top: 32px).

   This produced:
     top: 32px    ← enough for the badge
     right: 22px  ← same as a standard action plan card
     bottom: 18px ← same as a standard action plan card
     left: 22px   ← same as a standard action plan card

   Problems:
   1. The badge at top: 14px / left: 22px sat at the
      very edge of the left padding — no breathing room
      between the badge text and the card's left border.
   2. The icon and title started at the same left indent
      as the badge — the card felt flat and unstructured.
   3. Bottom padding (18px) was too tight for a
      "premium consulting deliverable" treatment.
      The card description text sat close to the bottom
      border of the card.
   4. Right padding (22px) was insufficient — content
      crowded the right edge.

   ─────────────────────────────────────────────
   CHANGES — PLAYBOOK CARD PADDING
   ─────────────────────────────────────────────

   PREVIOUS:
     .hjws-gtm-deliv__doc-card--playbook {
       padding-top: 32px; /* only top overridden */
       /* inherits base: padding: 18px 22px */
     }
     Effective: top 32px / right 22px / bottom 18px / left 22px

   NEW:
     .hjws-gtm-deliv__doc-card--playbook {
       padding: 40px 32px 32px 32px;
     }
     top: 40px / right: 32px / bottom: 32px / left: 32px

   WHY THESE VALUES:

   TOP: 32px → 40px (+8px)
   The badge sits at top: 16px (updated, see below).
   At 40px top padding:
     — Badge top edge: 16px from card top
     — Badge bottom (approx 26px from top): 14px before
       the card icon starts at padding-top (40px)
   This creates a clear visual zone: badge → gap → content.
   The badge reads as a floating label above the document
   content rather than colliding with the icon below it.

   RIGHT: 22px → 32px (+10px)
   The right padding increase gives the title "Your Growth
   Playbook" and the description text generous breathing room
   on the right side. At 22px, longer text lines like the
   description were visually close to the right card border.
   At 32px the text column is clearly inset from both edges.

   BOTTOM: 18px → 32px (+14px)
   This is the most significant change. 14px increase creates
   a proper vertical rhythm: the description text has clear
   air below it before the card's border/shadow.
   At 18px the last line of description felt cramped.
   At 32px the card reads as a premium, well-crafted document
   with breathing room at every edge.

   LEFT: 22px → 32px (+10px)
   Matches the right padding for symmetric horizontal insets.
   The badge position is updated (left: 32px) to align with
   the new left edge of the card's content area.

   ─────────────────────────────────────────────
   CHANGES — BADGE POSITION
   ─────────────────────────────────────────────

   PREVIOUS:
     .hjws-gtm-deliv__playbook-badge {
       top: 14px;
       left: 22px; /* matched old left padding */
     }

   NEW:
     .hjws-gtm-deliv__playbook-badge {
       top: 16px;  /* +2px — slightly more air from top edge */
       left: 32px; /* matches new left padding */
     }

   WHY:
   The badge's left position should align with the card's
   internal content column — the same left indent as the
   icon and title below it. At left: 22px the badge was
   aligned with the old padding. At left: 32px it aligns
   with the new, more generous left padding.

   The top position moves from 14px to 16px — a 2px
   increase that gives the badge slightly more air from
   the card's top border. This creates a cleaner visual
   seam between the card border and the badge.

   ─────────────────────────────────────────────
   CHANGES — PANEL 3 ITEMS GAP
   ─────────────────────────────────────────────

   PREVIOUS: .hjws-gtm-deliv__panel-items--final { gap: 14px }
   NEW:      .hjws-gtm-deliv__panel-items--final { gap: 18px }

   WHY: The brief says "maintain consistent spacing between
   the Prioritized Action Plan card and the highlighted
   playbook." With the playbook card now taller (more padding),
   a 14px gap between the two cards creates visual compression
   — the cards feel stacked too tightly.

   Increasing to 18px gives both cards appropriate separation.
   This gap is the visual breath between "here's the plan"
   (Action Plan) and "here's your complete document" (Playbook).
   18px is consistent with the document card gap used in
   other premium card collections throughout the site.

   ─────────────────────────────────────────────
   MOBILE ADJUSTMENTS
   ─────────────────────────────────────────────

   At ≤559px (mobile), the playbook card previously had:
     padding-top: 28px (reduced from the desktop 32px)

   Now that the base padding is 40px 32px 32px 32px,
   the mobile override reduces proportionally:
     padding: 32px 20px 24px 20px

   This maintains the breathing room improvement on mobile
   while adapting to the narrower viewport:
   — top: 32px — enough for the badge (badge stays at top: 12px on mobile)
   — right/left: 20px — appropriate for mobile card width
   — bottom: 24px — improved over the previous 18px

   Badge position on mobile: top: 12px, left: 20px.

   ─────────────────────────────────────────────
   WHAT DID NOT CHANGE
   ─────────────────────────────────────────────
   — All three panel layouts (1, 2, 3) — structural
   — Panel label columns
   — Panel dividers
   — Standard deliverable items (Panels 1 and 2)
   — Action Plan card (.doc-card--action) — untouched
   — Playbook card visual design: border, background,
     shadow, hover states, border-radius
   — Playbook icon size and container
   — Playbook title styling (1.125rem / 800 / #043D93)
   — Playbook description styling
   — Badge visual design: background, border, font, color
   — Bottom highlight section
   — Section header
   — All animation states
   — All other responsive breakpoints (tablet 560-767px)
   — fieldsJson — zero changes
   — metaJson — zero changes
   — moduleHtml — zero changes
   — moduleJs — zero changes
══════════════════════════════════════════════════════════════ */

.hjws-gtm-deliv *,
.hjws-gtm-deliv *::before,
.hjws-gtm-deliv *::after {
  box-sizing: border-box;
}

/* ── Section wrapper ── */
.hjws-gtm-deliv {
  width: 100%;
  padding: 96px 40px 108px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border-top: 1px solid rgba(4,61,147,0.06);
  /* background-color: field-driven via inline style */
}

/* ── Inner container ── */
.hjws-gtm-deliv__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

/* ════════════════════════════════════════════
   SECTION HEADER — unchanged
════════════════════════════════════════════ */

.hjws-gtm-deliv__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
  max-width: 720px;
}

.hjws-gtm-deliv__eyebrow {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hjws-gtm-deliv__headline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #0f1729;
  margin: 0 0 20px 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hjws-gtm-deliv__copy {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  color: #374151;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ════════════════════════════════════════════
   THREE PANEL STACK — unchanged
════════════════════════════════════════════ */

.hjws-gtm-deliv__panels {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Panel base — unchanged ── */
.hjws-gtm-deliv__panel {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.50s ease,
    transform 0.50s ease,
    box-shadow 0.25s ease;
}

.hjws-gtm-deliv__panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Panel 1 */
.hjws-gtm-deliv__panel--1 {
  background: #ffffff;
  border: 1px solid rgba(4,61,147,0.09);
  box-shadow:
    0 2px 10px rgba(4,61,147,0.05),
    0 1px 3px rgba(0,0,0,0.03);
  margin-bottom: 10px;
}
.hjws-gtm-deliv__panel--1:hover {
  box-shadow:
    0 6px 24px rgba(4,61,147,0.08),
    0 1px 4px rgba(0,0,0,0.04);
}

/* Panel 2 */
.hjws-gtm-deliv__panel--2 {
  background: rgba(4,61,147,0.02);
  border: 1px solid rgba(4,61,147,0.13);
  box-shadow:
    0 4px 18px rgba(4,61,147,0.08),
    0 1px 4px rgba(0,0,0,0.04);
  margin-bottom: 10px;
}
.hjws-gtm-deliv__panel--2:hover {
  box-shadow:
    0 8px 28px rgba(4,61,147,0.11),
    0 2px 6px rgba(0,0,0,0.04);
}

/* Panel 3 */
.hjws-gtm-deliv__panel--3 {
  background: rgba(4,61,147,0.035);
  border: 1.5px solid rgba(4,61,147,0.20);
  box-shadow:
    0 8px 32px rgba(4,61,147,0.12),
    0 2px 8px rgba(0,0,0,0.04);
}
.hjws-gtm-deliv__panel--3:hover {
  box-shadow:
    0 12px 40px rgba(4,61,147,0.16),
    0 3px 10px rgba(0,0,0,0.05);
}

/* ── Panel label columns — unchanged ── */
.hjws-gtm-deliv__panel-label-col {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hjws-gtm-deliv__panel--1 .hjws-gtm-deliv__panel-label-col { background: rgba(4,61,147,0.025); }
.hjws-gtm-deliv__panel--2 .hjws-gtm-deliv__panel-label-col { background: rgba(4,61,147,0.045); }
.hjws-gtm-deliv__panel--3 .hjws-gtm-deliv__panel-label-col { background: rgba(4,61,147,0.07); }

.hjws-gtm-deliv__panel-num {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(4,61,147,0.40);
  margin-bottom: 4px;
}
.hjws-gtm-deliv__panel--2 .hjws-gtm-deliv__panel-num { color: rgba(4,61,147,0.55); }
.hjws-gtm-deliv__panel-num--final { color: #043D93 !important; }

.hjws-gtm-deliv__panel-label-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(4,61,147,0.08);
  border: 1px solid rgba(4,61,147,0.16);
  color: #043D93;
  flex-shrink: 0;
}
.hjws-gtm-deliv__panel-label-icon--final {
  background: rgba(4,61,147,0.14);
  border-color: rgba(4,61,147,0.28);
}

.hjws-gtm-deliv__panel-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(4,61,147,0.70);
  line-height: 1.2;
}
.hjws-gtm-deliv__panel-name--final { color: #043D93; }

.hjws-gtm-deliv__panel-intro {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.60;
  color: #64748b;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Panel dividers — unchanged ── */
.hjws-gtm-deliv__panel-divider {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
}
.hjws-gtm-deliv__panel--1 .hjws-gtm-deliv__panel-divider { background: rgba(4,61,147,0.08); }
.hjws-gtm-deliv__panel--2 .hjws-gtm-deliv__panel-divider { background: rgba(4,61,147,0.12); }
.hjws-gtm-deliv__panel-divider--final { background: rgba(4,61,147,0.20) !important; }

/* ── Panel items columns — unchanged except final gap ── */
.hjws-gtm-deliv__panel-items {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

/*
  CHANGED: gap 14px → 18px
  The Growth Playbook card is now taller due to increased
  padding. A 14px gap between the two final deliverable
  cards created visual compression — the cards felt
  stacked too tightly. 18px gives both cards appropriate
  separation while maintaining the visual relationship
  between "action plan" and "growth playbook."
*/
.hjws-gtm-deliv__panel-items--final {
  gap: 18px; /* CHANGED: 14px → 18px */
  padding: 24px 28px;
}

/* ════════════════════════════════════════════
   STANDARD DELIVERABLE ITEMS — unchanged
════════════════════════════════════════════ */

.hjws-gtm-deliv__item--standard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(4,61,147,0.02);
  border-left: 2.5px solid rgba(4,61,147,0.14);
  border-radius: 0 8px 8px 0;
  cursor: default;
  transition:
    border-left-color 0.22s ease,
    background 0.22s ease;
}
.hjws-gtm-deliv__item--standard:hover {
  border-left-color: rgba(4,61,147,0.35);
  background: rgba(4,61,147,0.045);
}
.hjws-gtm-deliv__panel--2 .hjws-gtm-deliv__item--standard {
  background: rgba(4,61,147,0.03);
  border-left-color: rgba(4,61,147,0.18);
}
.hjws-gtm-deliv__panel--2 .hjws-gtm-deliv__item--standard:hover {
  border-left-color: rgba(4,61,147,0.40);
  background: rgba(4,61,147,0.06);
}

.hjws-gtm-deliv__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  background: rgba(4,61,147,0.08);
  border: 1px solid rgba(4,61,147,0.15);
  color: #043D93;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.hjws-gtm-deliv__item--standard:hover .hjws-gtm-deliv__item-icon {
  background: rgba(4,61,147,0.14);
  border-color: rgba(4,61,147,0.28);
}

.hjws-gtm-deliv__item-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.hjws-gtm-deliv__item-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #0f1729;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color 0.22s ease;
}
.hjws-gtm-deliv__item--standard:hover .hjws-gtm-deliv__item-title { color: #043D93; }

.hjws-gtm-deliv__item-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.60;
  color: #64748b;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ════════════════════════════════════════════
   DOCUMENT CARD BASE — unchanged
════════════════════════════════════════════ */

.hjws-gtm-deliv__doc-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: default;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Action Plan card — unchanged */
.hjws-gtm-deliv__doc-card--action {
  border: 1px solid rgba(4,61,147,0.14);
  box-shadow:
    0 2px 10px rgba(4,61,147,0.07),
    0 1px 3px rgba(0,0,0,0.04);
}
.hjws-gtm-deliv__doc-card--action:hover {
  border-color: rgba(4,61,147,0.25);
  box-shadow:
    0 6px 20px rgba(4,61,147,0.10),
    0 2px 5px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════
   GROWTH PLAYBOOK CARD — PADDING REFINEMENT

   THIS IS THE PRIMARY CHANGE IN THIS PASS.

   PREVIOUS padding:
     padding-top: 32px (override only)
     left/right/bottom: inherited 18px 22px from base
     Effective: 32px top / 22px right / 18px bottom / 22px left

   NEW padding:
     padding: 40px 32px 32px 32px
     top: 40px / right: 32px / bottom: 32px / left: 32px

   All other visual properties (border, background, shadow,
   hover states, border-radius, flex layout) are UNCHANGED.
════════════════════════════════════════════ */

.hjws-gtm-deliv__doc-card--playbook {
  position: relative;
  background: rgba(4,61,147,0.04);
  border: 1.5px solid rgba(4,61,147,0.28);
  box-shadow:
    0 4px 20px rgba(4,61,147,0.14),
    0 2px 6px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.80);
  /*
    CHANGED: padding was implicit 18px 22px with only
    padding-top: 32px override.

    NEW: explicit padding on all four sides.
    — top 40px: badge at top:16px has 24px of visual air
      below it before the icon/title content begins
    — right 32px: generous right margin for text content
    — bottom 32px: premium breathing room below description
    — left 32px: matches right, badge aligns at left:32px
  */
  padding: 40px 32px 32px 32px;
}

.hjws-gtm-deliv__doc-card--playbook:hover {
  border-color: rgba(4,61,147,0.40);
  box-shadow:
    0 8px 28px rgba(4,61,147,0.18),
    0 3px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.80);
  transform: translateY(-3px);
}

/* ════════════════════════════════════════════
   STRATEGY DOCUMENT BADGE — POSITION REFINED

   PREVIOUS: top: 14px / left: 22px
   NEW:      top: 16px / left: 32px

   left: 32px — aligns the badge with the card's
   new left padding edge. The badge text now starts
   at the same horizontal position as the icon
   and title below it, creating a clean vertical
   alignment column within the card.

   top: 16px — +2px from previous. Slightly more
   air between the card's top border and the badge.
   The badge now sits comfortably above the content
   area (which starts at padding-top: 40px).

   All badge visual properties (background, border,
   font, color, border-radius, pointer-events) unchanged.
════════════════════════════════════════════ */

.hjws-gtm-deliv__playbook-badge {
  position: absolute;
  top: 16px;    /* CHANGED: 14px → 16px */
  left: 32px;   /* CHANGED: 22px → 32px — aligns with new left padding */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(4,61,147,0.08);
  border: 1px solid rgba(4,61,147,0.18);
  border-radius: 999px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(4,61,147,0.75);
  white-space: nowrap;
  pointer-events: none;
}

/* ── Document card icon containers — unchanged ── */
.hjws-gtm-deliv__doc-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(4,61,147,0.08);
  border: 1px solid rgba(4,61,147,0.16);
  color: #043D93;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hjws-gtm-deliv__doc-card--action:hover .hjws-gtm-deliv__doc-card-icon {
  background: rgba(4,61,147,0.14);
  border-color: rgba(4,61,147,0.28);
}

.hjws-gtm-deliv__doc-card-icon--playbook {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 11px;
  background: rgba(4,61,147,0.12);
  border-color: rgba(4,61,147,0.24);
}
.hjws-gtm-deliv__doc-card--playbook:hover .hjws-gtm-deliv__doc-card-icon--playbook {
  background: rgba(4,61,147,0.18);
  border-color: rgba(4,61,147,0.36);
}

/* ── Document card content — unchanged ── */
.hjws-gtm-deliv__doc-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.hjws-gtm-deliv__doc-card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: #0f1729;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color 0.25s ease;
}
.hjws-gtm-deliv__doc-card-title--playbook {
  font-size: 1.125rem;
  color: #043D93;
  font-weight: 800;
}
.hjws-gtm-deliv__doc-card--action:hover .hjws-gtm-deliv__doc-card-title { color: #043D93; }

.hjws-gtm-deliv__doc-card-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.62;
  color: #4a5568;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ════════════════════════════════════════════
   BOTTOM HIGHLIGHT — unchanged
════════════════════════════════════════════ */

.hjws-gtm-deliv__highlight {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.50s ease, transform 0.50s ease;
}
.hjws-gtm-deliv__highlight--visible {
  opacity: 1;
  transform: translateY(0);
}

.hjws-gtm-deliv__highlight-rule {
  width: 100%;
  max-width: 560px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(4,61,147,0.12) 20%,
    rgba(4,61,147,0.12) 80%,
    transparent
  );
}

.hjws-gtm-deliv__highlight-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 680px;
}

.hjws-gtm-deliv__highlight-headline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #0f1729;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hjws-gtm-deliv__highlight-copy {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.70;
  color: #374151;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ════════════════════════════════════════════
   ANIMATION STATES — unchanged
════════════════════════════════════════════ */

.hjws-gtm-deliv__anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.hjws-gtm-deliv__anim--active {
  opacity: 1;
  transform: translateY(0);
}
.hjws-gtm-deliv__anim--0 { transition-delay: 0.05s; }
.hjws-gtm-deliv__anim--1 { transition-delay: 0.18s; }
.hjws-gtm-deliv__anim--2 { transition-delay: 0.32s; }

/* ════════════════════════════════════════════
   RESPONSIVE — TABLET 560–767px — unchanged
════════════════════════════════════════════ */

@media (min-width: 560px) and (max-width: 767px) {
  .hjws-gtm-deliv {
    padding: 80px 32px 88px;
  }
  .hjws-gtm-deliv__inner {
    gap: 44px;
  }
  .hjws-gtm-deliv__panel {
    flex-direction: column;
  }
  .hjws-gtm-deliv__panel-label-col {
    width: 100%;
    min-width: 0;
    padding: 20px 24px 16px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hjws-gtm-deliv__panel-num {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  .hjws-gtm-deliv__panel-intro {
    width: 100%;
    margin-top: 4px;
  }
  .hjws-gtm-deliv__panel-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  .hjws-gtm-deliv__panel-items {
    padding: 20px 24px;
    justify-content: flex-start;
  }
  .hjws-gtm-deliv__panel--1 { margin-bottom: 10px; }
  .hjws-gtm-deliv__panel--2 { margin-bottom: 10px; }
  .hjws-gtm-deliv__highlight { max-width: 100%; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤559px

   CHANGED for playbook card:
   Previous: padding-top: 28px (override only)
   New: padding: 32px 20px 24px 20px
     — top: 32px — enough room for badge above content
     — right/left: 20px — appropriate for mobile card width
     — bottom: 24px — improved over the previous 18px

   Badge on mobile:
   Previous: top: 14px (inherited), but left position
     was overriding the 22px base to match narrower cards
   New: top: 12px / left: 20px — matches mobile left padding
════════════════════════════════════════════ */

@media (max-width: 559px) {
  .hjws-gtm-deliv {
    padding: 64px 20px 72px;
  }
  .hjws-gtm-deliv__inner {
    gap: 36px;
  }
  .hjws-gtm-deliv__panel {
    flex-direction: column;
    border-radius: 14px;
  }
  .hjws-gtm-deliv__panel-label-col {
    width: 100%;
    min-width: 0;
    padding: 18px 20px 14px;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
  .hjws-gtm-deliv__panel-num {
    font-size: 1.4rem;
    margin-bottom: 0;
  }
  .hjws-gtm-deliv__panel-intro {
    width: 100%;
    margin-top: 2px;
  }
  .hjws-gtm-deliv__panel-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  .hjws-gtm-deliv__panel-items {
    padding: 16px 20px 20px;
  }
  .hjws-gtm-deliv__panel-items--final {
    padding: 16px 20px 20px;
    gap: 14px; /* Tighter on mobile — narrower cards need less gap */
  }
  .hjws-gtm-deliv__item--standard {
    padding: 10px 12px;
  }
  .hjws-gtm-deliv__doc-card {
    padding: 16px 18px;
  }
  /*
    CHANGED for mobile:
    New proportional padding: 32px top / 20px horizontal / 24px bottom
    — Maintains the improved breathing room from the desktop change
    — Adapts to narrower mobile card widths
  */
  .hjws-gtm-deliv__doc-card--playbook {
    padding: 32px 20px 24px 20px;
  }
  /*
    Badge position on mobile:
    top: 12px — slightly less than desktop (16px) but still clear
    left: 20px — matches mobile left padding
  */
  .hjws-gtm-deliv__playbook-badge {
    top: 12px;
    left: 20px;
  }
  .hjws-gtm-deliv__panel--1,
  .hjws-gtm-deliv__panel--2 {
    margin-bottom: 10px;
  }
  .hjws-gtm-deliv__highlight {
    max-width: 100%;
  }
  .hjws-gtm-deliv__highlight-headline {
    font-size: 1.15rem;
  }
  .hjws-gtm-deliv__highlight-copy {
    font-size: 0.9375rem;
  }
}

/* ── Reduced motion — unchanged ── */
@media (prefers-reduced-motion: reduce) {
  .hjws-gtm-deliv__panel,
  .hjws-gtm-deliv__anim,
  .hjws-gtm-deliv__highlight,
  .hjws-gtm-deliv__item--standard,
  .hjws-gtm-deliv__doc-card {
    transition: none;
    animation: none;
  }
  .hjws-gtm-deliv__anim {
    opacity: 1;
    transform: none;
  }
  .hjws-gtm-deliv__panel {
    opacity: 1;
    transform: none;
  }
  .hjws-gtm-deliv__highlight {
    opacity: 1;
    transform: none;
  }
  .hjws-gtm-deliv__item--standard:hover,
  .hjws-gtm-deliv__doc-card:hover {
    transform: none;
  }
}