/**
 * Block Base Styles
 *
 * League Gothic loaded for Power Hero (canvas iframe is separate document).
 */
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
/* Article block (Figma Blog Article Block 01): Inter 400/500 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/**
 * PATTERN (atomic blocks): Blocks are design-system agnostic. All token-driven
 * styling (colors, typography, spacing) comes from:
 * 1. Design system token CSS (:root / [data-design-system]) – vars like --hero-bg, --color-primary
 * 2. This file – block classes use only var() refs (e.g. .hero-block { background: var(--hero-bg); })
 * 3. Token text classes – .heading-style-hero, .subhead-style-body etc. (defined in token CSS)
 *
 * Block HTML in the composer must NOT set token-driven props inline (no style="background: ..."
 * or hardcoded colors). Use block class + data-field + token classes so switching design system
 * instantly updates the canvas and published frontend.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-block {
  background: var(--hero-bg);
  color: var(--hero-text-color);
  padding: var(--hero-padding-y) var(--hero-padding-x);
  text-align: var(--hero-text-align);
  width: 100%;
}

.hero-block > * {
  max-width: var(--hero-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Headline: only apply hero default when no design-token class (so H1–H6 token scales in builder + frontend) */
.hero-block [data-field="headline"] {
  margin-bottom: var(--hero-headline-margin-bottom);
  color: inherit;
}
.hero-block [data-field="headline"]:not([class*="heading-style-"]) {
  font-size: var(--hero-headline-font-size);
  font-weight: var(--hero-headline-font-weight);
}

/* Subhead: only apply hero default when no design-token class */
.hero-block [data-field="subhead"] {
  margin-bottom: var(--hero-subhead-margin-bottom);
  opacity: var(--hero-subhead-opacity);
  color: inherit;
}
.hero-block [data-field="subhead"]:not([class*="subhead-style-"]) {
  font-size: var(--hero-subhead-font-size);
}

.hero-block a,
.hero-block .btn {
  display: inline-block;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  background: var(--btn-secondary-bg);
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--btn-transition);
  border: none;
  cursor: pointer;
}

