/* Surface colors have distinct roles. A dark accent is not body text on a dark page. */
html[data-theme] {
  --studio-radius: 4px;
  --studio-radius-small: 3px;
  --studio-shadow-soft: 0 3px 12px rgba(4, 9, 15, .1);
  --studio-shadow: 0 6px 18px rgba(4, 9, 15, .18);
  --v213-card-shadow: 0 4px 16px rgba(4, 9, 15, .14);
  --v213-card-shadow-hover: 0 8px 24px rgba(4, 9, 15, .22);
  --v213-panel-shadow: 0 4px 18px rgba(4, 9, 15, .12);
  --section-heading: var(--studio-on-dark);
  --section-copy: var(--studio-on-dark-muted);
  --section-accent: var(--studio-accent-soft);
  --interaction-focus: #f8e19c;
  --paper-focus: var(--studio-accent-hover);
}

html[data-theme="light"] {
  --section-heading: var(--studio-ink);
  --section-copy: var(--studio-copy);
  --section-accent: var(--studio-accent-hover);
  --interaction-focus: #175c66;
  --v213-card-shadow: 0 3px 12px rgba(17, 29, 40, .08);
  --v213-card-shadow-hover: 0 7px 22px rgba(17, 29, 40, .15);
}

html[data-theme="crimson"] {
  --section-accent: #e3a6ad;
}

/* Entrance motion stays; foreground and surface colors switch together. */
html[data-theme] body .reveal-item {
  transition: opacity .72s cubic-bezier(.2,.74,.21,1) var(--reveal-delay, 0ms),
    transform .72s cubic-bezier(.2,.74,.21,1) var(--reveal-delay, 0ms),
    box-shadow .22s, border-color .22s !important;
}

html[data-theme] body {
  letter-spacing: 0;
}

html[data-theme] body .package-fit-note {
  background: var(--studio-surface-alt) !important;
  border-color: var(--studio-border) !important;
}

html[data-theme] body .tier-complete .package-fit-note {
  background: rgba(255,255,255,.09) !important;
  border-color: var(--studio-border-dark) !important;
}

html[data-theme] body :is(.app-blueprint-breakdown,.revamp-snapshot-copy,.service-proof-note) {
  border-radius: 4px !important;
  border-top: 3px solid var(--studio-accent-soft) !important;
  box-shadow: none !important;
}

html[data-theme]:not([data-theme="light"]) body.standalone-service-builder .service-option-card > span:first-of-type,
html[data-theme]:not([data-theme="light"]) body.standalone-service-builder .service-sale-stack > small {
  color: var(--builder-surface-ink) !important;
  -webkit-text-fill-color: var(--builder-surface-ink) !important;
}

/* Repeated section titles are unframed, consistently inset page content. */
html[data-theme] body main > section > .container.section-intro {
  width: min(1180px, 92%) !important;
  max-width: 1180px !important;
  padding: 12px 24px 24px !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme] body main > section > .container.section-intro::before {
  display: none;
}

html[data-theme] body main > section:has(> .container.section-intro)::before,
html[data-theme] body main > section:has(> .container.section-intro)::after {
  display: none !important;
}

html[data-theme] body main > section > .container.section-intro h2 {
  font-size: 2.15rem !important;
  line-height: 1.2 !important;
  max-width: 32ch;
}

html[data-theme] body :is(.eyebrow, .service-route-kicker, .service-menu-kicker, .social-plan-kicker, .contact-kicker, .work-label) {
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

/* Rectangular content surfaces, softer only where a control needs it. */
html[data-theme] body main :is(
  .process-card, .work-card, .service-detail-panel, .service-menu-card,
  .principle-card, .service-estimate-card, .service-builder-panel,
  .service-option-card, .service-type-card, .contact-panel,
  .standalone-service-card, .price-column, .package-card,
  .growth-price-card, .growth-capability-card, .home-trust-links > a
) {
  border-radius: 4px !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article {
  border-radius: 4px !important;
  box-shadow: var(--v213-card-shadow) !important;
}

html[data-theme] body main .process-steps-section .process-timeline > article:is(:hover, :focus-within) {
  box-shadow: var(--v213-card-shadow-hover) !important;
}

html[data-theme] body :is(.process-prep-grid > div, .process-policy-list > article, .process-policy-grid > div:first-child) {
  border: 1px solid var(--studio-border) !important;
  border-radius: 4px !important;
  background: var(--studio-surface) !important;
  color: var(--studio-ink) !important;
  -webkit-text-fill-color: var(--studio-ink) !important;
  box-shadow: none !important;
  padding: 22px !important;
}

html[data-theme] body :is(.process-prep-grid > div, .process-policy-list > article, .process-policy-grid > div:first-child) :is(b, h2, h3) {
  color: var(--studio-ink) !important;
  -webkit-text-fill-color: var(--studio-ink) !important;
}

html[data-theme] body :is(.process-prep-grid > div, .process-policy-list > article) p {
  color: var(--studio-copy) !important;
  -webkit-text-fill-color: var(--studio-copy) !important;
}

html[data-theme] body .process-policy-grid > div:first-child h2 {
  font-size: 1.9rem !important;
  line-height: 1.2 !important;
}

html[data-theme] body .process-media-card {
  border-radius: 4px !important;
}

/* Supporting content should not appear to be a button when hovered. */
html[data-theme] body :is(.service-builder-panel, .service-estimate-card, .contact-panel)::after {
  display: none !important;
}

html[data-theme] body :is(.service-builder-panel, .service-estimate-card, .contact-panel) {
  transform: none !important;
  box-shadow: var(--studio-shadow-soft) !important;
}

html[data-theme] body :is(.package-fit-note, .summary-note, .quote-reference-note, .service-builder-note) {
  border-radius: 3px !important;
  box-shadow: none !important;
}

html[data-theme] body :is(.trust-surface.policy-shell > .eyebrow, #galaxy-email-status) {
  color: var(--studio-accent-hover) !important;
  -webkit-text-fill-color: var(--studio-accent-hover) !important;
}

html[data-theme] body :is(input, textarea, select) {
  border-radius: 3px !important;
}

html[data-theme] body :is(.btn, .package-card-cta, .footer-cta-link) {
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-align: center;
}

html[data-theme] body .footer-cta-link {
  min-height: 42px;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html[data-theme] body :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--interaction-focus) !important;
  outline-offset: 3px !important;
}

html[data-theme] body :is(.contact-panel, .wizard-panel, .tier-card:not(.tier-complete), .service-menu-card, .trust-surface) :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--paper-focus) !important;
}

html[data-theme] body main .process-steps-section .process-card-link:focus-visible {
  outline-color: var(--process-icon-color) !important;
  outline-offset: -6px !important;
}

html[data-theme] body [data-coupon-message].is-error {
  color: #ffcfcb !important;
  -webkit-text-fill-color: #ffcfcb !important;
  font-weight: 700;
}

html[data-theme="light"] body [data-coupon-message].is-error,
html[data-theme] body :is(.coupon-code-block, [data-entry-discount]) [data-coupon-message].is-error {
  color: #992c32 !important;
  -webkit-text-fill-color: #992c32 !important;
}

@media (max-width: 760px) {
  html[data-theme] body main > section > .container.section-intro {
    padding: 8px 18px 18px !important;
  }
  html[data-theme] body main > section > .container.section-intro h2 {
    font-size: 1.75rem !important;
  }
  html[data-theme] body :is(input, textarea, select) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(a, button, .process-card, .service-type-card, .service-option-card, .reveal-item) {
    transition: none !important;
    animation: none !important;
  }
}