/* Page composition; prices, features, disclosures and buttons are shared. */
.website-design-page { color: var(--color-dark-blue); }
.website-design-page p { margin-block: 12px; }
.website-design-page a:not(.button) { color: inherit; text-underline-offset: 3px; }
.website-design-page .button { min-height: 44px; }
.website-design-page .section-title { font-size: 32px; }
.website-design-page .section-intro { margin-bottom: 24px; }
.website-design-section { padding-block: 24px; }
.website-design-hero, .website-design-closing { background: var(--color-dark-blue); color: var(--color-white); text-align: center; }
.website-design-hero h1 { margin: 0 0 16px; font: 600 32px/1.25 var(--font-heading); }
.website-design-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-block: 24px 16px; }
.website-design-hero a:focus-visible, .website-design-closing a:focus-visible { outline-color: var(--color-amber); }
.website-design-trade-grid .content-card { padding: 24px; border-left: 0; }
.website-design-trade-grid .content-card h3 { font: 500 20px/1.3 var(--font-body); }
.website-design-trades-after { text-align: center; padding-top: 12px; }
.website-design-packages, .website-design-process, .website-design-faq { background: var(--color-pale-blue); }
.website-design-package-grid { align-items: stretch; }
.website-design-package-grid .service-offer-card { border: 2px solid var(--color-neutral); box-shadow: 3px 3px 5px rgb(0 0 0 / .2); }
.website-design-package-grid .service-offer-card:has(.service-offer-badge) { border-color: var(--color-primary); }
.website-design-package-grid .service-offer-card h3 { font-size: 24px; }
.website-design-package-grid .service-offer-summary { text-align: left; }
.website-design-package-grid .service-offer-notes { font-size: inherit; }
.website-design-package-grid .content-disclosure summary { text-align: center; }
/* Extend into the card padding; compensate below to preserve body/subgrid positions. */
.website-design-package-grid .service-offer-badge { --banner-inset: 24px; display: flex; justify-content: center; align-self: stretch; width: calc(100% + 2 * var(--banner-inset)); margin: calc(0px - var(--banner-inset)) calc(0px - var(--banner-inset)) calc(12px + var(--banner-inset)); padding: 8px 12px; border-radius: 6px 6px 0 0; background: var(--color-primary); color: var(--color-white); }
.website-design-packages { padding-bottom: 0; }
.website-design-packages .payment-terms { padding-block: 16px; }
.website-design-ownership .container, .website-design-local .container { padding-block: 0; }
.website-design-ownership .container > p:nth-last-of-type(2),
.website-design-local .container > p:nth-last-of-type(2) { border-left: 4px solid var(--color-primary); padding: 12px 20px; }
.website-design-process .process-steps { gap: 16px; }
.website-design-process .content-card { padding: 16px; border-left: 0; }
.website-design-process .content-card h3 { font-size: 22px; }
.website-design-process-after { text-align: center; }
.website-design-faq-list { display: grid; gap: 8px; }
.website-design-closing { padding-bottom: 48px; }
.website-design-closing .section-title { color: var(--color-white); }
@media (min-width: 1024px) {
  .website-design-package-grid { row-gap: 0; }
  .website-design-package-grid .service-offer-card { display: grid; grid-template-rows: subgrid; grid-row: span 11; row-gap: 0; }
  .website-design-package-grid .service-offer-badge { grid-row: 1; justify-self: stretch; }
  .website-design-package-grid .service-offer-card h3 { grid-row: 2; }
  .website-design-package-grid .service-price { grid-row: 3; }
  .website-design-package-grid .service-offer-summary { grid-row: 4; }
  .website-design-package-grid .service-feature-intro { grid-row: 5; }
  .website-design-package-grid .service-feature-list { grid-row: 6; }
  .website-design-package-grid .service-offer-notes:first-of-type { grid-row: 7; }
  .website-design-package-grid .service-offer-action { grid-row: 8; }
  .website-design-package-grid .service-offer-notes:last-of-type { grid-row: 9; }
  .website-design-package-grid .content-disclosure { grid-row: 10 / span 2; align-self: start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .website-design-package-grid { gap: 16px; }
  .website-design-package-grid .service-offer-card { padding: 16px; }
  .website-design-package-grid .service-offer-badge { --banner-inset: 16px; }
  .website-design-package-grid .service-offer-card h3 { font-size: 22px; }
  .website-design-process .process-steps { gap: 12px; }
  .website-design-process .content-card { padding: 12px; }
  .website-design-process .content-card h3 { font-size: 20px; }
}
@media (max-width: 767px) {
  .website-design-actions { gap: 12px; }
  .website-design-trade-grid, .website-design-package-grid { gap: 20px; }
  .website-design-package-grid .service-offer-card { padding: 20px; }
  .website-design-package-grid .service-offer-badge { --banner-inset: 20px; }
}