/* Home DE192: reusable Gutenberg composition, measured at five viewport widths. */
.d030-hero { margin: 0; width: 100%; max-width: none; overflow: hidden; color: #111112; background: #f6f6f8; border-radius: 0 0 90px 90px; font: 500 16px/1.65 'Work Sans',sans-serif; }
.d030-hero :where(p,h1,figure,.wp-block-group,.wp-block-buttons) { margin-block: 0; }
.d030-hero .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.d030-hero-shell { max-width: 1320px; margin-inline: auto; padding: 96px 0 55px; }
.d030-hero-scene { width: 100%; max-width: 1000px; margin-inline: auto; position: relative; }
.d030-hero-copy { width: 820px; max-width: calc(100% - 32px); margin-inline: auto; text-align: center; }
.d030-hero-heading { position: relative; }
.d030-hero-title-display { display: grid; position: relative; margin: 0; color: #111112; font: 700 72px/1.1 'Work Sans',sans-serif; text-align: center; letter-spacing: normal; overflow-wrap: normal; }
.d030-hero-title-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d030-hero-typing,.d030-hero-title-size { grid-area: 1/1; min-width: 0; min-height: 180px; }
.d030-hero-title-size { visibility: hidden; pointer-events: none; }
.d030-hero-title-mobile { display: none; }
.d030-hero-typing::after,.d030-hero-title-size::after { content: '|'; color: #111112; font-weight: 500; }
.d030-hero-typing::after,.d030-hero-caret { animation: d030-hero-blink 1s infinite; }
.d030-hero-typing--framed::after { content: none; animation: none; }
.d030-hero-caret { color: #111112; font-weight: 500; }
@keyframes d030-hero-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.d030-hero-typing[data-typing-state="skipped"]::after,.d030-hero-typing[data-typing-state="skipped"] .d030-hero-caret { animation: none; }
.d030-hero-heading-editor .d030-hero-typing::after { animation: none; }
.d030-hero-typing-skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d030-hero-typing-skip:focus-visible { z-index: 5; width: auto; height: auto; padding: 10px 16px; margin: 0; left: 50%; transform: translateX(-50%); clip-path: none; background: #fff; color: #111112; border: 1px solid currentColor; border-radius: 8px; }
.d030-hero-description { display: none; }
.d030-hero .d030-hero-actions { display: flex; justify-content: center; gap: 0; padding-top: 36px; padding-bottom: 8.4px; text-align: center; }
.d030-hero-actions .wp-block-button { display: inline-block; margin: 0; }
.d030-hero-actions .wp-block-button__link { display: block; position: relative; overflow: hidden; padding: 21px 32px; font: 700 16px/1 'Work Sans',sans-serif; color: #fff; background: #111112; border: 0; border-radius: 1000px; text-decoration: none; box-shadow: 0 3px 8px rgba(5,10,57,.45); transition: color .3s,background-color .3s; }
.d030-hero-actions .wp-block-button__link::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(120deg,transparent 20%,rgba(255,255,255,.4),transparent 80%) 0 0 / 100px 100% no-repeat; transform: translateX(-100px); animation: d030-hero-shine 3s infinite ease-in-out; pointer-events: none; }
@keyframes d030-hero-shine { 0%,55%,100% { transform: translateX(100%); } 23%,32% { transform: translateX(-100px); } }
.d030-hero-actions .wp-block-button__link:hover { color: #111112; background: #cdf7ad; }
.d030-hero-logo { position: absolute; width: 64px; height: 64px; padding: 16px; margin: 0; background: #fff; border-radius: 20px; box-shadow: 10px 10px 40px rgba(145,145,166,.24); transition: transform 1s cubic-bezier(0,.33,.07,1.03); }
.d030-hero-logo img { display: block; width: 32px; height: 32px; }
.d030-hero-logo--figma { top: -20px; left: -10px; }
.d030-hero-logo--shopify { top: -70px; right: 500px; }
.d030-hero-logo--wordpress { top: 30px; right: 35px; }
.d030-hero-benefits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; max-width: 886px; padding-top: 70px; margin-inline: auto; position: relative; z-index: 1; }
.d030-hero-benefit { padding-inline: 20px; text-align: center; }
.d030-hero .d030-hero-benefit > figure { margin-inline: 0; height: 20px; margin-bottom: 12px; }
.d030-hero-benefit img { width: 20px; height: 20px; display: block; margin-inline: auto; }
.d030-hero .d030-hero-benefit p { font: 600 16px/16px 'Work Sans',sans-serif; margin: 0 0 20px; overflow-wrap: normal; }
.d030-hero-benefits--mobile { display: none; }
@media(max-width:1024px) {
  .d030-hero { background: transparent; border-radius: 0; padding-block: 16px; }
  .d030-hero > .d030-hero-shell { padding: 0; margin-block: 0; background: #f6f6f8; border-radius: 48px; }
  .d030-hero-scene { padding-block: 96px; }
  .d030-hero-copy { width: 320px; }
  .d030-hero-title-display { font-size: 32px; }
  .d030-hero-typing,.d030-hero-title-size { min-height: 120px; padding-inline: 15px; white-space: pre-line; }
  .d030-hero-title-desktop { display: none; }
  .d030-hero-title-mobile { display: inline; }
  .d030-hero-logo--figma { top: 16px; left: 32px; }
  .d030-hero-logo--shopify { top: -16px; right: 80px; }
  .d030-hero-logo--wordpress { top: auto; right: 50px; bottom: 100px; }
  .d030-hero-benefits--desktop { display: none; }
  .d030-hero-benefits--mobile { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; max-width: none; padding: 0 0 20px; }
  .d030-hero-benefits--mobile .d030-hero-benefit { padding: 0; }
  .d030-hero .d030-hero-benefits--mobile figure { height: 26.4px; padding-top: 4.515625px; }
  .d030-hero .d030-hero-benefits--mobile p { font-size: 14px; margin: 0; }
}
/* The source Astra baseline changes below 922px; preserve its inline-image gaps. */
@media(max-width:921px) {
  .d030-hero .d030-hero-actions { padding-bottom: 7.0875px; }
  .d030-hero .d030-hero-benefits--mobile figure { height: 24.0875px; padding-top: 3.359375px; }
}
@media(max-width:767px) {
  .d030-hero { padding-inline: 16px; }
  .d030-hero-scene { padding-bottom: 25px; }
  .d030-hero-copy { width: auto; }
  .d030-hero-copy > .d030-hero-description { display: block; margin-top: 12px; font: 500 14px/1.65 'Work Sans',sans-serif; color: #5e5e5e; text-align: center; }
  .d030-hero-logo--shopify { top: 0; right: 60px; z-index: 2; }
  .d030-hero-logo--wordpress { bottom: 70px; right: -30px; }
  .d030-hero-benefits--mobile .d030-hero-benefit { padding-inline: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .d030-hero-typing::after,.d030-hero-caret,.d030-hero-actions .wp-block-button__link::before { animation: none; }
  .d030-hero-logo { transform: none!important; transition: none; }
}