.hero-block a:hover,
.hero-block .btn:hover {
  background: var(--btn-secondary-hover-bg);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOLDEN HERO BLOCK – design system only, no fallbacks
   Token contract: each design system CSS (demo-tokens.css, alt-tokens.css, 1/tokens.css)
   MUST define:
   --golden-hero-bg, --golden-hero-text-color, --golden-hero-padding-*, --golden-hero-text-align,
   --golden-hero-max-width, --golden-hero-headline-*, --golden-hero-subhead-*,
   --golden-hero-cta-primary-bg, --golden-hero-cta-primary-color, --golden-hero-cta-primary-hover-bg,
   --golden-hero-cta-secondary-bg, --golden-hero-cta-secondary-color, --golden-hero-cta-secondary-hover-bg,
   and --btn-* for non-primary CTA. This file references only those vars (no literal colors).
   ═══════════════════════════════════════════════════════════════════════════ */

.golden-hero-block {
  background: var(--golden-hero-bg, var(--hero-bg, linear-gradient(135deg, var(--color-primary-500, #6366f1) 0%, var(--color-primary-400, #8b5cf6) 50%, var(--color-primary-300, #a855f7) 100%)));
  color: var(--golden-hero-text-color, var(--hero-text-color, var(--color-text-inverse, #ffffff)));
  padding: var(--golden-hero-padding-y, var(--hero-padding-y, var(--space-16, 4rem))) var(--golden-hero-padding-x, var(--hero-padding-x, var(--space-8, 2rem)));
  text-align: var(--golden-hero-text-align, var(--hero-text-align, center));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min-height, 20rem);
  /* Full-bleed: extend to viewport width when inside constrained section/column (frontend and legacy HTML) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.golden-hero-block > *,
.golden-hero-block__content {
  max-width: var(--golden-hero-max-width, var(--hero-max-width, 56rem));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: inherit;
}

/* Base headline spacing/color; size/weight only when no design-system class (so .heading-style-* wins) */
.golden-hero-block h1,
.golden-hero-block h2,
.golden-hero-block h3,
.golden-hero-block h4,
.golden-hero-block h5,
.golden-hero-block h6,
.golden-hero-block [data-field="headline"] {
  margin-bottom: var(--golden-hero-headline-margin-bottom, var(--hero-headline-margin-bottom, 1rem));
  color: inherit;
  line-height: 1.2;
  text-align: inherit;
}

.golden-hero-block h1:not([class*="heading-style-"]),
.golden-hero-block h2:not([class*="heading-style-"]),
.golden-hero-block h3:not([class*="heading-style-"]),
.golden-hero-block h4:not([class*="heading-style-"]),
.golden-hero-block h5:not([class*="heading-style-"]),
.golden-hero-block h6:not([class*="heading-style-"]),
.golden-hero-block [data-field="headline"]:not([class*="heading-style-"]) {
  font-size: var(--golden-hero-headline-font-size, var(--hero-headline-font-size, clamp(2rem, 5vw, 3.75rem)));
  font-weight: var(--golden-hero-headline-font-weight, var(--hero-headline-font-weight, 700));
}

.golden-hero-block p,
.golden-hero-block span[data-field="subhead"],
.golden-hero-block [data-field="subhead"] {
  margin-bottom: var(--golden-hero-subhead-margin-bottom, var(--hero-subhead-margin-bottom, 1.5rem));
  opacity: var(--golden-hero-subhead-opacity, var(--hero-subhead-opacity, 0.95));
  color: inherit;
  font-size: var(--golden-hero-subhead-font-size, var(--hero-subhead-font-size, 1.25rem));
  line-height: 1.5;
  text-align: inherit;
}

.golden-hero-block [data-field="subhead"]:not([class*="subhead-style-"]) {
  font-size: var(--golden-hero-subhead-font-size, var(--hero-subhead-font-size, 1.25rem));
}

/* Base CTA (secondary style): design system only. Primary uses .btn-primary rules below. */
.golden-hero-block a:not(.btn-primary),
.golden-hero-block .btn:not(.btn-primary) {
  display: inline-block;
  width: auto;
  max-width: 100%;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  background: var(--golden-hero-cta-secondary-bg);
  color: var(--golden-hero-cta-secondary-color);
  text-decoration: none;
  transition: var(--btn-transition);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.golden-hero-block a.btn-primary,
.golden-hero-block .btn.btn-primary {
  display: inline-block;
  width: auto;
  max-width: 100%;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  text-decoration: none;
  transition: var(--btn-transition);
  border: 2px solid transparent;
  cursor: pointer;
}

.golden-hero-block a:not(.btn-primary):hover,
.golden-hero-block .btn:not(.btn-primary):hover {
  background: var(--golden-hero-cta-secondary-hover-bg);
  transform: translateY(-2px);
}

/* Primary CTA: design system only (no fallbacks). Tokens: --golden-hero-cta-primary-* */
.golden-hero-block .btn-primary,
.golden-hero-block a.btn-primary {
  background: var(--golden-hero-cta-primary-bg) !important;
  color: var(--golden-hero-cta-primary-color) !important;
  border-color: transparent !important;
}

.golden-hero-block .btn-primary:hover,
.golden-hero-block a.btn-primary:hover {
  background: var(--golden-hero-cta-primary-hover-bg) !important;
  color: var(--golden-hero-cta-primary-color) !important;
}

/* Secondary CTA: design system only. Tokens: --golden-hero-cta-secondary-* */
.golden-hero-block .btn-secondary,
.golden-hero-block a.btn-secondary {
  background: var(--golden-hero-cta-secondary-bg);
  color: var(--golden-hero-cta-secondary-color);
}

.golden-hero-block .btn-secondary:hover,
.golden-hero-block a.btn-secondary:hover {
  background: var(--golden-hero-cta-secondary-hover-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL HERO BLOCK – design system only, no inline styles
   Token contract: design system CSS MAY define --social-hero-* (see demo-tokens / alt-tokens).
   Fallbacks use --space-*, --color-*, --btn-*, --h1-*, --body-*.
   ═══════════════════════════════════════════════════════════════════════════ */

.social-hero-block {
  background: var(--social-hero-bg, var(--color-background, #fff));
  color: var(--social-hero-text-color, var(--color-text));
  padding: var(--social-hero-padding-y, var(--space-20, 5rem)) var(--social-hero-padding-x, var(--space-16, 4rem));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--social-hero-gap, var(--space-8, 2rem));
  min-height: var(--social-hero-min-height, 25rem);
}

.social-hero-block__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--social-hero-text-gap, var(--space-8, 2rem));
  flex: 1;
  min-width: 0;
}

.social-hero-block__eyebrow {
  color: var(--social-hero-eyebrow-color, var(--color-primary, #2563eb));
  font-size: var(--social-hero-eyebrow-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--social-hero-eyebrow-font-weight, var(--font-semibold, 600));
  text-transform: uppercase;
  letter-spacing: var(--social-hero-eyebrow-tracking, 0.05em);
  margin: 0;
}

.social-hero-block__title-group {
  display: flex;
  flex-direction: column;
  gap: var(--social-hero-title-gap, var(--space-4, 1rem));
}

.social-hero-block__headline,
.social-hero-block [data-field="headline"] {
  color: var(--social-hero-headline-color, var(--h1-color, var(--color-text)));
  font-family: var(--h1-font-family);
  font-size: var(--social-hero-headline-font-size, var(--h1-font-size));
  font-weight: var(--social-hero-headline-font-weight, var(--h1-font-weight));
  line-height: 1;
  letter-spacing: var(--h1-letter-spacing);
  margin: 0;
}

.social-hero-block__supporting,
.social-hero-block [data-field="supportingText"] {
  color: var(--social-hero-supporting-color, var(--color-text-muted, var(--color-gray-500)));
  font-size: var(--social-hero-supporting-font-size, var(--text-lg, 1.125rem));
  line-height: var(--leading-normal, 1.5);
  max-width: var(--social-hero-supporting-max-width, 42rem);
  margin: 0;
}

/* Desktop: button grows with text (same relative behavior as other hero blocks), solid black */
.social-hero-block .btn,
.social-hero-block a[data-field="cta"] {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  background: var(--social-hero-cta-bg, var(--color-black, #000));
  color: var(--social-hero-cta-color, var(--color-white, #fff));
  text-decoration: none;
  transition: var(--btn-transition);
  border: none;
  cursor: pointer;
}

.social-hero-block .btn:hover,
.social-hero-block a[data-field="cta"]:hover {
  background: var(--social-hero-cta-hover-bg, var(--color-gray-800, #1f2937));
}

.social-hero-block__graphic {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: var(--social-hero-graphic-min-height, 22.5rem);
  align-self: stretch;
  max-width: var(--social-hero-graphic-max-width, 790px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.social-hero-block__ellipse {
  position: absolute;
  width: var(--social-hero-ellipse-size, 20rem);
  height: var(--social-hero-ellipse-size, 20rem);
  border-radius: var(--radius-full, 50%);
  background: var(--social-hero-ellipse-bg, var(--color-primary));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.social-hero-block__img {
  width: 100%;
  height: 100%;
  max-width: var(--social-hero-graphic-max-width, 790px);
  display: block;
  object-fit: cover;
  object-position: var(--social-hero-img-object-position, bottom);
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .social-hero-block {
    flex-direction: column;
    padding: var(--social-hero-padding-y-mobile, var(--space-10)) var(--social-hero-padding-x-mobile, var(--space-6));
  }
  .social-hero-block__graphic {
    min-height: var(--social-hero-graphic-min-height, 22.5rem);
  }
  .social-hero-block .btn,
  .social-hero-block a[data-field="cta"] {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHAT WE DO BLOCK (Figma Services Block 38 – list of rows, each = card + image)
   ═══════════════════════════════════════════════════════════════════════════ */

.what-we-do-block {
  background: var(--what-we-do-bg, var(--color-background, #fff));
  color: var(--what-we-do-text-color, var(--color-text));
  padding: var(--what-we-do-padding-y, var(--space-20)) var(--what-we-do-padding-x, var(--space-16));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--what-we-do-gap, var(--space-16));
}

.what-we-do-block__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--what-we-do-header-gap, var(--space-4));
  text-align: center;
}

.what-we-do-block__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--what-we-do-eyebrow-padding-y, 0) var(--what-we-do-eyebrow-padding-x, var(--space-3));
  height: var(--what-we-do-eyebrow-height, 2rem);
  border-radius: var(--btn-border-radius, var(--radius-lg));
  background: var(--what-we-do-eyebrow-bg, var(--color-primary-50, #eff6ff));
  color: var(--what-we-do-eyebrow-color, var(--color-primary));
  font-size: var(--what-we-do-eyebrow-font-size, var(--text-sm));
  font-weight: var(--what-we-do-eyebrow-font-weight, var(--font-semibold));
  margin: 0;
}

.what-we-do-block__heading,
.what-we-do-block [data-field="headline"] {
  font-family: var(--h2-font-family);
  font-size: var(--what-we-do-heading-font-size, var(--text-3xl));
  font-weight: var(--what-we-do-heading-font-weight, var(--font-semibold));
  line-height: var(--what-we-do-heading-line-height, 1.2);
  letter-spacing: var(--tracking-tight, -0.03em);
  color: var(--what-we-do-heading-color, var(--h2-color));
  margin: 0;
}

.what-we-do-block__subheading,
.what-we-do-block [data-field="supportingText"] {
  font-size: var(--what-we-do-subheading-font-size, var(--text-lg));
  line-height: var(--leading-normal, 1.5);
  color: var(--what-we-do-subheading-color, var(--color-text-muted));
  max-width: var(--what-we-do-subheading-max-width, 650px);
  margin: 0;
}

.what-we-do-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--what-we-do-list-gap, var(--space-8));
}

.what-we-do-block__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  max-width: var(--what-we-do-row-max-width, 90rem);
  margin-left: auto;
  margin-right: auto;
}

.what-we-do-block__card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--what-we-do-card-gap, var(--space-8));
  padding: var(--what-we-do-card-padding, var(--space-8));
  background: var(--what-we-do-card-bg, var(--color-surface, #f7f7f8));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: 1px solid var(--what-we-do-card-border, var(--color-border));
  border-right: none;
}

.what-we-do-block__icon {
  width: var(--what-we-do-icon-size, 2rem);
  height: var(--what-we-do-icon-size, 2rem);
  flex-shrink: 0;
  color: var(--what-we-do-icon-color, var(--color-primary));
}

.what-we-do-block__title {
  font-family: var(--h3-font-family);
  font-size: var(--what-we-do-title-font-size, var(--text-xl));
  font-weight: var(--what-we-do-title-font-weight, var(--font-semibold));
  line-height: var(--leading-snug, 1.375);
  color: var(--what-we-do-title-color, var(--color-text));
  margin: 0;
}

.what-we-do-block__desc {
  font-size: var(--what-we-do-desc-font-size, var(--text-base));
  line-height: var(--leading-normal, 1.5);
  color: var(--what-we-do-desc-color, var(--color-text-muted));
  margin: 0;
}

.what-we-do-block__img-wrap {
  width: var(--what-we-do-img-width, 236px);
  flex-shrink: 0;
  background: var(--what-we-do-img-bg, var(--color-gray-100));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border: 1px solid var(--what-we-do-card-border, var(--color-border));
  border-left: none;
  overflow: hidden;
}

.what-we-do-block__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--what-we-do-img-object-position, center);
}

@media (max-width: 768px) {
  .what-we-do-block__row {
    flex-direction: column;
  }
  .what-we-do-block__card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-right: 1px solid var(--what-we-do-card-border, var(--color-border));
  }
  .what-we-do-block__img-wrap {
    width: 100%;
    min-height: var(--what-we-do-img-mobile-min-height, 12rem);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-block {
  background: var(--cta-bg);
  color: var(--cta-text-color);
  padding: var(--cta-padding-y) var(--cta-padding-x);
  text-align: var(--cta-text-align);
  width: 100%;
}

.cta-block h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin-bottom: var(--space-3);
  color: inherit;
}

.cta-block p {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin-bottom: var(--space-6);
  color: inherit;
}

.cta-block a,
.cta-block .btn {
  display: inline-block;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  background: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--btn-transition);
}

.cta-block a:hover,
.cta-block .btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE GRID BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.featuregrid-block {
  background: var(--feature-grid-bg);
  padding: var(--feature-grid-padding-y) var(--feature-grid-padding-x);
  width: 100%;
}

.featuregrid-block > h2 {
  text-align: center;
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin-bottom: var(--space-10);
  color: var(--color-text);
}

.featuregrid-block .feature-grid,
.featuregrid-block > div:not(:first-child) {
  display: grid;
  grid-template-columns: repeat(var(--feature-grid-columns), 1fr);
  gap: var(--feature-grid-gap);
  max-width: 72rem;
  margin: 0 auto;
}

.featuregrid-block .feature-item,
.featuregrid-block > div > div {
  background: var(--feature-card-bg);
  padding: var(--feature-card-padding);
  border-radius: var(--feature-card-border-radius);
  box-shadow: var(--feature-card-shadow);
  text-align: center;
}

.featuregrid-block .feature-icon,
.featuregrid-block > div > div > div:first-child {
  font-size: var(--feature-icon-size);
  margin-bottom: var(--feature-icon-margin-bottom);
}

.featuregrid-block h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.featuregrid-block p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .featuregrid-block .feature-grid,
  .featuregrid-block > div:not(:first-child) {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL SERVICES BLOCK – same structure as Grapes preview; uses feature-grid
   tokens so preview and published match 1:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.social-services-block {
  background: var(--feature-grid-bg);
  padding: var(--feature-grid-padding-y) var(--feature-grid-padding-x);
  width: 100%;
}

.social-services-block > h2,
.social-services-block .social-services-block__heading {
  text-align: center;
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

.social-services-block > p:first-of-type,
.social-services-block .social-services-block__subheading {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-10);
  max-width: 42rem;
}

.social-services-block__grid {
  display: grid;
  grid-template-columns: repeat(var(--feature-grid-columns, 3), 1fr);
  gap: var(--feature-grid-gap);
  max-width: 72rem;
  margin: 0 auto;
}

.social-services-block__card {
  background: var(--feature-card-bg);
  padding: var(--feature-card-padding);
  border-radius: var(--feature-card-border-radius);
  box-shadow: var(--feature-card-shadow);
  text-align: center;
}

.social-services-block__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-3);
  color: var(--color-primary, var(--color-text-muted));
}

.social-services-block__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Canvas/builder: icon via data-icon when span has no inner SVG */
.social-services-block__icon[data-icon] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.social-services-block__icon[data-icon="strategy"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}
.social-services-block__icon[data-icon="content"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}
.social-services-block__icon[data-icon="design"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.648 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.555C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
}

.social-services-block__title {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.social-services-block__desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .social-services-block__grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-block {
  background: var(--stats-bg);
  padding: var(--stats-padding-y) var(--stats-padding-x);
  width: 100%;
}

.stats-block > div {
  display: flex;
  justify-content: center;
  gap: var(--stats-gap);
  flex-wrap: wrap;
  text-align: center;
}

.stats-block .stat-item,
.stats-block > div > div {
  text-align: center;
}

.stats-block .stat-value,
.stats-block > div > div > div:first-child {
  font-size: var(--stat-value-font-size);
  font-weight: var(--stat-value-font-weight);
  color: var(--stat-value-color);
}

.stats-block .stat-label,
.stats-block > div > div > div:last-child {
  font-size: var(--stat-label-font-size);
  color: var(--stat-label-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.testimonials-block {
  background: var(--testimonials-bg);
  padding: var(--testimonials-padding-y) var(--testimonials-padding-x);
  width: 100%;
}

.testimonials-block h2 {
  text-align: center;
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin-bottom: var(--space-10);
  color: var(--color-text);
}

.testimonials-block .testimonial,
.testimonials-block > div:last-child {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.testimonials-block .testimonial-quote,
.testimonials-block p {
  font-size: var(--testimonial-quote-font-size);
  font-style: var(--testimonial-quote-font-style);
  color: var(--testimonial-quote-color);
  margin-bottom: var(--space-5);
}

.testimonials-block .testimonial-author {
  font-weight: var(--testimonial-author-font-weight);
  color: var(--testimonial-author-color);
}

.testimonials-block .testimonial-role {
  font-size: var(--testimonial-role-font-size);
  color: var(--testimonial-role-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-block {
  background: var(--faq-bg);
  padding: var(--faq-padding-y) var(--faq-padding-x);
  width: 100%;
}

.faq-block h2 {
  text-align: center;
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin-bottom: var(--space-10);
  color: var(--color-text);
}

.faq-block .faq-list,
.faq-block > div:last-child {
  max-width: var(--faq-max-width);
  margin: 0 auto;
}

.faq-block .faq-item,
.faq-block > div > div {
  border-bottom: 1px solid var(--faq-item-border-color);
  padding: var(--faq-item-padding-y) 0;
}

.faq-block .faq-question,
.faq-block h3 {
  font-weight: var(--faq-question-font-weight);
  color: var(--faq-question-color);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.faq-block .faq-answer,
.faq-block > div > div > p {
  color: var(--faq-answer-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICING BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing-block {
  background: var(--pricing-bg);
  padding: var(--pricing-padding-y) var(--pricing-padding-x);
  width: 100%;
}

.pricing-block h2 {
  text-align: center;
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin-bottom: var(--space-10);
  color: var(--color-text);
}

.pricing-block .pricing-grid,
.pricing-block > div:last-child {
  display: flex;
  justify-content: center;
  gap: var(--pricing-gap);
  flex-wrap: wrap;
}

.pricing-block .pricing-card,
.pricing-block > div > div {
  background: var(--pricing-card-bg);
  border: var(--pricing-card-border);
  border-radius: var(--pricing-card-border-radius);
  padding: var(--pricing-card-padding);
  box-shadow: var(--pricing-card-shadow);
  text-align: center;
  width: 280px;
  flex-shrink: 0;
}

.pricing-block .pricing-name,
.pricing-block h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.pricing-block .pricing-price {
  font-size: var(--pricing-price-font-size);
  font-weight: var(--pricing-price-font-weight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.pricing-block .pricing-price span {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

.pricing-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
  text-align: left;
}

.pricing-block li {
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
}

.pricing-block a,
.pricing-block .btn {
  display: block;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  text-decoration: none;
  transition: var(--btn-transition);
}

.pricing-block a:hover,
.pricing-block .btn:hover {
  background: var(--btn-primary-hover-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL PRICING BLOCK – same structure as Grapes; uses pricing tokens
   so preview and published match Figma 1:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.social-pricing-block {
  background: var(--pricing-bg);
  padding: var(--pricing-padding-y) var(--pricing-padding-x);
  width: 100%;
}

.social-pricing-block__heading,
.social-pricing-block > h2 {
  text-align: center;
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

.social-pricing-block__subheading,
.social-pricing-block > p:first-of-type {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0 auto var(--space-10);
  max-width: 42rem;
}

.social-pricing-block__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pricing-gap);
  /* Isolate so block-level Style panel color does not cascade to every card */
  color: var(--color-text);
}

.social-pricing-block__card {
  background: var(--pricing-card-bg);
  border: var(--pricing-card-border);
  border-radius: var(--pricing-card-border-radius);
  padding: var(--pricing-card-padding);
  box-shadow: var(--pricing-card-shadow);
  text-align: center;
  width: 280px;
  flex-shrink: 0;
  /* Each card has its own text color (from trait or Style panel on the card) */
  color: var(--color-text);
}

.social-pricing-block__card--highlight {
  border-color: var(--pricing-card-featured-border-color);
  box-shadow: var(--pricing-card-featured-shadow);
}

.social-pricing-block__name {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.social-pricing-block__price {
  font-size: var(--pricing-price-font-size);
  font-weight: var(--pricing-price-font-weight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.social-pricing-block__price-amount { font-weight: inherit; }
.social-pricing-block__price-period {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

.social-pricing-block__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}

.social-pricing-block__features-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.social-pricing-block__features {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  text-align: left;
}

.social-pricing-block__feature {
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.social-pricing-block__footnote {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.social-pricing-block__card .btn,
.social-pricing-block .btn-primary {
  display: block;
  width: 100%;
  margin-top: var(--space-4);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  text-decoration: none;
  text-align: center;
}

.social-pricing-block__card .btn:hover,
.social-pricing-block .btn-primary:hover {
  background: var(--btn-primary-hover-bg);
}

@media (max-width: 768px) {
  .social-pricing-block__grid {
    flex-direction: column;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL GALLERY BLOCK – grid of client cards (Grapes preview + published)
   ═══════════════════════════════════════════════════════════════════════════ */

.social-gallery-block__container {
  text-align: center;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

.social-gallery-block__headline {
  margin: 0 0 var(--space-2);
  /* Typography from .heading-style-h2 (global h2) when combined in markup */
}

.social-gallery-block__subheading {
  font-size: var(--text-base);
  color: var(--color-text-secondary, #6b7280);
  margin: 0 0 var(--space-10);
}

.social-gallery-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6, 1.5rem);
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

.social-gallery-block__card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--color-border, #e5e7eb);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.social-gallery-block__card-inner {
  position: relative;
  display: block;
}

.social-gallery-block__card img,
.social-gallery-block__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Leave-site arrow: bottom-right, square with rounded corners, white bg, black arrow (always visible) */
.social-gallery-block__overlay {
  position: absolute;
  bottom: var(--space-2, 0.5rem);
  right: var(--space-2, 0.5rem);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md, 6px);
  background: var(--color-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.social-gallery-block__overlay::after {
  content: '';
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.social-gallery-block__label {
  display: block;
  padding: var(--space-2, 0.5rem);
  text-align: center;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-text-muted, #6b7280);
}

/* Mobile: keep current look */
@media (max-width: 768px) {
  .social-gallery-block__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .social-gallery-block__card img,
  .social-gallery-block__img {
    min-height: 240px;
  }
}

/* Tablet / iPad: keep current look */
@media (min-width: 769px) and (max-width: 1024px) {
  .social-gallery-block__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .social-gallery-block__card img,
  .social-gallery-block__img {
    min-height: 280px;
  }
}

/* Desktop only: double card height, same 3:4 ratio (Figma desktop size) */
@media (min-width: 1025px) {
  .social-gallery-block__card img,
  .social-gallery-block__img {
    min-height: 560px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECT WITH US BLOCK (canvas placeholder; full layout in ConnectWithUs.svelte)
   Uses same tokens so Grapes preview matches published page.
   ═══════════════════════════════════════════════════════════════════════════ */

.connect-with-us-block {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  min-height: 100vh;
  padding-top: var(--space-24, 8rem);
  padding-bottom: var(--space-12, 3rem);
  padding-left: var(--space-6, 1.5rem);
  padding-right: var(--space-6, 1.5rem);
  background: #000000;
  color: #ffffff;
  font-family: var(--font-body, var(--font-sans));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10, 2.5rem);
  align-items: stretch;
}

@media (min-width: 769px) {
  .connect-with-us-block__image {
    height: 100%;
    min-height: 0;
    display: flex;
  }
}

@media (max-width: 768px) {
  .connect-with-us-block {
    grid-template-columns: 1fr;
  }
  .connect-with-us-block__image {
    min-height: 280px;
  }
}

.connect-with-us-block__image {
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
}

.connect-with-us-block__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}

.connect-with-us-block__image-placeholder {
  min-height: 280px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  width: 100%;
}

@media (min-width: 769px) {
  .connect-with-us-block__image-placeholder {
    min-height: 0;
    height: 100%;
  }
}

.connect-with-us-block__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.connect-with-us-block__content [data-field="headline"] {
  font-size: var(--text-6xl, 3.75rem);
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  color: #ffffff;
}

.connect-with-us-block__content [data-field="email"] {
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
  color: #ffffff;
}

.connect-with-us-block__content [data-field="whatsappLink"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: #25D366;
  color: #000000;
  text-decoration: none;
  align-self: flex-start;
}
.connect-with-us-block__content [data-field="whatsappLink"]::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}
.connect-with-us-block__content [data-field="whatsappLink"]:hover {
  background: #20bd5a;
  color: #000000;
}

.connect-with-us-block__form-placeholder {
  margin-top: var(--space-2);
  padding: var(--space-6);
  background: var(--color-white, #fff);
  color: var(--color-text, #111);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE BLOCK — Grapes canvas parity with packages/ui Article.svelte
   Figma: Blog Article Block 01 (8554:1423), Library 1 → Copy
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grapes root wrapper (div) — avoid double max-width; inner <article> holds layout */
.gjs-block.article-block {
  width: 100%;
  box-sizing: border-box;
}

/* Inner <article> only — outer Grapes wrapper also has .article-block on a div */
article.article-block {
  --article-toc-ink: #000000;
  --article-ink: #252c32;
  --article-ink-muted: #6b7280;
  --article-border-subtle: #e5e7eb;
  --article-accent: #4094f7;

  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--article-max-width, min(57.3125rem, 100%));
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 5vw, 5rem);
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}

/* Wider column when TOC sidebar is present (matches packages/ui Article.svelte) */
article.article-block.article-block--with-toc {
  max-width: min(
    calc(var(--article-max-width, 57.3125rem) + var(--article-toc-width, 13.5rem) + 2.5rem),
    100%
  );
}

.article-block__body-row {
  display: block;
  width: 100%;
  min-width: 0;
}

.article-block__body-row--toc {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .article-block__body-row--toc {
    grid-template-columns: minmax(10.5rem, var(--article-toc-width, 13.5rem)) minmax(0, 1fr);
  }
}

.article-block__toc {
  font-family: inherit;
  display: none;
}

@media (min-width: 1024px) {
  .article-block__body-row--toc .article-block__toc {
    display: block;
    position: sticky;
    top: calc(var(--app-shell-header-height, 4rem) + 1rem);
    max-height: calc(100vh - var(--app-shell-header-height, 4rem) - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    margin: 0;
    border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  }
}

.article-block__toc-heading {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2.25;
  letter-spacing: -0.05em;
  color: var(--article-toc-ink, #000000);
}

.article-block__toc-details {
  margin: 0 0 0.35rem;
  border: none;
}

.article-block__toc-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.2rem 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.35;
}

.article-block__toc-summary::-webkit-details-marker {
  display: none;
}

.article-block__toc-link,
.article-block__toc-sublink {
  color: var(--article-ink-muted);
  text-decoration: none;
}

.article-block__toc-link:hover,
.article-block__toc-sublink:hover {
  color: var(--article-ink);
}

.article-block__toc-link {
  font-weight: 600;
  color: var(--article-toc-ink, #000000);
}

.article-block__toc-sub {
  margin: 0.35rem 0 0.5rem 0.65rem;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--color-border, rgba(0, 0, 0, 0.08));
  padding-left: 0.65rem;
}

.article-block__toc-sub li {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm, 0.8125rem);
  line-height: 1.4;
}

.article-block__main {
  min-width: 0;
}

.article-block__media {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg, 0.5rem);
}

.article-block__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: min(70vh, 32rem);
}

.article-block__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--article-border-subtle);
}

.article-block__kicker {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--article-ink-muted);
}

.article-block__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.286;
  letter-spacing: -0.0286em;
  color: var(--article-ink);
}

.article-block__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}

.article-block__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 100px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f7f7f8;
}

.article-block__meta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  min-width: 0;
}

.article-block__meta-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.43;
  color: var(--article-ink-muted);
}

.article-block__meta-dot {
  user-select: none;
}

.article-block__meta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

.article-block__author {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--article-ink);
}

.article-block__date,
.article-block__updated {
  margin: 0;
}

.article-block__excerpt {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--article-ink-muted);
}

.article-block__content {
  margin: 0;
}

/* Body HTML inside article (Lexical → HTML) */
.article-block__content.prose-morphball,
.article-block__content.prose {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--article-ink-muted);
}

.article-block__content p {
  margin: 0 0 2rem;
}

.article-block__content p:last-child {
  margin-bottom: 0;
}

.article-block__content h1,
.article-block__content h2 {
  margin: 2rem 0 1rem;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.286;
  letter-spacing: -0.0286em;
  color: var(--article-ink);
  scroll-margin-top: calc(var(--app-shell-header-height, 4rem) + 0.75rem);
}

.article-block__content h3 {
  margin: 2rem 0 0.5rem;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--article-ink);
  scroll-margin-top: calc(var(--app-shell-header-height, 4rem) + 0.75rem);
}

.article-block__content h4 {
  margin: 1.5rem 0 0.5rem;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--article-ink);
}

.article-block__content h1:first-child,
.article-block__content h2:first-child,
.article-block__content h3:first-child,
.article-block__content h4:first-child {
  margin-top: 0;
}

.article-block__content ul,
.article-block__content ol {
  margin: 0 0 2rem;
  padding-left: 1.5em;
}

.article-block__content li {
  margin-bottom: 0.25em;
}

.article-block__content a {
  color: var(--article-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.article-block__content a:hover {
  opacity: 0.88;
}

.article-block__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 0.375rem);
}

.article-block__content blockquote {
  border-left: 3px solid var(--article-accent);
  padding-left: 1rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--article-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE LONGFORM — Grapes canvas parity with packages/ui Article.svelte
   ═══════════════════════════════════════════════════════════════════════════ */

.article-longform__reading-bar {
  position: relative;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  background: var(--article-progress-track, rgba(37, 44, 50, 0.08));
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
}

.article-longform__reading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--article-progress-fill, var(--color-primary, #4094f7));
  transition: width 0.15s ease-out;
}

article.article-block.article-block--longform {
  gap: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  --article-reading-bar-height: 3px;
  --article-longform-sticky-top: calc(
    var(--app-shell-header-height, 0px) + var(--article-reading-bar-height)
  );
  --article-longform-toc-padding-top: calc(clamp(2.75rem, 7vh, 4.5rem) + 5vh);
}

.article-block__longform-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.article-block__longform-visual {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-surface-muted, #0f1419);
}

.article-block__longform-visual-bg {
  position: relative;
  width: 100%;
  min-height: min(42vh, 20rem);
}

.article-block__longform-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article-block__longform-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(1rem, 4vw, 1.75rem) var(--article-inline-padding, clamp(1rem, 4vw, 1.5rem));
}

.article-block__header--longform-main {
  border-bottom: 1px solid var(--article-border-subtle);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.article-block__title--longform-main {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.article-block__read-time {
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .article-block__longform-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    min-height: calc(100vh - var(--article-longform-sticky-top));
  }

  .article-block__longform-visual {
    position: sticky;
    top: var(--article-longform-sticky-top);
    align-self: start;
    height: calc(100vh - var(--article-longform-sticky-top));
    max-height: calc(100vh - var(--article-longform-sticky-top));
    z-index: 1;
  }

  .article-block__longform-visual-bg {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  .article-block__longform-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .article-block__longform-copy {
    padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem)
      clamp(1.25rem, 3vw, 2rem);
    max-width: min(var(--article-max-width, 48rem), 100%);
  }

  .article-block__toc-overlay {
    position: absolute;
    z-index: 40;
    inset: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    padding-top: var(
      --article-longform-toc-padding-top,
      calc(clamp(2.75rem, 7vh, 4.5rem) + 5vh)
    );
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none;
    box-sizing: border-box;
  }

  .article-block__toc-overlay-panel {
    pointer-events: auto;
    max-width: min(100%, 18rem);
    padding: 0.75rem 1rem 1rem;
    border-radius: 0.75rem;
    background: rgba(8, 12, 18, 0.32);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .article-block__toc-overlay-heading {
    margin: 0 0 1rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
  }

  .article-block__toc-overlay-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
  }

  .article-block__toc-overlay-item {
    margin: 0 0 0.5rem;
  }

  .article-block__toc-overlay-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-decoration: none;
  }

  .article-block__toc-overlay-link:hover {
    color: var(--article-accent, #7ec8ff);
  }

  .article-block__toc-overlay-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
  }

  .article-block__toc-overlay-link--active .article-block__toc-overlay-dot {
    background: var(--article-accent, #4094f7);
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.95);
  }

  .article-block__toc-overlay-sublist {
    margin: 0.35rem 0 0 1.1rem;
    padding: 0;
    list-style: none;
  }

  .article-block__toc-overlay-sublink {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
  }

  .article-block__toc-overlay-sublink:hover {
    color: #fff;
    text-decoration: underline;
  }

  .article-block__mobile-toc--longform {
    display: none;
  }
}

@media (max-width: 1023px) {
  .article-block__toc-overlay {
    display: none;
  }
}

.article-block__mobile-toc--longform {
  border: 1px solid var(--article-border-subtle);
  border-radius: var(--radius-lg, 0.5rem);
  padding: 0;
  background: var(--color-surface, #fff);
}

.article-block__mobile-toc--longform .article-block__mobile-toc-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--article-ink, #252c32);
}

.article-block__mobile-toc--longform .article-block__mobile-toc-summary::-webkit-details-marker {
  display: none;
}

.article-block__mobile-toc--longform .article-block__mobile-toc-nav {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: inherit;
}

.article-block__mobile-toc--longform .article-block__mobile-toc-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--article-ink, #252c32);
  text-decoration: none;
}

.article-block__mobile-toc--longform .article-block__mobile-toc-link:hover {
  color: var(--article-accent, #4094f7);
}

.article-block__mobile-toc--longform .article-block__mobile-toc-sub {
  margin: 0.25rem 0 0.5rem 0.75rem;
  padding: 0 0 0 0.65rem;
  list-style: none;
  border-left: 2px solid var(--article-border-subtle, #e5e7eb);
}

.article-block__mobile-toc--longform .article-block__mobile-toc-sublink {
  font-size: 0.8125rem;
  color: var(--article-ink-muted, #6b7280);
  text-decoration: none;
}

.article-block__main--longform {
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RICH TEXT BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.richtext-block {
  padding: var(--richtext-padding-y) var(--richtext-padding-x);
  width: 100%;
}

.richtext-block > * {
  max-width: var(--richtext-max-width);
  margin-left: auto;
  margin-right: auto;
}

.richtext-block p {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.richtext-block h1,
.richtext-block h2,
.richtext-block h3,
.richtext-block h4 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.richtext-block ul,
.richtext-block ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.richtext-block li {
  margin-bottom: var(--space-2);
}

.richtext-block a {
  color: var(--color-primary);
  text-decoration: underline;
}

.richtext-block a:hover {
  color: var(--color-primary-hover);
}

.richtext-block blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.image-block {
  padding: var(--image-block-padding);
  text-align: center;
  width: 100%;
}

.image-block img {
  max-width: 100%;
  height: auto;
  border-radius: var(--image-border-radius);
  box-shadow: var(--image-shadow);
}

.image-block figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPACER BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.spacer-block {
  width: 100%;
}

.spacer-block[data-size="sm"] {
  height: var(--spacer-sm);
}

.spacer-block[data-size="md"] {
  height: var(--spacer-md);
}

.spacer-block[data-size="lg"] {
  height: var(--spacer-lg);
}

.spacer-block[data-size="xl"] {
  height: var(--spacer-xl);
}

/* Default spacer height */
.spacer-block:not([data-size]) {
  height: var(--spacer-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   POWER HERO BLOCK – GrapesJS canvas + published frontend
   Uses tokens from demo-tokens.css / design system. Layout and typography
   must match PowerHero.svelte so builder preview = published output.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Power Hero: 3-layer background. Layer 1: solid base (color+opacity). Layer 2: image + gradient overlay. Layer 3: noise (::after). */
.power-hero-block {
  --power-hero-separator-line: rgba(255, 255, 255, 0.2);
  background-color: var(--power-hero-bg-base, rgba(15, 23, 42, 0.95));
  background-image: var(--power-hero-bg-gradient, linear-gradient(90deg, rgba(15,23,42,0.46) 0%, rgba(19,78,74,0.375) 30%, rgba(30,41,59,0.46) 60%, rgba(15,23,42,0.46) 100%)), var(--power-hero-bg-image, var(--power-hero-bg-dummy));
  background-size: cover, cover;
  background-position: center, center;
  color: var(--color-text-inverse, #fff);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 5fr 2fr;
  gap: var(--space-8, 2rem);
  padding: var(--space-12, 3rem) var(--space-8, 2rem);
  max-width: 100%;
  margin: 0;
  align-items: center;
  box-sizing: border-box;
}

/* Noise effect overlay – uses --power-hero-bg-noise (0–0.08) for opacity */
.power-hero-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--power-hero-bg-noise);
  pointer-events: none;
  z-index: 0;
}

.power-hero-block > * {
  position: relative;
  z-index: 1;
}

/* Video background – builder preview */
.power-hero-block > .power-hero-bg-video,
.power-hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.power-hero-bg-video iframe,
.power-hero-bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.power-hero-bg-video iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
}
.power-hero-block > *:not(.power-hero-bg-video) {
  position: relative;
  z-index: 2;
}

/* When video is present, gradient overlay is lighter so video shines through (parity with PowerHero.svelte) */
.power-hero-block--has-video .power-hero-gradient-overlay {
  opacity: 0.35;
}
.power-hero-block--has-video::after {
  opacity: calc(var(--power-hero-bg-noise, 0.02) * 0.5);
}

.power-hero-block__grid {
  display: grid;
  grid-template-columns: 1fr 7fr;
  gap: var(--space-8, 2rem);
  min-height: 100vh;
  padding: var(--space-12, 3rem) var(--space-8, 2rem);
  max-width: 100%;
  margin: 0;
  align-items: center;
}

@media (max-width: 768px) {
  .power-hero-block,
  .power-hero-block__grid {
    grid-template-columns: 1fr;
  }
  .power-hero-block__eyebrow-col {
    order: -1;
  }
}

.power-hero-block__eyebrow-col {
  display: flex;
  flex-direction: column;
  position: relative;
}

.power-hero-block__center {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  position: relative;
}

.power-hero-block__eyebrow {
  font-size: var(--power-hero-eyebrow-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--power-hero-eyebrow-font-weight, var(--font-medium, 500));
  letter-spacing: var(--power-hero-eyebrow-letter-spacing, var(--tracking-widest, 0.1em));
  text-transform: var(--power-hero-eyebrow-text-transform, uppercase);
  color: var(--power-hero-eyebrow-color, var(--color-text-inverse, #fff));
  margin: 0;
}

.power-hero-block__headline {
  margin: 0;
  color: inherit;
  white-space: pre-line;
  line-height: 0.95;
}

.power-hero-block__cta {
  display: inline-block;
  padding: var(--space-3, 0.75rem) var(--space-8, 2rem);
  background: var(--power-hero-cta-bg, transparent);
  color: var(--power-hero-cta-color, var(--color-text-inverse, #fff));
  border: var(--power-hero-cta-border, 2px solid var(--color-text-inverse));
  text-decoration: none;
  font-weight: var(--font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
  align-self: flex-start;
  transition: background 0.2s;
}

.power-hero-block__cta:hover {
  background: var(--power-hero-cta-hover-bg, rgba(255, 255, 255, 0.1));
}

/* ═══════════════════════════════════════════════════════════════════════════
   POWER HERO 2 BLOCK – design-system driven (no inline styles)
   Same tokens as .power-hero-block; only overrides use inline (rootStyle).
   ═══════════════════════════════════════════════════════════════════════════ */

.power-hero2-block {
  background-color: var(--power-hero-bg-base, rgba(15, 23, 42, 0.95));
  background-image: var(--power-hero-bg-gradient, linear-gradient(90deg, rgba(15,23,42,0.46) 0%, rgba(19,78,74,0.375) 30%, rgba(30,41,59,0.46) 60%, rgba(15,23,42,0.46) 100%)), var(--power-hero-bg-image, var(--power-hero-bg-dummy));
  background-size: cover, cover;
  background-position: center, center;
  color: var(--color-text-inverse, #fff);
  min-height: 100vh;
  position: relative;
  overflow: visible;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 7fr;
  gap: var(--space-8, 2rem);
  padding: var(--space-12, 3rem) var(--space-8, 2rem);
  max-width: 100%;
  margin: 0;
  align-items: center;
  box-sizing: border-box;
}

.power-hero2-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--power-hero-bg-noise, 0.02);
  pointer-events: none;
  z-index: 0;
}

.power-hero2-block__gradient-overlay {
  position: absolute;
  inset: 0;
  background: var(--power-hero-bg-gradient, linear-gradient(90deg, rgba(15,23,42,0.46) 0%, rgba(19,78,74,0.375) 30%, rgba(30,41,59,0.46) 60%, rgba(15,23,42,0.46) 100%));
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.power-hero2-block--has-video .power-hero2-block__gradient-overlay {
  opacity: 0.5;
}

.power-hero2-block--has-video::after {
  opacity: calc(var(--power-hero-bg-noise, 0.02) * 0.5);
}

.power-hero2-block__eyebrow {
  font-size: var(--power-hero-eyebrow-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--power-hero-eyebrow-font-weight, var(--font-medium, 500));
  letter-spacing: var(--power-hero-eyebrow-letter-spacing, var(--tracking-widest, 0.1em));
  text-transform: uppercase;
  color: var(--power-hero-eyebrow-color, var(--color-text-inverse, #fff));
  margin: 0;
}

.power-hero2-block__headline {
  color: var(--color-text-inverse, #fff);
}

@media (max-width: 1024px) {
  .power-hero2-block,
  .power-hero2-block__grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POWER HERO LAYERED – 100vh; same --power-hero-* stack as Power Hero 2
   ═══════════════════════════════════════════════════════════════════════════ */

.power-hero-layered-block {
  /* Clear fixed header / app shell; override per theme with --power-hero-layered-nav-offset */
  --power-hero-layered-nav-offset: 80px;
  background-color: var(--power-hero-bg-base, var(--color-gray-200, #e5e7eb));
  background-image: var(--power-hero-bg-gradient, linear-gradient(180deg, #eceef2 0%, #d4d8df 50%, #c8cdd6 100%)), var(--power-hero-bg-image, var(--power-hero-bg-dummy));
  background-size: cover, cover;
  background-position: center, center;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.power-hero-layered-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--power-hero-bg-noise, 0.02);
  pointer-events: none;
  z-index: 0;
}

.power-hero-layered-block--has-video::after {
  opacity: calc(var(--power-hero-bg-noise, 0.02) * 0.5);
}

.power-hero-layered-block
  > *:not(.power-hero-layered-block__bg-video):not(.power-hero-layered-block__gradient-overlay):not(.power-hero-layered-block__bg-video-el) {
  position: relative;
  z-index: 2;
}

/* Layout + typography mirror PowerHeroLayered.svelte so Grapes canvas matches published (canvas has no Svelte scoped CSS). */
.power-hero-layered-block__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.power-hero-layered-block__bg-video iframe,
video.power-hero-layered-block__bg-video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.power-hero-layered-block__bg-video iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
}

/* Scrim over video/image: separate from section --power-hero-bg-gradient so light theme gradients do not create a milky veil. */
.power-hero-layered-block__gradient-overlay {
  position: absolute;
  inset: 0;
  background: var(
    --power-hero-layered-overlay-gradient,
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%)
  );
  opacity: var(--power-hero-layered-overlay-opacity, 0.14);
  pointer-events: none;
  z-index: 0;
}

.power-hero-layered-block--has-video .power-hero-layered-block__gradient-overlay {
  opacity: var(--power-hero-layered-overlay-opacity-video, 0.18);
}

.power-hero-layered-block__shell {
  min-height: 100vh;
  width: 100%;
  max-width: var(--max-width-2xl, 1536px);
  margin: 0 auto;
  padding: calc(var(--space-10, 2.5rem) + var(--power-hero-layered-nav-offset, 80px)) var(--space-8, 2rem) var(--space-12, 3rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6, 1.5rem);
  align-items: start;
  color: #ffffff;
}

.power-hero-layered-block__top-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  max-width: min(100%, 22rem);
  z-index: 3;
}

.power-hero-layered-block__chip {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  letter-spacing: var(--tracking-wide, 0.025em);
  text-transform: uppercase;
  color: var(--power-hero-layered-chip-fg, var(--color-gray-700, #374151));
  background: var(--power-hero-layered-chip-bg, var(--color-gray-200, #e5e7eb));
  border-radius: var(--radius-md, 0.375rem);
}

.power-hero-layered-block__subline {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-light, 300);
  line-height: var(--leading-snug, 1.375);
  color: var(--power-hero-layered-subline, #ffffff);
  text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55);
  white-space: pre-line;
}

.power-hero-layered-block__center-stage {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  place-self: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(70vh, 32rem);
  width: 100%;
  z-index: 1;
}

.power-hero-layered-block__figure {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(72vw, 38rem);
  max-height: min(55vh, 28rem);
  width: auto;
  height: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.power-hero-layered-block__headline {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 0.92;
  letter-spacing: var(--tracking-tighter, -0.05em);
  color: var(--power-hero-layered-headline-solid, #ffffff);
  text-transform: uppercase;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  max-width: 100%;
}

.power-hero-layered-block__headline-solid {
  color: inherit;
}

.power-hero-layered-block__headline-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: var(--power-hero-layered-outline-width, 0.055em);
  -webkit-text-stroke-color: var(--power-hero-layered-outline-color, #ffffff);
  paint-order: stroke fill;
  text-shadow: none;
}

@supports not (-webkit-text-stroke-width: 1px) {
  .power-hero-layered-block__headline-outline {
    color: var(--power-hero-layered-outline-fallback, #ffffff);
    -webkit-text-fill-color: unset;
  }
}

.power-hero-layered-block__bottom-right {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  max-width: min(100%, 24rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  align-items: flex-start;
  text-align: left;
  z-index: 3;
}

.power-hero-layered-block__accessory {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-relaxed, 1.625);
  font-weight: var(--font-medium, 500);
  color: var(--power-hero-layered-accessory, #ffffff);
  text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55);
}

.power-hero-layered-block__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  background: var(--power-hero-layered-cta-bg, var(--color-black, #000));
  color: var(--power-hero-layered-cta-fg, #ffffff);
  text-decoration: none;
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  letter-spacing: var(--tracking-widest, 0.1em);
  text-transform: uppercase;
  border-radius: var(--radius-full, 9999px);
  border: none;
  transition: opacity 0.2s, transform 0.2s;
}

.power-hero-layered-block__cta:hover {
  opacity: 0.92;
}

.power-hero-layered-block__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.85em;
  line-height: 1;
}

@media (max-width: 900px) {
  .power-hero-layered-block {
    --power-hero-layered-nav-offset: calc(80px + env(safe-area-inset-top, 0px));
  }

  .power-hero-layered-block__shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .power-hero-layered-block__top-left {
    grid-column: 1;
    grid-row: 1;
  }

  .power-hero-layered-block__center-stage {
    grid-column: 1;
    grid-row: 2;
    min-height: 40vh;
  }

  .power-hero-layered-block__bottom-right {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POWER HERO FLANK – layered-style bg/video; desktop: text + lists L/R, image center
   ═══════════════════════════════════════════════════════════════════════════ */

.power-hero-flank-block {
  --power-hero-flank-nav-offset: 80px;
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  color: #ffffff;
}

/* Static / image-only background layer (same z-index stack as video wrapper). */
.power-hero-flank-block::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--power-hero-bg-image, none);
  /* Full width, height from intrinsic aspect ratio; top pinned so the image head stays in view (no cover crop). */
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  filter: blur(var(--power-hero-bg-blur, 0));
}

/* Poster/--power-hero-bg-image must not paint on top of the video (matches Power Hero / PH2: video is unobstructed). */
.power-hero-flank-block--has-video::after {
  content: none;
}

.power-hero-flank-block
  > *:not(.power-hero-flank-block__bg-video):not(.power-hero-flank-block__bg-video-el) {
  position: relative;
  z-index: 2;
}

.power-hero-flank-block__bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.power-hero-flank-block__bg-video iframe,
video.power-hero-flank-block__bg-video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.power-hero-flank-block__bg-video iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
}

.power-hero-flank-block__shell {
  min-height: 100vh;
  width: 100%;
  max-width: var(--max-width-2xl, 1536px);
  margin: 0 auto;
  padding: calc(var(--space-10, 2.5rem) + var(--power-hero-flank-nav-offset, 80px)) var(--space-8, 2rem) var(--space-12, 3rem);
  box-sizing: border-box;
  display: grid;
  /* 2×3 grid like layered shell; flank lists sit row 1 top (with headline), not bottom-right */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6, 1.5rem);
  align-items: start;
  color: #ffffff;
}

.power-hero-flank-block__col--left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  max-width: min(100%, 22rem);
  z-index: 3;
}

.power-hero-flank-block__col--right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  max-width: min(100%, 24rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  align-items: flex-start;
  text-align: left;
  z-index: 3;
}

.power-hero-flank-block__col--center {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  place-self: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(70vh, 32rem);
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.power-hero-flank-block .power-hero-flank-block__headline {
  margin: 0;
  line-height: 1;
  color: var(--power-hero-flank-headline, #ffffff);
  /* Size / weight / transform come from .heading-style-* (default: hero, same scale as golden hero). */
}

.power-hero-flank-block__accessory {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-relaxed, 1.625);
  font-weight: var(--font-medium, 500);
  color: var(--power-hero-flank-accessory, #ffffff);
  text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55);
  white-space: pre-line;
}

.power-hero-flank-block__list-heading {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-semibold, 600);
  letter-spacing: var(--tracking-widest, 0.1em);
  text-transform: uppercase;
  color: var(--power-hero-flank-list-heading, rgba(255, 255, 255, 0.85));
}

.power-hero-flank-block__list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.65;
  color: var(--power-hero-flank-list, #ffffff);
  text-shadow: 0 0.06em 0.25em rgba(0, 0, 0, 0.45);
}

.power-hero-flank-block__list li {
  margin-bottom: var(--space-1, 0.25rem);
}

.power-hero-flank-block__figure {
  max-width: min(72vw, 38rem);
  max-height: min(55vh, 28rem);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  user-select: none;
}

@media (max-width: 1024px) {
  .power-hero-flank-block__shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .power-hero-flank-block__col--left {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .power-hero-flank-block__col--center {
    grid-column: 1;
    grid-row: auto;
    place-self: center;
    order: 2;
    min-height: min(40vh, 16rem);
  }

  .power-hero-flank-block__col--right {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    order: 3;
  }
}

@media (max-width: 768px) {
  .power-hero-flank-block {
    --power-hero-flank-nav-offset: calc(80px + env(safe-area-inset-top, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POWER HERO SPLIT BLOCK – simple 2-col, half size (~24rem/50vh), stackable
   ═══════════════════════════════════════════════════════════════════════════ */

/* Power Hero Four Col – default 75vh, 4 equal columns; uses design tokens. Full layout in PowerHeroFourCol.svelte. */
.power-hero-four-col-block {
  --power-hero-four-col-bg: var(--power-hero-four-col-bg, var(--color-white));
  --power-hero-four-col-text: var(--power-hero-four-col-text, var(--color-black));
  --power-hero-four-col-number: var(--power-hero-four-col-number, var(--color-surfer-blue));
  --power-hero-four-col-min-height: var(--power-hero-four-col-min-height, 75vh);
  --power-hero-four-col-border: var(--power-hero-four-col-border, var(--color-border));
  --power-hero-four-col-placeholder-bg: var(--power-hero-four-col-placeholder-bg, var(--color-gray-100));
  min-height: var(--power-hero-four-col-min-height);
  color: var(--power-hero-four-col-text);
  background-color: var(--power-hero-four-col-bg);
  width: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
}

.power-hero-four-col-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  min-height: var(--power-hero-four-col-min-height);
  height: 100%;
  align-items: stretch;
  max-width: var(--max-width-2xl, 1536px);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.power-hero-four-col-block__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--power-hero-four-col-min-height);
  height: 100%;
  padding: var(--space-8, 2rem);
}

.power-hero-four-col-block__col--number { justify-content: center; align-items: center; }
.power-hero-four-col-block__col--content { align-items: flex-start; justify-content: center; text-align: left; }
.power-hero-four-col-block__col--image { padding: 0; overflow: hidden; }
/* 1px to match power-hero separator; when --power-hero-four-col-separator is set (blue/dark bg) use it for same line, slightly more transparent over blue */
.power-hero-four-col-block__col--border-right {
  border-right: 1px solid var(--power-hero-four-col-separator, var(--power-hero-four-col-border));
}

.power-hero-four-col-block__number {
  font-family: var(--font-power-hero, 'League Gothic', sans-serif);
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--power-hero-four-col-number);
  opacity: 0.2;
  user-select: none;
}

.power-hero-four-col-block__headline {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--space-4, 1rem);
  color: inherit;
}

.power-hero-four-col-block__subhead {
  font-size: var(--text-base, 1rem);
  line-height: 1.6;
  margin: 0;
  color: inherit;
  opacity: 0.9;
}

.power-hero-four-col-block__img {
  width: 100%;
  height: 100%;
  min-height: var(--power-hero-four-col-min-height);
  object-fit: cover;
  display: block;
}

.power-hero-four-col-block__placeholder {
  width: 100%;
  min-height: var(--power-hero-four-col-min-height);
  background: var(--power-hero-four-col-bg);
}

/* Layout flip: number on right, text on left (canvas + published) */
.power-hero-four-col-block--reversed .power-hero-four-col-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.power-hero-four-col-block--reversed .power-hero-four-col-block__grid > *:nth-child(1) { order: 3; }
.power-hero-four-col-block--reversed .power-hero-four-col-block__grid > *:nth-child(2) { order: 2; }
.power-hero-four-col-block--reversed .power-hero-four-col-block__grid > *:nth-child(3) { order: 1; }
.power-hero-four-col-block--reversed .power-hero-four-col-block__grid > *:nth-child(4) { order: 4; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAT LIST BLOCK – power-hero headline font, label + subtext per row,
   subtext always visible; hover = background color only (design-system blue).
   ═══════════════════════════════════════════════════════════════════════════ */

.fat-list-block__inner {
  max-width: var(--max-width-2xl, 1536px);
  margin: 0 auto;
}

.fat-list-block__heading {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fat-list-text);
  opacity: 0.85;
  margin: 0 0 var(--space-8, 2rem);
}

.fat-list-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fat-list-divider, rgba(255, 255, 255, 0.12));
}

.fat-list-block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8, 2rem);
  border-bottom: 1px solid var(--fat-list-divider, rgba(255, 255, 255, 0.12));
  padding: var(--space-6, 1.5rem) 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.fat-list-block__row:hover {
  background-color: var(--fat-list-hover-bg);
  color: var(--fat-list-hover-text);
}

.fat-list-block__row:hover .fat-list-block__subtext {
  color: var(--fat-list-hover-text);
}

.fat-list-block__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-8, 2rem);
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.fat-list-block__label {
  font-family: var(--fat-list-label-font-family, var(--typography-h1-power-hero-font-family), 'League Gothic', sans-serif);
  font-size: var(--fat-list-label-font-size, clamp(2rem, 5vw, 4rem));
  font-weight: var(--fat-list-label-font-weight, 400);
  line-height: 0.95;
  letter-spacing: var(--fat-list-label-letter-spacing, -0.02em);
  text-transform: var(--fat-list-label-text-transform, uppercase);
  flex-shrink: 0;
  color: inherit;
}

.fat-list-block__subtext {
  font-size: var(--fat-list-subtext-font-size, var(--text-base));
  color: var(--fat-list-subtext-color, rgba(255, 255, 255, 0.8));
  margin: 0;
  max-width: 42ch;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.fat-list-block__link .fat-list-block__label {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO CENTERED BLOCK – left-aligned big text, vertically centered in frame
   Default: black text on white; use design tokens or trait to override.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-centered-block {
  --hero-centered-bg: var(--color-background, #ffffff);
  --hero-centered-text: var(--color-text, #111111);
  --hero-centered-accent: var(--color-primary, #f97316);
  background-color: var(--hero-centered-bg);
  color: var(--hero-centered-text);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-centered-block__frame {
  width: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12, 3rem) var(--space-8, 2rem);
  position: relative;
}

.hero-centered-block__content {
  max-width: var(--max-width-2xl, 1536px);
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.hero-centered-block__eyebrow {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hero-centered-text);
  opacity: 0.9;
  margin: 0 0 var(--space-4, 1rem);
}

.hero-centered-block__headline {
  margin: 0;
  color: inherit;
  white-space: pre-line;
  line-height: 1.15;
  font-weight: 700;
}

.hero-centered-block__highlight {
  color: var(--hero-centered-accent);
}

.hero-centered-block__indicator {
  position: absolute;
  bottom: var(--space-8, 2rem);
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--hero-centered-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   POWER HERO SPLIT BLOCK – simple 2-col, half size (~24rem/50vh), stackable
   ═══════════════════════════════════════════════════════════════════════════ */

.power-hero-split-block {
  background-color: var(--power-hero-split-bg-base, rgba(15, 23, 42, 0.95));
  background-image: var(--power-hero-split-bg-gradient), var(--power-hero-split-bg-image, var(--power-hero-split-bg-dummy));
  background-size: cover, cover;
  background-position: center, center;
  color: var(--color-text-inverse, #fff);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.power-hero-split-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--power-hero-split-bg-noise, 0.02);
  pointer-events: none;
  z-index: 0;
}

.power-hero-split-block__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: inherit;
  max-width: var(--max-width-2xl, 1536px);
  margin: 0 auto;
  align-items: stretch;
}

.power-hero-split-block__grid--reversed {
  direction: rtl;
}

.power-hero-split-block__grid--reversed > * {
  direction: ltr;
}

.power-hero-split-block__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-8, 2rem) var(--space-12, 3rem);
}

.power-hero-split-block__eyebrow {
  font-size: var(--power-hero-split-eyebrow-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--power-hero-split-eyebrow-font-weight, var(--font-medium, 500));
  letter-spacing: var(--power-hero-split-eyebrow-letter-spacing, var(--tracking-widest, 0.1em));
  text-transform: var(--power-hero-split-eyebrow-text-transform, uppercase);
  color: var(--power-hero-split-eyebrow-color, var(--color-text-inverse, #fff));
  margin: 0;
}

.power-hero-split-block__headline {
  margin: 0;
  color: inherit;
  white-space: pre-line;
  line-height: 1.1;
}

.power-hero-split-block__subhead {
  font-size: var(--power-hero-split-subhead-font-size, var(--text-base, 1rem));
  line-height: 1.5;
  color: var(--power-hero-split-subhead-color, rgba(255, 255, 255, 0.9));
  margin: 0;
}

.power-hero-split-block__cta {
  display: inline-block;
  padding: var(--space-3, 0.75rem) var(--space-8, 2rem);
  background: var(--power-hero-split-cta-bg, transparent);
  color: var(--power-hero-split-cta-color, var(--color-text-inverse, #fff));
  border: var(--power-hero-split-cta-border, 2px solid var(--color-text-inverse));
  text-decoration: none;
  font-weight: var(--font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
  align-self: flex-start;
  transition: background 0.2s;
}

.power-hero-split-block__cta:hover {
  background: var(--power-hero-split-cta-hover-bg, rgba(255, 255, 255, 0.1));
}

.power-hero-split-block__media {
  position: relative;
  overflow: hidden;
}

.power-hero-split-block__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.power-hero-split-block__placeholder {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background: transparent;
}

@media (max-width: 768px) {
  .power-hero-split-block__grid {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .power-hero-split-block__grid--reversed {
    direction: ltr;
  }

  .power-hero-split-block__content {
    order: 1;
  }

  .power-hero-split-block__media {
    order: 0;
    min-height: 12rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOGROLL SIMPLE BLOCK – sidebar list in Power Hero
   ═══════════════════════════════════════════════════════════════════════════ */

.blogroll-simple-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

.blogroll-simple-block__heading {
  font-size: var(--power-hero-sidebar-heading-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--power-hero-sidebar-heading-font-weight, var(--font-semibold, 600));
  letter-spacing: var(--power-hero-sidebar-heading-letter-spacing, var(--tracking-widest, 0.1em));
  text-transform: var(--power-hero-sidebar-heading-text-transform, uppercase);
  color: var(--power-hero-sidebar-heading-color, var(--color-text-inverse, #fff));
  margin: 0;
}

.blogroll-simple-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

.blogroll-simple-block__item {
  margin: 0;
}

.blogroll-simple-block__item a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  color: var(--power-hero-article-title-color, var(--color-text-inverse, #fff));
  text-decoration: none;
  font-size: var(--power-hero-article-title-font-size, var(--text-base, 1rem));
  font-weight: var(--power-hero-article-title-font-weight, var(--font-medium, 500));
}

.blogroll-simple-block__item a:hover {
  opacity: 0.9;
}

.blogroll-simple-block__kicker {
  font-size: var(--power-hero-article-kicker-font-size, var(--text-xs, 0.75rem));
  color: var(--power-hero-article-kicker-color, rgba(255, 255, 255, 0.7));
}

.blogroll-simple-block__title {
  font-size: var(--power-hero-article-title-font-size, var(--text-base, 1rem));
  font-weight: var(--power-hero-article-title-font-weight, var(--font-medium, 500));
  color: var(--power-hero-article-title-color, var(--color-text-inverse, #fff));
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOGROLL MASONRY — matches packages/ui BlogrollMasonry.svelte (Grapes canvas)
   ═══════════════════════════════════════════════════════════════════════════ */

.blogroll-masonry-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
  padding: var(--space-8, 2rem) 0;
}

.blogroll-masonry-block__heading {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-semibold, 600);
  margin: 0;
  color: var(--color-text, inherit);
}

.blogroll-masonry-block__grid {
  column-count: 2;
  column-gap: var(--space-6, 1.5rem);
  margin: 0;
}

@media (max-width: 768px) {
  .blogroll-masonry-block__grid {
    column-count: 1;
  }
}

.blogroll-masonry-block__tile {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--space-6, 1.5rem);
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 4 / 3;
  min-height: 12rem;
  background: var(--color-surface-elevated, #f3f4f6);
}

.blogroll-masonry-block__tile:last-child {
  margin-bottom: 0;
}

.blogroll-masonry-block__tile-bg {
  position: absolute;
  inset: 0;
}

.blogroll-masonry-block__tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blogroll-masonry-block__tile-placeholder-img {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-surface, #e5e7eb);
}

.blogroll-masonry-block__tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6, 1.5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 50%);
  border-radius: var(--radius-lg, 0.75rem);
}

.blogroll-masonry-block__tile-kicker {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.05em);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-1, 0.25rem);
}

.blogroll-masonry-block__tile-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-semibold, 600);
  color: #fff;
  line-height: 1.3;
}

.blogroll-masonry-block__tile:hover .blogroll-masonry-block__tile-title {
  text-decoration: underline;
}

.blogroll-masonry-block__placeholder {
  grid-column: 1 / -1;
  padding: var(--space-8, 2rem);
  text-align: center;
  color: var(--color-text-muted, #6b7280);
  background: var(--color-surface, #f9fafb);
  border-radius: var(--radius-md, 0.5rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.gjs-section {
  width: 100%;
  min-height: 100px;
}

.gjs-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: var(--space-4);
}

.gjs-column {
  flex: 1;
  min-width: 0;
  padding: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.mx-auto { margin-left: auto; margin-right: auto; }

.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --hero-headline-font-size: var(--text-4xl);
    --hero-padding-y: var(--space-16);
    --feature-grid-columns: 2;
  }
}

@media (max-width: 768px) {
  :root {
    --hero-headline-font-size: var(--text-3xl);
    --hero-subhead-font-size: var(--text-lg);
    --hero-padding-y: var(--space-12);
    --hero-padding-x: var(--space-4);
    
    --section-padding-y: var(--space-12);
    --section-padding-x: var(--space-4);
    
    --feature-grid-columns: 1;
    --stats-gap: var(--space-8);
  }
  
  .gjs-row {
    flex-direction: column;
  }
  
  .pricing-block .pricing-grid,
  .pricing-block > div:last-child {
    flex-direction: column;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOLDEN ATOMIC BLOCKS — standalone button, link, image, list, heading, text
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-block;
  padding: var(--btn-padding-y, 0.625rem) var(--btn-padding-x, 1.5rem);
  font-family: var(--btn-font-family, inherit);
  font-size: var(--btn-font-size, 0.875rem);
  font-weight: var(--btn-font-weight, 600);
  line-height: var(--btn-line-height, 1.5);
  text-align: center;
  text-decoration: none;
  border: var(--btn-border-width, 2px) solid transparent;
  border-radius: var(--btn-border-radius, 0.5rem);
  cursor: pointer;
  transition: var(--btn-transition, background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn.btn-primary {
  background: var(--btn-primary-bg, var(--color-primary, #3b82f6));
  color: var(--btn-primary-color, #fff);
  border-color: var(--btn-primary-border, transparent);
}

.btn-primary:hover {
  background: var(--btn-primary-hover-bg, var(--color-primary-hover, #2563eb));
}

.btn-secondary,
.btn.btn-secondary {
  background: var(--btn-secondary-bg, transparent);
  color: var(--btn-secondary-color, var(--color-primary, #3b82f6));
  border-color: var(--btn-secondary-border, var(--color-primary, #3b82f6));
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover-bg, var(--color-primary, #3b82f6));
  color: var(--btn-secondary-hover-color, #fff);
}

.btn-outline,
.btn.btn-outline {
  background: transparent;
  color: var(--btn-outline-color, var(--color-text, #1f2937));
  border-color: var(--btn-outline-border, var(--color-border, #d1d5db));
}

.btn-outline:hover {
  background: var(--btn-outline-hover-bg, var(--color-surface, #f3f4f6));
}

.btn-size-sm { padding: var(--btn-sm-padding-y, 0.375rem) var(--btn-sm-padding-x, 1rem); font-size: var(--btn-sm-font-size, 0.75rem); }
.btn-size-md { padding: var(--btn-md-padding-y, 0.625rem) var(--btn-md-padding-x, 1.5rem); font-size: var(--btn-md-font-size, 0.875rem); }
.btn-size-lg { padding: var(--btn-lg-padding-y, 0.75rem) var(--btn-lg-padding-x, 2rem); font-size: var(--btn-lg-font-size, 1rem); }
.btn-size-xl { padding: var(--btn-xl-padding-y, 1rem) var(--btn-xl-padding-x, 2.5rem); font-size: var(--btn-xl-font-size, 1.125rem); }

.golden-list {
  list-style-position: var(--list-marker-position, outside);
}

.golden-image img {
  max-width: 100%;
  height: auto;
  display: block;
}