/* Impact Calculator layout
   Mobile: keep Design Canvas defaults (520px column).
   Desktop: match site pages — ~1120px content, 5% gutters (see tokenisation-calculator / product pages). */

x-dc {
  display: none !important;
}

#dc-root,
#dc-root > .sc-host {
  display: block;
  height: auto !important;
  min-height: 0;
}

@media (min-width: 901px) {
  /* Beat inline max-width:520px (with or without space after colon) */
  #dc-root div[style*='max-width:520'],
  #dc-root div[style*='max-width: 520'],
  #dc-root .ic-wrap {
    max-width: 1120px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Section padding like Protocol Finance / Solutions */
  #dc-root .ic-hero,
  #dc-root .ic-section,
  #dc-root #lead {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  #dc-root .ic-hero {
    padding-top: clamp(64px, 8vw, 104px) !important;
    padding-bottom: clamp(64px, 8vw, 104px) !important;
  }

  #dc-root .ic-section,
  #dc-root #lead {
    padding-top: clamp(56px, 7vw, 88px) !important;
    padding-bottom: clamp(56px, 7vw, 88px) !important;
  }

  /* Hero type */
  #dc-root .ic-hero h1,
  #dc-root h1 {
    font-size: clamp(36px, 3.6vw, 48px) !important;
    line-height: 1.12 !important;
    max-width: 18ch;
  }

  #dc-root .ic-hero p {
    max-width: 40ch;
    font-size: 16px !important;
  }

  /* Section titles only — leave lead-card h2s at designed 21px */
  #dc-root .ic-section .ic-wrap > h2,
  #dc-root .ic-hero .ic-wrap > h2 {
    font-size: clamp(26px, 2.6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  /* Asset chips: 4 across inside the 1120 container (not full viewport) */
  #dc-root .ic-chips,
  #dc-root div[style*='grid-template-columns:1fr 1fr'][style*='gap:10px'],
  #dc-root div[style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Keep lead stacked (two-column was overlapping DC sc-if nodes) */
  #dc-root .ic-lead,
  #dc-root #lead > .ic-wrap {
    display: block !important;
    max-width: 720px !important;
  }

  #dc-root .ic-inputs {
    max-width: 1120px !important;
  }

  /* Card rows inside 1120 */
  #dc-root .ic-card-row {
    display: grid !important;
    gap: 16px !important;
  }

  #dc-root .ic-section--opps .ic-card-row,
  #dc-root .ic-section--research .ic-card-row,
  #dc-root .ic-card-row--beyond {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #dc-root .ic-card-row--mechanics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #dc-root .ic-section--opps .ic-card-row > div,
  #dc-root .ic-section--research .ic-card-row > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: 140px;
    padding: 24px !important;
  }

  #dc-root .ic-section--opps .ic-card-row > div > div:first-child,
  #dc-root .ic-section--research .ic-card-row > div > div:first-child {
    font-size: 32px !important;
    min-width: 0 !important;
    margin-bottom: 10px;
  }

  #dc-root .ic-cta-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px !important;
    max-width: 560px;
  }

  #dc-root .ic-cta-actions > a {
    flex: 1 1 200px;
    max-width: 280px;
  }

  /* Sticky bar content matches page width */
  #dc-root .ic-sticky {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  #dc-root .ic-sticky .ic-wrap {
    max-width: 1120px !important;
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}