/* ============================================================
   POWR2 custom blocks — chart, pull quote, CTA band, key-stat row
   Front-end + editor (var fallbacks so it works without landing.css)
   ============================================================ */
.p2chart-card,.p2-pullquote,.p2-cta,.p2-stats{
  --p2-steel:#1F3D4E;--p2-steel900:#122732;--p2-electric:#90ABB5;--p2-lemon:#AAC760;
  --p2-lemon600:#95b54a;--p2-ink:#0c1a21;--p2-muted:#5d6e76;--p2-line:#dde4e7;
  font-family:'Montserrat',system-ui,sans-serif;
}

/* Chart */
.p2chart-card{background:#fff;border:1px solid var(--p2-line);border-radius:16px;padding:24px;margin:30px 0;box-shadow:0 2px 10px rgba(18,39,50,.06);}
.p2chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.p2chart-title{font-size:16px;font-weight:700;color:var(--p2-steel900);letter-spacing:-.01em;}
.p2chart-sub{font-size:12px;color:var(--p2-muted);font-weight:600;}
.p2chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 18px;}
.p2chart-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--p2-muted);}
.p2chart-legend i{width:11px;height:11px;border-radius:3px;}
.p2chart-plot{width:100%;}
.p2chart-svg{display:block;width:100%;height:auto;}
.p2c-axis{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;fill:var(--p2-muted);}
.p2c-axis-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;fill:var(--p2-steel900);letter-spacing:.02em;}
html.dark .p2c-axis-title{fill:#cfe;fill:#e8eef0;}
.p2chart-pielegend{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:8px;}
.p2chart-pielegend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--p2-muted);}
.p2chart-pielegend i{width:11px;height:11px;border-radius:3px;}
.p2chart-pielegend b{color:var(--p2-steel900);font-weight:800;}
.p2chart-empty{color:var(--p2-muted);font-size:13px;text-align:center;padding:18px 0;}

/* Pull quote */
.p2-pullquote{margin:34px 0;padding:6px 0 6px 26px;border-left:3px solid var(--p2-lemon);}
.p2-pullquote p{font-size:clamp(20px,2.2vw,26px);line-height:1.35;font-weight:300;font-style:italic;color:var(--p2-steel900);letter-spacing:-.01em;margin:0;}
.p2-pullquote cite{display:block;margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--p2-muted);font-style:normal;}

/* CTA band */
.p2-cta{margin:38px 0;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--p2-steel900),var(--p2-steel));}
.p2-cta .btn{margin:0 !important;}
.p2-cta-inner{padding:42px 36px;display:flex !important;align-items:center;justify-content:space-between;gap:26px;flex-wrap:nowrap;}
.p2-cta h2{font-size:clamp(22px,2.6vw,32px);font-weight:300 !important;letter-spacing:-.02em;color:#fff !important;line-height:1.12;margin:0 !important;flex:1 1 auto !important;min-width:0;max-width:none;}
.p2-cta h2 b{font-weight:700 !important;}
.p2-cta .btn{display:inline-flex !important;align-items:center;gap:10px;padding:14px 24px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;text-decoration:none;background:var(--p2-lemon);color:#fff;white-space:nowrap !important;flex:0 0 auto !important;transition:background .2s,transform .2s;}
.p2-cta h2{flex:1 1 auto;min-width:0;}
.p2-cta .btn:hover{background:var(--p2-lemon600);transform:translateY(-1px);}
.p2-cta .btn svg{width:16px;height:16px;}

/* Key-stat row */
.p2-stats{display:grid;gap:14px;margin:30px 0;grid-template-columns:repeat(3,1fr);}
.p2-stats-1{grid-template-columns:1fr;}.p2-stats-2{grid-template-columns:repeat(2,1fr);}.p2-stats-4{grid-template-columns:repeat(4,1fr);}
.p2-stat{background:#fff;border:1px solid var(--p2-line);border-radius:14px;padding:22px 20px;box-shadow:0 2px 8px rgba(18,39,50,.06);}
.p2-stat-num{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--p2-steel900);line-height:1;font-variant-numeric:tabular-nums;}
.p2-stat-num .unit{font-size:18px;font-weight:700;color:var(--p2-electric);margin-left:2px;}
.p2-stat-cap{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--p2-muted);line-height:1.4;}

/* Dark mode (article/case-study pages carry .dark on <html>) */
html.dark .p2chart-card,html.dark .p2-stat{background:#132935;border-color:rgba(144,171,181,.18);}
html.dark .p2chart-title,html.dark .p2-stat-num,html.dark .p2chart-pielegend b{color:#fff;}
html.dark .p2-pullquote p{color:#fff;}
html.dark .p2c-axis{fill:#9fb1ba;}

@media(max-width:560px){
  .p2-stats,.p2-stats-4{grid-template-columns:1fr;}
  .p2-cta-inner{flex-direction:column;align-items:flex-start;gap:20px;}
}

/* Standalone button (POWR2 Button block) — self-contained, loads everywhere.
   Selectors scoped under .p2-btn-wrap so they win inside .post-body article text. */
.p2-btn-wrap{
  --p2-lemon:#AAC760;--p2-lemon600:#95b54a;--p2-steel:#1F3D4E;--p2-steel900:#122732;--p2-line:#dde4e7;
  margin:26px 0;display:flex;
}
.p2-btn-wrap.is-left{justify-content:flex-start;}
.p2-btn-wrap.is-center{justify-content:center;}
.p2-btn-wrap.is-right{justify-content:flex-end;}
.p2-btn-wrap .p2-btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;text-decoration:none;white-space:nowrap;cursor:pointer;border:1.5px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.p2-btn-wrap .p2-btn:hover{text-decoration:none;}
.p2-btn-wrap .p2-btn svg{width:16px;height:16px;transition:transform .2s;}
.p2-btn-wrap .p2-btn:hover svg{transform:translateX(3px);}
/* Lemon (primary) */
.p2-btn-wrap .p2-btn-primary{background:var(--p2-lemon);color:#fff;box-shadow:0 8px 24px -8px rgba(170,199,96,.6);}
.p2-btn-wrap .p2-btn-primary:hover{background:var(--p2-lemon600);color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(170,199,96,.7);}
/* Outline */
.p2-btn-wrap .p2-btn-outline{background:transparent;color:var(--p2-steel900);border-color:var(--p2-line);}
.p2-btn-wrap .p2-btn-outline:hover{border-color:var(--p2-steel);}
html.powr2-dark .p2-btn-wrap .p2-btn-outline{color:#fff;border-color:rgba(255,255,255,.3);}
html.powr2-dark .p2-btn-wrap .p2-btn-outline:hover{border-color:rgba(255,255,255,.6);}

/* Latest Posts block — reuses .rc-grid/.rc-card from resource.css (enqueued with the block) */
.p2-latest{margin:30px 0;}
.p2-latest .rc-grid{max-width:none;margin:0;padding:0;}
.p2-latest-title{font-family:'Montserrat',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--p2-steel900,#122732);margin:0 0 22px;}
html.powr2-dark .p2-latest-title{color:#fff;}

/* Form (native HubSpot embed) */
.p2-form{margin:38px 0;}
.p2-form.is-narrow{max-width:560px;}
.p2-form.is-full{max-width:none;}
.p2-form-heading{font-size:clamp(22px,2.6vw,28px);font-weight:800;color:var(--p2-steel900);margin:0 0 8px;letter-spacing:-.01em;}
.p2-form-intro{font-size:15px;line-height:1.6;color:var(--p2-muted);margin:0 0 20px;}
.p2-form-embed{width:100%;}
.p2-form-embed iframe,
.p2-form-embed .hs-form,
.p2-form-embed form{width:100% !important;max-width:100% !important;}
.p2-form-placeholder{border:1px dashed var(--p2-line);border-radius:12px;padding:20px;color:var(--p2-muted);font-size:14px;}
.p2-form-placeholder b{color:var(--p2-steel900);}
/* Mobile: always full content width regardless of the narrow setting. */
@media(max-width:780px){
  .p2-form.is-narrow{max-width:none;}
}

/* ============ Video ============ */
.p2-video{margin:40px 0;}
.p2-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:12px;}
.p2-video-frame iframe,.p2-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;}
.p2-video-placeholder{border:1px dashed var(--p2-line);border-radius:12px;padding:40px 20px;text-align:center;color:var(--p2-muted);font-size:14px;}
/* Full/Wide (desktop): the OUTER .p2-video stays a completely normal block —
   JS only sets its height (matching the breakout width's aspect ratio) to
   correctly reserve vertical page space, never its width. Only the INNER
   .p2-video-frame (position:absolute) actually breaks out full-width via
   JS — same fix as the Background Section block: an absolutely-positioned
   element can't affect its parent's size, which is what makes this reliable
   instead of distorting the .post-body ancestor the way the old approach did. */
.p2-video.is-full,.p2-video.is-wide{position:relative;}
.p2-video.is-full .p2-video-frame{border-radius:0;}

/* ============ Background Section ============ */
.p2-bgsection{position:relative;padding:64px 0;}
.p2-bgsection.is-spacing-compact{padding:36px 0;}
.p2-bgsection.is-spacing-spacious{padding:96px 0;}
/* The background layer is absolutely positioned and full-bleed via JS
   (viewport-fix.js). position:absolute removes it from normal document
   flow entirely, so it can never affect the width of its own ancestors —
   unlike the outer <section>, which stays a completely normal block. */
.p2-bgsection-bg{position:absolute;top:0;bottom:0;left:0;width:100%;z-index:0;background-size:cover;background-position:center;}
.p2-bgsection-overlay{position:absolute;inset:0;background:#000;pointer-events:none;}
.p2-bgsection-inner{position:relative;z-index:1;max-width:932px;margin:0 auto;}
/* Light text (for dark/steel-blue backgrounds) — colors nested core blocks
   automatically so editors don't need to set color per block. */
.p2-bgsection.is-light{color:#fff;}
.p2-bgsection.is-light h1,.p2-bgsection.is-light h2,.p2-bgsection.is-light h3,
.p2-bgsection.is-light h4,.p2-bgsection.is-light h5,.p2-bgsection.is-light h6{color:#fff;}
.p2-bgsection.is-light p,.p2-bgsection.is-light li{color:rgba(255,255,255,.85);}
.p2-bgsection.is-light a:not(.btn){color:var(--p2-lemon);}
.p2-bgsection.is-light blockquote,.p2-bgsection.is-light .p2-pullquote{border-left-color:var(--p2-lemon);}
.p2-bgsection.is-light blockquote p,.p2-bgsection.is-light .p2-pullquote p{color:#fff;}
.p2-bgsection.is-light cite,.p2-bgsection.is-light .p2-pullquote cite{color:rgba(255,255,255,.65);}
/* Dark text (for light-colored/light-image backgrounds) — just the default
   site colors, included explicitly so switching the toggle always works
   regardless of what the section happens to inherit from its parent. */
.p2-bgsection.is-dark{color:var(--p2-steel900);}
.p2-bgsection.is-dark h1,.p2-bgsection.is-dark h2,.p2-bgsection.is-dark h3,
.p2-bgsection.is-dark h4,.p2-bgsection.is-dark h5,.p2-bgsection.is-dark h6{color:var(--p2-steel900);}
.p2-bgsection.is-dark p,.p2-bgsection.is-dark li{color:var(--p2-muted);}
@media(max-width:780px){
  .p2-bgsection{padding:44px 0;}
  .p2-bgsection.is-spacing-spacious{padding:56px 0;}
}

/* Accordion */
.p2-accordion{margin:38px 0;}
.p2-accordion-heading{font-size:clamp(22px,2.6vw,32px);font-weight:800;color:var(--p2-steel900);margin:0 0 20px;}
.p2-accordion-item{border-bottom:1px solid var(--p2-line);}
.p2-accordion-item:first-child{border-top:1px solid var(--p2-line);}
.p2-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;text-align:left;padding:20px 4px;font-size:17px;font-weight:700;color:var(--p2-steel900);cursor:pointer;}
.p2-accordion-chevron{flex:0 0 auto;transition:transform .2s;color:var(--p2-lemon);}
.p2-accordion-trigger[aria-expanded="true"] .p2-accordion-chevron{transform:rotate(180deg);}
.p2-accordion-panel{overflow:hidden;transition:height .25s ease;}
.p2-accordion-panel-inner{padding:0 4px 22px;font-size:15px;line-height:1.7;color:var(--p2-muted);}
.p2-accordion-panel-inner p{margin:0 0 12px;}
.p2-accordion-panel-inner p:last-child{margin-bottom:0;}
.p2-accordion-link{display:inline-block;margin-top:8px;font-weight:700;color:var(--p2-steel900);text-decoration:underline;}
.p2-accordion-empty{color:var(--p2-muted);font-size:15px;padding:20px 4px;}

/* Benefit grid — icon + heading + paragraph pairs, 2 columns. Apply
   "p2-benefit-grid" to the wrapping Group, and "p2-benefit-item" to each
   inner Group holding one icon/heading/paragraph set. Works well inside a
   POWR2 Background Section (dark theme), matching the reference layout. */
.wp-block-group.p2-benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px;align-items:start;}
/* Zero WordPress's default inter-block top margin on the items — it only
   applies to non-first items, so without this the first item in each row
   sits higher than the second. The grid gap handles spacing instead. */
.p2-benefit-grid > .p2-benefit-item{margin-block-start:0;margin-top:0;}
.p2-benefit-item{display:flex;align-items:flex-start;gap:20px;}
/* Label-above-text variant (no icon): label stacks on its own line above
   the description. No fixed widths, so every description shares the same
   left edge automatically and it works identically on mobile. Add
   "p2-benefit-labeled" to the wrapping grid alongside "p2-benefit-grid". */
.p2-benefit-labeled .p2-benefit-item{flex-direction:column;gap:8px;}
.p2-benefit-labeled .p2-benefit-item > h4{margin-block-start:0;}
.p2-benefit-item img{width:56px;height:56px;flex:0 0 auto;object-fit:contain;}
.p2-benefit-item h4{margin:0 0 8px;font-size:19px;font-weight:700;}
.p2-benefit-item p{margin:0;font-size:15px;line-height:1.6;}
@media(max-width:780px){
  .p2-benefit-grid{grid-template-columns:1fr;gap:28px;}
}